First d3.js Visualization: Step by Step-Road Accidents in cities by years 2010

Before you start?

You need to know what chart you need to draw.

What is D3?

D3.js is a Javascript Library developed by Mike Bostock. It’s a great tool for visualizing data.

D3 -> data, driven and documents.

Why would somebody would like to visualize data would need to learn these technologies?

Knowledge on HTML, CSS, JavaScript, JSON, PHP and Apache helps to build data visualization using d3.js You can develop your own visualization with a very fundamental knowledge on the same. You can go to w3school.com to get a good grip of these fundamentals.

Any d3 visualization would need the following 3 components:

What to present? How to present? Where to Present?

What to Present : Data: (Either through Json or passing data to Javascript)

How to Present: Structure: Using HTML & CSS

Where to Present: Layout: Specify how its to be generated using Javascript & D3.

Use case:

Now let’s try to depict the No. of people killed in accidents in important cities of the State TamilNadu in India by the year 2010.

Chennai City

607

ChennaiSuburban

788

Coimbatore

274

Madurai

117

Salem

140

Tirunelveli

89

Trichy City

158

Villupuram

858

Source: http://www.tn.gov.in/deptst/RoadAndTransport.pdf

Refer to the code available in : http://jsfiddle.net/seesiva/qjrZf/3/

We will see how to render the chart in my next post. Request your feedback. Thanks.

Advertisements