barbarian meets coding

WebDev, UX & a Pinch of Fantasy

D3.js

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

D3js(Data Driven Documents) is a javascript library that lets you create and manipulate svg elements on the web via a javascript API (instead of writing SVG HTML elements).

A simple example of D3js to produce the equivalent to

1
2
3
<svg>
    <rect width="50" height="200" style="fill:blue;"/>
</svg>

Would look like this

1
2
3
4
5
d3.append('body').append('svg')
    .append('rect')
    .attr('width', 50)
    .attr('height', 200)
    .style('fill', 'blue');

References

Comments