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.

JavaScript Namespace Design Patterns

I recently came across a great article on JavaScript namespace design patterns. As a beginner JavaScript developer, I found many of the approaches discussed in the article both insightful and clarifying as to why certain tactics are adopted in code. If you’re interested in namespace design patterns, you can find the article here.

Quick Tip: Viewing the Javascript’s Global Namespace

When programming in Javascript you can inspect which objects are currently populating the global namespace. A quick way to view this list of objects is to type the word “window” into your browser’s console (see screenshot below for an example). This will return the Window DOM object which will contain a list of all objects which are currently populating the global scope.

Chrome's console window

Screenshot of Chrome’s Console Window


I’m currently working on a web project which uses model-view-controller (MVC), and being new to programming I’m trying to learn more about the topic. During my initial research I came across a great blog post, and thought I’d share it. The post does a good job of breaking down the three components of MVC, and offers an example which helps explain this abstract topic.


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.