Dimple JavaScript library

During the building of my first Xap, I became a huge fan of Dimple. I think it deserves a full post and spin it off from my previous post: Data Analyst ND 3, data visualization by D3.

dimple.js

Dimple is only one of the JavaScript charting frameworks. I am not sure whether it is the best. I choose it only because I know it from udacity. According to the wiki page of its github, its 1.0 version was released on 2013.9.5, current version is 2.3, released on 2016.12.16.

udacity: basic chart example

Set up a local server because sometimes browser will prevent loading local JavaScript files due to security reasons. Some start codes are provided at basic_charts.zip.

cd Desktop/Udacity/DAND/P6_lesson/basic_charts/
python -m SimpleHTTPServer # python 2.x
python -m http.server  # python 3.x

note: Sometimes use python to host a local server will return error: “Address already in use”, which means the default port: 8000 is occupied by whatever reason. A way to find process is ps -fA | grep python and kill xxxxx But it may not work. Alternatively, use another port between 1024 and 8000, such as python -m SimpleHTTPServer 1024

• open localhost:8000
• add debugger; in the function draw() of html file
• console.table(data) in the browser console to check data

The polished codes are:

function draw(data) {
    "use strict";
    var svg = d3.select("body").append("svg")
        .attr("width", 1400).attr("height", 600); // creat a div of 1400*600
      // var svg = dimple.newSvg("body", 1400, 600); // dimple way
    svg.append("text").attr("x", 700).attr("y", 20).attr("text-anchor", "middle"). style("font-size", "30px").style("font-weight", "bold")
    .text("World Cup Attendance vs. Year"); // add title in specified location

    var myChart = new dimple.chart(svg, data); // create a dimple chart object
    var x = myChart.addTimeAxis("x", "year"); // add column year as x
    var y = myChart.addMeasureAxis("y", "attendance"); // add column attendance as y
    x.dateParseFormat = "%Y";
    x.tickFormat = "%Y";  // change tick format
    x.timeInterval = 4;
    x.fontSize = 20;
    y.fontSize = 20;
    myChart.addSeries(null, dimple.plot.line);    //group, plot type
    myChart.addSeries(null, dimple.plot.scatter);
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();
} // end draw()
// d3.tsv("world_cup.tsv", draw); // parse local file & apply draw() 
var url = "https://raw.githubusercontent.com/jychstar/datasets/master/titanic/world_cup.tsv"
d3.tsv(url, draw); // parse raw file from internet

• traditional Journalism: Data around narrative, physical/static
• data Journalism: Narrative around data, interactive, openweb

official document and examples

d3 documentation

dimple documentation

The official GitHub gives a lot of interesting examples. It’s tons of fun to play with the animation. I just list a few basic syntax below. A quick note: in Udacity course, they set a= null in myChart.addSeries(a,b), which is prone to errors. So always pass something to the first parameter.

dimple.plot.bar

mouse over animation code see advanced_bar_labels

var myChart = new dimple.chart(svg, data),
var x = myChart.addTimeAxis("x", "year");
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
var y = myChart.addPctAxis("y", "Unit Sales");
var y = myChart.addMeasureAxis("y", "Unit Sales"),
var s = myChart.addSeries("Owner", dimple.plot.bar);

myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();

dimple.plot.line

x.addOrderRule("Date");
// Min price will be green, middle price yellow and max red
myChart.addColorAxis("Price", ["green", "yellow", "red"]);
// Add a thick line with markers
var lines = myChart.addSeries("Owner", dimple.plot.line);
lines.lineWeight = 5;
lines.lineMarkers = true;

dimple.plot.bubble

mouse over animation code see advanced_interactive_legends

myChart.addMeasureAxis("x", "Price");
myChart.addMeasureAxis("y", "Sales Value");
myChart.addSeries("Owner", dimple.plot.bubble);

​