d3.js Appealing Visualizations

With ever-increasing amount of data, both in terms of quantity as well as quality, what we need is a precise and accurate way to represent it for better comprehension and facilitate decision making. That’s where d3.js comes to rescue.

d3 stands for Data Driven Document, i.e. when your web-page is interacting with data. Data can be as simple a simple array of integers or can be as complex as something else.

Why choose d3.js ?

  • it works seamlessly with existing web technologies
  • can manipulate any part of the document object model
  • it is as flexible as the client side web technology stack (HTML, CSS, SVG)
  • takes advantage of built in functionality that the browser has, simplifying the developer’s job, especially for mouse interaction.

What d3.js is not ?

  • it is not a graphics library
  • it is not a data processing library.
  • it doesn’t have pre-built visualizations

D3.js is a tools that make the connection between data and graphics easy. It sits right between the two, the perfect place for a library meant for data visualization.

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’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. ~ d3js.org

Show me some code…

Simple bar chart

bar chart

Well… that’s only html and does look very nice and professional. We need more power.

Upcoming: How to use svg with d3.js to create more beautiful and appealing visualizations.