Skip to content

Instantly share code, notes, and snippets.

@ofutondaisuki

ofutondaisuki/README.md

Last active October 23, 2015 08:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ofutondaisuki/4eae81fe256c89d5465f to your computer and use it in GitHub Desktop.
Save ofutondaisuki/4eae81fe256c89d5465f to your computer and use it in GitHub Desktop.
Download ZIP
d303
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//わたしのコード
var dataset = [1049,4995,12355,18562,19731,15159,12098,6082,3338,1029,299,23
];　　//万台
var dataset2 = [2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016];
var svgWidth = 600;
var svgHeight = 500;
var barPadding = 5;
//SVG要素を作る
var svg = d3.select("body")
.append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d,i){
return i*(svgWidth/dataset.length);
})
.attr("y",function(d){
return svgHeight - d/50 -40;
})
.attr("width",svgWidth/dataset.length - barPadding)
.attr("height",function(d){
return d/50;
})
.attr("fill",function(d){
return "rgb(0,0,"+Math.floor(d/80)+")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x",function(d,i){
return i*(svgWidth/dataset.length)+(svgWidth/dataset.length - barPadding)/2;
})
.attr("y",function(d){
return svgHeight - (d/50)-5 -40;
})
.attr("font-family","sans-serif")
.attr("font-size","11px")
.attr("fill","orange")
.attr("text-anchor","middle");
svg.selectAll("text.year")
.data(dataset2)
.enter()
.append("text")
.text(function(d){
return d +"年";
})
.attr("x",function(d,i){
return i*(svgWidth/dataset.length)+(svgWidth/dataset.length - barPadding)/2;
})
.attr("y",function(d){
return svgHeight - (d/50) +20 ;
})
.attr("class","year")
.attr("font-family","sans-serif")
.attr("font-size","11px")
.attr("fill","pink")
.attr("text-anchor","middle");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment