Skip to content

Instantly share code, notes, and snippets.

@napjon
Last active August 29, 2015 14:13
Show Gist options
  • Save napjon/71f83fedf9ba753a6318 to your computer and use it in GitHub Desktop.
Save napjon/71f83fedf9ba753a6318 to your computer and use it in GitHub Desktop.

Here are the image taken from http://blog.jakpat.net/indonesia-mobile-behavior-report-2014/

This graph show how the average hours used for mobile device in Indonesia.

Why it should be fixed

  • It uses a pie chart. It could give users wrong information. We can't compare each of the category. It's difficult to compare each of the pie size.
  • It uses rainbow colors. We don't know which color are good or bad.What are the meaning of each of the color, hours alone could differentiate it to category. We don't know if yellow bright, yellow, yellow dark is giving some different information.
  • It use almost duplicate colors. for color blind people, they may have some difficulty.

How to fix this

  • Use a bar chart.
  • Use same color, highlight the 5-6 hours if it want to be the focus. As it seems the 5-6 hours is the longest hours.
Average Percentage
5-6 0.1588
1-2 0.1244
3-4 0.1212
7-8 0.1137
11-12 0.1048
9-10 0.1027
22> 0.0622
14-15 0.0608
13-14 0.048
16-17 0.0441
18-19 0.0345
20-21 0.0249
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<style>
rect.dimple-series-0.dimple-bar.dimple-all.dimple-5-6 {
fill : red;
h2 {
text-align: center;
}
</style>
<script type="text/javascript">
function draw(data) {
/*
D3.js setup code
*/
"use strict";
var margin = 75,
width = 1400 - margin,
height = 600 - margin;
d3.select("body")
.append("h2")
.text("Average hours used in mobile device");
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
// debugger;
var x = myChart.addCategoryAxis("x", "Average");
var y = myChart.addMeasureAxis("y", "Percentage");
y.tickFormat = "%.2f";
y.title = "Percent";
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
};
</script>
</head>
<body>
<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("data.txt", draw);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment