Skip to content

Instantly share code, notes, and snippets.

@ngminhtrung

ngminhtrung/.block

Last active January 2, 2018 10:14
Show Gist options
  • Save ngminhtrung/ad3219ef2eed89cf660a99d564440de9 to your computer and use it in GitHub Desktop.
Save ngminhtrung/ad3219ef2eed89cf660a99d564440de9 to your computer and use it in GitHub Desktop.
Download ZIP
Vietnam 2015 - Unemployment Rates of Different Regions
Raw
.block
license: mit
Raw
data.csv
area age1 age2 age3
Đồng bằng sông Hồng 10 1.45 0.77
Đồng bằng sông Cửu Long 20 1.96 1.15
Trung du và vùng núi phía Bắc 30 0.7 0.29
Bắc Trung Bộ và duyên hải miền Trung 40 1.67 0.66
Tây Nguyên 50 0.66 0.47
Đông Nam Bộ 60 1.7 1.67
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Data Visualization - Vietnam regional Unemployment rate</title>
<link rel="stylesheet" href="main.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<script src="plot.js"> </script>
</body>
</html>
Raw
main.css
body,html{
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 0.95em;
text-align: center;
}
#chart{
background-color: #F5F2EB;
border: 1px solid #CCC;
margin-top: 50px;
}
.bar{
fill: purple;
shape-rendering: crispEdges;
}
.bar-label{
fill: #000;
text-anchor: middle;
font-size: 18px;
}
.axis path,
.axis line{
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.gridline path,
.gridline line{
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.y {
font-family: "Arial", sans-serif;
fill: #000;
font-size: 0.9em;
}
.x {
fill: #000;
font-family:"Arial", sans-serif;
font-size: 0.9em;
}
button {
background-color: #FF7F0E;
border-radius: 35px;
border-style: none;
width: 150px;
height: 35px;
}
button:focus {
outline: none;
}
button:hover {
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.75);
transform: scale(0.90, 0.90);
}
Raw
plot.js
//age1 = 15-24, age2 = 25-49, age3 = 50+
var data = [
{ "area": "Red River Delta", "age1": 9.62, "age2": 1.45, "age3":20 },
{ "area": "Northern midlands and moutain areas", "age1": 2.95, "age2": 20, "age3":20},
{ "area": "North Central and Central Coastal area", "age1": 8.26, "age2": 20, "age3":20},
{ "area": "Central Highlands", "age1": 2.47, "age2": 20, "age3":20 },
{ "area": "South East", "age1": 8.02, "age2": 20, "age3":20},
{ "area": "Mekong River Delta", "age1": 8.19, "age2": 20, "age3":20}];
var barWidth = 85;
var w = data.length * barWidth;
var h = 600;
var barHeight = 30;
var margin = {
top: 100,
bottom: 200,
left: 100,
right: 100
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var formatAsPercentage = d3.format(".1%");
var x = d3.scaleBand()
.domain(data.map(function(entry){
return entry.area;
}))
.range([0, width])
.paddingInner(0.1);
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d){
return d.age1;
})])
.range([height, 0]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var ordinalColorScale = d3.scaleOrdinal(d3.schemeCategory10);
var yGridlines = d3.axisLeft(y)
.tickSize(-width,0,0)
.tickFormat("");
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
var chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var controls = d3.select("body")
.append("div")
.attr("id", "controls");
var sort_btn = controls.append("button")
.html("Sort data: ascending")
.attr("state", 0)
function drawAxis(params) {
if (params.intialize === true) {
// draw the gridlines and axes
this.append("g")
.call(params.gridlines)
.classed("gridline", true)
.attr("transform", "translate(0,0)");
// this is x-axis
this.append("g")
.classed("x axis", true)
.attr("transform", "translate(" + 0 + "," + ( height + 2) + ")")
.call(params.axis.x)
.selectAll("text")
.classed("x-axis-label",true)
.style("text-anchor", "start")
.attr("dx", 8)
.attr("dy", 10)
.attr("transform", "rotate(45)")
.style("font-size","12px")
this.append("g")
.classed("y axis", true)
.attr("transform", "translate(-3,0)")
.call(params.axis.y)
//This is the y label
this.select(".y.axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left/2)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Unemployment Rate");
//This is the x label
this.select(".x.axis")
.append("text")
.attr("x", 0)
.attr("y", -h + 700)
.style("text-anchor", "middle")
.attr("transform", "translate(" + width/2 + ",80)")
.text("Regions in Vietnam");
//This is the bar-chart title
this.append("text")
.attr("x", width/2)
.attr("y", -50)
.style("text-anchor", "middle")
.text(("Unemployment Rate in Vietnam - Data of 2015").toLocaleUpperCase());
this.append("text")
.attr("x", width/2)
.attr("y", -30)
.style("text-anchor", "middle")
.text("Source: General Statistics Office Of Vietnam");
} else if (params.intialize === false) {
// update info
this.selectAll("g.x.axis")
.call(params.axis.x);
this.selectAll(".x-axis-label")
.style("text-anchor", "start")
.attr("dx", 8)
.attr("dy", 10)
.attr("transform", "rotate(45)")
this.selectAll("g.y.axis")
.call(params.axis.y)
}
}
function plot(params) {
x.domain(data.map(function(entry){
return entry.area;
}));
y.domain([0, d3.max(data, function(d){
return d.age1;
})]);
drawAxis.call(this, params)
// enter()
this.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.classed("bar", true)
.on("mouseover", function(d,i){
d3.select(this).style("fill", "gray");
})
.on("mousemove", function(d,i){
})
.on("mouseout", function(d,i){
d3.select(this).style("fill", ordinalColorScale(i));
});
this.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true);
// update()
this.selectAll(".bar")
.transition()
.duration(500)
// .ease("bounce")
// .delay(500)
.attr("x", function(d,i) {
return x(d.area) + 1;
})
.attr("y", function(d,i) {
console.log(y(d.age1))
return y(d.age1);
})
.attr("height", function(d) {
console.log(height - y(d.age1))
return height - y(d.age1);
})
.attr("width", function(d){
return x.bandwidth();
})
.style("fill", function(d,i){
return ordinalColorScale(i);
});
this.selectAll(".bar-label")
.transition()
.duration(500)
// .ease("easeBounce")
// .delay(500)
.attr("x", function(d,i) {
return x(d.area) + x.bandwidth() + 10;
})
.attr("dx", -35 )
.attr("y", function(d,i){ return y(d.age1);})
.attr("dy", 18)
.style("font-size","12px")
.style("fill", "white")
.text(function(d){
return (d.age1) + "%";
});
// exit()
this.selectAll(".bar")
.data(params.data)
.exit()
.remove();
this.selectAll(".bar-label")
.data(params.data)
.exit()
.remove();
}
plot.call(chart, {
data: data,
axis: {
x: xAxis,
y: yAxis
},
gridlines: yGridlines,
intialize: true
});
sort_btn.on("click", function(){
var self = d3.select(this);
var ascending = function(a,b) {
return a.age1 - b.age1;
};
var descending = function(a,b) {
return b.age1 - a.age1;
};
var state = + self.attr("state");
var txt = "Sort data: ";
if (state === 0) {
data.sort(ascending);
state = 1;
txt += "descending";
} else if (state === 1) {
state = 0;
data.sort(descending);
txt += "ascending";
}
self.attr("state", state);
self.html(txt);
plot.call(
chart, {
data: data,
axis: {
x: xAxis,
y: yAxis
},
gridlines: yGridlines,
intialize: false
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment