Barbarian Meets Coding Titlebarbarianmeetscoding

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

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

Would look like this

    d3.append('body').append('svg')
        .append('rect')
        .attr('width', 50)
        .attr('height', 200)
        .style('fill', 'blue');

References


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García