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.
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.
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.
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.
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With