Data Visualizations using D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3 allows us to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, we can use D3 to generate an HTML table from an array of numbers.

For example, to change the text color of paragraph elements:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, we can rewrite the above loop as:

d3.selectAll("p").style("color", "white");

Yet, we can still manipulate individual nodes as needed:

d3.select("body").style("background-color", "black");


Topsoil is using  SVG  for data visualizations. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C).