D3.JS Widget Development Update

I’ve been working on a number of d3.js visualization widgets for my research, and wanted to share some of the results.

D3.JS Histogram spatial querying widget

A histogram visualization that is integrated with the Nunaliit atlas framework, and is used as a spatial querying method based on feature attribute data.

d3.js pie chart

This simple pie chart is used to visualize the dataset contained in the atlas.


D3.js Work

d3 examplesI’ve finished Scott Murray’s excellent d3 book and have included samples of my work above (a bar graph that incorporates various transition effects, and choropleth map illustrating internet use in 2013). Hopefully these two examples can highlight the power of d3 in visualizing data, and will be the beginning of many more d3 posts from me in the future.

Beginning With D3

Lately I’ve been studying Data-Driven Documents (d3). It’s a JavaScript library built around the use and visualization of datasets through the web. I’ve been reading Scott Murray’s introduction book on the topic called ‘Interactive Data Visualization for the Web’, and would recommend it to anyone who is looking for a basic overview of d3.

Simple charts produced using the d3.js library

Simple charts produced using the d3.js library

The above screenshot shows two charts, which I’ve created using the d3 library. All data was provided by the World Bank, and then massaged into a .csv file format, that was imported with the d3 library. Although the charts are simple, it does provide a clear example of how effective the library can be in visualizing datasets. I’m now studying more interactive examples of d3 with an increased focus on using spatial datasets. I look forward to sharing more examples in the future.

If you’re wondering what d3 can do for you, check out the homepage at www.d3js.org, and if you’re interested in reading Scott Murray’s book, he has generously provided a free online version through his website.