6

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.

turtle
  • 7,533
  • 18
  • 68
  • 97

1 Answers1

4

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
});
Pedro L.
  • 7,376
  • 3
  • 25
  • 27
  • Thanks. I'm simply looking for an example that shows how to use node to push data into a D3 viz. – turtle Sep 07 '13 at 13:42
  • So you just want a node app to serve data? – Pedro L. Sep 07 '13 at 13:43
  • This is great! One more thing I want to understand. If I want to make a svg circle with d3 and pass the x, y, and radius data to the browser to generate the circle, how can I do this? ` 2 ` – turtle Sep 07 '13 at 13:49
  • 1
    Ok, I've updated the response. But I feel that your question has nothing to do with node or D3. You first need basic HTTP and javascript knowledge. – Pedro L. Sep 07 '13 at 14:01
  • Thanks again for the help. Yes, I don't usually do this type of thing, so my knowledge is lacking. I've got the server running with `node myapp.js` and I see the data at `/circle`. What is the jQuery bit. Is this a separate file? I don't see any alerts. Sorry for my lack of knowledge. – turtle Sep 07 '13 at 14:11
  • jQuery is a javascript library: http://jquery.com/ – Pedro L. Sep 07 '13 at 14:27
  • What file does the `Client using jQuery` go into? – turtle Sep 07 '13 at 14:49
  • Inside an html document, between – Pedro L. Sep 07 '13 at 18:31