Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A visualisation makeover

"Makeover" Assignment for Udacity's "Data visualisation and D3.js"

Decided to makeover:

After some experimentation, dropped pie chart and went for a bar then:

  • One colour (all items express currency)
  • Order by spending volume
  • Added spending to bars and removed grids
  • In order of not losing information from original chart which had a total, added total spend on header (not visible in image).

Reason to choose bar chart: categorical data.

Method: Copied from and course's "basic_chart.html" continued by mixing the two and editing.

<!DOCTYPE html>
<meta charset="utf-8">
<link href='' rel='stylesheet' type='text/css'>
<script src=""></script>
<script src=""></script>
<style type="text/css">
h2 {
text-align: center;
<script type="text/javascript">
function draw(data) {
"use strict";
var margin = 75,
width = 1200 - margin,
height = 500 - margin; //builtin range of colors
var keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg('#chartContainer', width, height);
var myChart = new dimple.chart(svg, data);
myChart.defaultColors = [
new dimple.color("#95a5a6", "#95a5a6", 1), // concrete
new dimple.color("red", "red", 2), // concrete
var x = myChart.addCategoryAxis("x", xcord);
//var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y");
// x.addOrderRule(xcord);
// x.showGridlines = true;
//x.timePeriod = d3.time.months;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = false;
y.tickFormat = ',.1f';
var s = myChart.addSeries(null,;
s.addOrderRule("spending", true);
s.shapes.each(function(d) {
// Get the shape as a d3 selection
var shape =;
// Add a text label for the value
// Position in the centre of the shape (vertical position is
// manually set due to cross-browser problems with baseline)
.attr("x", parseFloat(shape.attr("x")) + parseFloat(shape.attr("width"))/2)
.attr("y", y._scale(d.height) + 35)
.attr("dy", "-1em")
// Centre align
.style("text-anchor", "middle")
.style("font-size", "1em")
.style("font-family", "'Roboto', sans-serif")
.style("color", "#000")
// Make it a little transparent to tone down the black
.style("opacity", 0.7)
// Format the number
.text(d3.format("$,.2s")(d.yValue).replace('G', ' Bn'));
<script type="text/javascript">
Use D3 (not dimple.js) to load the TSV file
and pass the contents of it to the draw function
d3.tsv("val_spending.tsv", draw);
<h2>US net average valentine day spending (total: $17.55 Bn)</h2>
<div id="chartContainer"></div>
Source: <a href=""></a>
purchase spending
candy 1760000000
flowers 1680000000
jewelry 4450000000
greeting cards 1150000000
an evening out 4500000000
clothing 2020000000
gift cards / certificates 1680000000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment