Create a gist now

Instantly share code, notes, and snippets.

@shimizu /.block
Last active Feb 25, 2017

What would you like to do?
D3 v4 - Group barChart
license: mit

D3.js ver.4 を使って作成したグループバーチャート

Built with blockbuilder.org

contry 2000 2001 2002 2008 2009 2010 2011
日本 2704659 4499890 2159981 3853788 10604510 8819342 4114496
アメリカ 2027307 3277946 1420518 2454721 7017731 5656528 2472223
フランス 1208495 2141490 1058031 1999120 5355235 5120254 2607672
イギリス 1140516 1938695 925060 1607297 4782119 4746856 3187797
中国 894368 1558919 725973 1311479 3596343 3239173 1575308
韓国 737462 1345341 679201 1203944 3157759 3414001 1910571
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 - Group barChart</title>
<style>
#graph {
width: 900px;
height: 500px;
}
.tick line {
stroke-dasharray: 2 2 ;
stroke: #ccc;
}
</style>
</head>
<body>
<div id="graph"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script>
!(function(){
"use strict"
var width,height
var chartWidth, chartHeight
var margin
var svg = d3.select("#graph").append("svg")
var axisLayer = svg.append("g").classed("axisLayer", true)
var chartLayer = svg.append("g").classed("chartLayer", true)
var xScale = d3.scaleBand()
var xInScale = d3.scaleBand();
var yScale = d3.scaleLinear()
var color = d3.scaleOrdinal()
.range(["#5DDEC9", "#EF64AD", "#7b6888", "#BA67E5", "#E0E23B", "#d0743c", "#ff8c00"]);
d3.csv("data.csv", cast, main)
function cast(d) {
Object.keys(d).forEach(function(key){
if (!isNaN(+d[key])) d[key] = +d[key]
})
return d
}
function main(data) {
console.log(data)
var nested = d3.nest()
.rollup(function(d){ delete d[0].contry; return d[0] })
.key(function(d){ return d.contry })
.entries(data)
nested.forEach(function(d){
d.age = Object.keys(d.value).map(function(key){
return {key:key, value:d.value[key]}
})
})
setSize(nested)
drawAxis()
drawChart(nested)
}
function setSize(nested) {
width = document.querySelector("#graph").clientWidth
height = document.querySelector("#graph").clientHeight
margin = {top:0, left:100, bottom:40, right:0 }
chartWidth = width - (margin.left+margin.right)
chartHeight = height - (margin.top+margin.bottom)
svg.attr("width", width).attr("height", height)
axisLayer.attr("width", width).attr("height", height)
chartLayer
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("transform", "translate("+[margin.left, margin.top]+")")
xScale.domain(nested.map(function(d) { return d.key }))
.range([0, chartWidth]).paddingInner(0.1)
var ageNames = Object.keys(nested[0].value)
xInScale.domain(ageNames).range([0, xScale.bandwidth()])
var yMax = d3.max(nested.map(function(d){
var values = Object.keys(d.value).map(function(key){
return d.value[key]
})
return d3.max(values)
}))
yScale.domain([0, yMax]).range([chartHeight, 0])
}
function drawChart(nested) {
var t = d3.transition()
.duration(1000)
.ease(d3.easeLinear)
var contry = chartLayer.selectAll(".contry")
.data(nested)
var newCountry = contry.enter().append("g").attr("class", "contry")
contry.merge(newCountry)
.attr("transform", function(d) { return "translate(" + [xScale(d.key), 0] + ")"; });
var bar = newCountry.selectAll(".bar")
.data(function(d){ return d.age })
var newBar = bar.enter().append("rect").attr("class", "bar")
bar.merge(newBar)
.attr("width", xInScale.bandwidth())
.attr("height", 0)
.attr("fill", function(d) { return color(d.key); })
.attr("transform", function(d) { return "translate(" + [xInScale(d.key), chartHeight] + ")" })
//アニメーション
bar.merge(newBar).transition(t)
.attr("height", function(d) { return chartHeight - yScale(d.value); })
.attr("transform", function(d) { return "translate(" + [xInScale(d.key), yScale(d.value)] + ")" })
}
function drawAxis(){
var yAxis = d3.axisLeft(yScale)
.tickSizeInner(-chartWidth)
axisLayer.append("g")
.attr("transform", "translate("+[margin.left, margin.top]+")")
.attr("class", "axis y")
.call(yAxis);
var xAxis = d3.axisBottom(xScale)
axisLayer.append("g")
.attr("class", "axis x")
.attr("transform", "translate("+[margin.left, chartHeight]+")")
.call(xAxis);
}
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment