d303

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js