Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3.js visualization with node.js [closed]

Tags:

node.js

d3.js

I'm just starting to learn node.js and I'd like to learn how to use node to create a D3.js visual. Can anyone explain how I can go about doing this? Ideally, I'm looking for an example that is as simple as possible that I can read through the code and understand how to do this. I've looked at some length, but I haven't found any reproducible examples.

like image 319
turtle Avatar asked Sep 07 '13 13:09

turtle


People also ask

Is d3js open source?

js, or D3, stands for data-driven documents. It is an open-source JavaScript library that creates interactive data visualizations in a web browser using SVG, HTML, and CSS.

Do people still use D3 JS?

The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.

Which is better D3 or chart js?

Chart. js provides a selection of ready to go charts which can be styled and configured while D3 offers building blocks which are combined to create virtually any data visualisation.


1 Answers

What are you trying to do? Node.js doesn't has any graphic interface or DOM.

You could use a headless browser in node but you would still require a real browser to render the results.

Edit after comment:

If what you want is a node app to serve data, try the express framework.

Simple express server:

var express = require('express');
var app = express();

app.get('/circle', function(req, res){
  // CSP headers
  res.set("Access-Control-Allow-Origin", "*");
  res.set("Access-Control-Allow-Headers", "X-Requested-With");
  // response
  res.send({ x: 12, y: 34, r: 5 });
});

app.listen(3000);

Use an Ajax request to get the values. Probably you want to set the CSP headers in the response to allow cross domain requests.

Client using jQuery:

$.get('http://yourserver.com:3000/circle', function(data) {
  alert(data);
  // set here your svg properties
});
like image 103
Pedro L. Avatar answered Oct 18 '22 19:10

Pedro L.