Last week, I’ve found a data from Taiwan’s government open data. It’s about the unemployment rates in Taiwan. So I decided to build some charts to visualize the data easily. Here are some charts I’ve built.

This is the unemployment rates for the past few years in Taiwan. So I’m going to walk through the code, wish you enjoy! The code is all avaliable on my gist.

The data is like below, one is unemployment rates order by year and date (line charts), another is unemployment rates order by year (bar charts). There have the date, total unemployment rates, man’s unemployment rates, female’s unemployment rates…

unemploy_year.json (year):

1[
2{"資料時期":"1978","總計":1.67,"":1.57,"":1.86,"age_15-19":3.95,"age_20-24":3.77,"age_25-29":1.54,"age_30-34":0.64,"age_35-39":0.38,"age_40-44":0.43,"age_45-49":0.43,"age_50-54":0.82,"age_55-59":0.76,"age_60-64":0.43,"age_65_over":0.17,"國中及以下":1.03,"國小及以下":0.64,"國中":2.28,"高中_職":3.69,"高中":3.72,"高職":3.67,"大專及以上":3.15,"專科":3.75,"大學及以上":2.54}
3,...
4]

unemploy.json (year and month):

1
2[
3{"資料時期":"1978M01","總計":2.01,"":1.82,"":2.39,"age_15-19":5.01,"age_20-24":4.55,"age_25-29":1.77,"age_30-34":0.18,"age_35-39":0.54,"age_40-44":0.49,"age_45-49":0.58,"age_50-54":1.22,"age_55-59":0.98,"age_60-64":0.97,"age_65_over":0.73,"國中及以下":1.41,"國小及以下":0.92,"國中":3.12,"高中_職":4.11,"高中":4.32,"高職":3.98,"大專及以上":3.28,"專科":4.54,"大學及以上":2.06}
4,...
5]

Because we have two different date format, so we will need to define two different date parser for parsing.

1
2var parseDate = d3.time.format("%YM%m").parse; // year + "M" + month
3var parseYear = d3.time.format("%Y").parse; // year
4

Initialize two scale for x and y. x is a time scale and I’ve set the range from 0 to width. y is the scale of linear range form height to 0. How scale works? After you defined your scale, you can call the scale for the correspondence value of in the scale.

1var x = d3.time.scale()
2    .range([0, width]);
3 
4var y = d3.scale.linear()
5    .range([height, 0]);

After defined the scale, you can create Axis for define ticks in the chart.

1var xAxis = d3.svg.axis()
2    .scale(x)
3    .orient("bottom");
4
5var yAxis = d3.svg.axis()
6    .scale(y)
7    .orient("left");

Now we are going to create our line in the chart! Using d3.svg.line() to create a line chart. For setting the x, y axis use .x() and .y() functions. In x axis return d.date, in y axis return d.total, we haven’t insert the data, I will talk about how d.date and d.total means.

1var line = d3.svg.line()
2    .x(function(d) { return x(d.date); })
3    .y(function(d) { return y(d.total); });

Append a whole new svg for the chart!

1var svg = d3.select("body").append("svg")
2    .attr("width", width + margin.left + margin.right)
3    .attr("height", height + margin.top + margin.bottom)
4  .append("g")
5    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

OK! We are all set, let’s load the data! We are going to make the line chart first! LOADING DATA!

d3.json("unemploy.json", function(error, data) {
	...
	... // data will be the unemply.json data.
}

Foreach data we are going to parse to the right form for our usage.

1data.forEach(function(d) {
2    d.date = parseDate(d["資料時期"]);   // parse the date 
3    d.total = +d["總計"]; // convert total to integer
4  });

d3.extent is a function to find the minimum and maximum of an array and return it as [minimun, maximun]. And x.domain() is to set the domain in x axis, so as y axis.

1x.domain(d3.extent(data, function(d) { return d.date; }));
2y.domain(d3.extent(data, function(d) { return d.total; }));

Make x axis, y axis, lines

 1svg.append("g")
 2      .attr("class", "x axis")
 3      .attr("transform", "translate(0," + height + ")")
 4      .call(xAxis);
 5
 6  svg.append("g")
 7      .attr("class", "y axis")
 8      .call(yAxis)
 9    .append("text")
10      .attr("transform", "rotate(-90)")
11      .attr("y", 6)
12      .attr("dy", ".71em")
13      .style("text-anchor", "end")
14      .text("失業率");
15
16  svg.append("path")
17      .datum(data)
18      .attr("class", "line")
19      .attr("d", line);

After all the things above, we will get the line chart. Now we are going to build the bar chart.

 1// bar chart for unemploy year
 2// loading the unemployment in years
 3  d3.json("unemploy_year.json", function(err, data_year) {
 4    // formating data
 5    data_year.forEach(function(d) {
 6      d.date = parseYear(d["資料時期"]);
 7      d.total = +d["總計"];
 8    })
 9    // appending bars
10    svg.selectAll(".bar")
11      .data(data_year)
12    .enter().append("rect")
13      .attr("class", "bar")
14      .attr("x", function(d) { return x(d.date); })
15      .attr("width", "10px")
16      .attr("y", function(d) { return y(d.total); })
17      .attr("height", function(d) { return height - y(d.total); });
18    
19  })

And you can get the beautiful chart! Wish you enjoy! :)