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.
1 Answer
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
});
8 Comments
turtle
Thanks. I'm simply looking for an example that shows how to use node to push data into a D3 viz.
Pedro L.
So you just want a node app to serve data?
turtle
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?
<svg width="50" height="50"> 2 <circle cx="25" cy="25" r="25" fill="purple" /> </svg>Pedro L.
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.
turtle
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. |