JulienAssouline/Opioid_age.csv

## index.html
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Learning D3 </title>
<link rel="stylsheet" href="main.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style type = "text/css">

body,html{
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 11px;
    text-align: center;
  }

  #chart{
    background-color: #F5F2EB;
    border: 1px solid #CCC;
  }

  .yaxis path{
    fill: none;
    stroke: none;
  }

  .yaxis line{
    fill: none;
    stroke: #dcd9d3;
    stroke-width: 2px;
    shape-rendering: crispEdges;
    opacity: 0.7;
    stroke-dasharray: 3,3;
  }

  .xaxis path,
  .xaxis line{
    fill: none;
    stroke: none;
  }


</style>
<body>
<!-- Place all DOM elements here -->

<script>

 var w = 730;
 var h = 400;

      var margin = {
          top: 40,
          bottom: 40,
          left: 40,
          right: 40
        }

        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;


        var svg = d3.select("body")
        .append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var xScale = d3.scaleBand()
          .range([width, 0])

        var yScale = d3.scaleLinear()
          .range([height, 0])

        var xAxis = d3.axisBottom()
          .scale(xScale)


  d3.csv("Opioid_age.csv", function(error, data){
    data.forEach(function(d){
      d["Age group (years)"] =  d["Age group (years)"];
      d["2014–2015"] = +d["2014–2015"];
      d["2013–2014"] = +d["2013–2014"];
      d["2012–2013"] = +d["2012–2013"];
      d["2011–2012"] = +d["2011–2012"];
      d["2010–2011"] = +d["2010–2011"];
      d["2009–2010"] = +d["2009–2010"];
      d["2008–2009"] = +d["2008–2009"];
      d["2007–2008"] = +d["2007–2008"];
    });

    yScale.domain([0, d3.max(data, function(d){ return d["2014–2015"] })])
    xScale.domain(data.map(function(d){ return d["Age group (years)"] }))


    svg.selectAll(".rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", function(d){
        return xScale(d["Age group (years)"])
      })
      .attr("y", function(d){
        return yScale(d["2007–2008"])
      })
      .attr("width", 40)
      .attr("height", function(d){
        return height - yScale(d["2007–2008"])
      })
      .style("fill", "purple")
      .transition()
        .delay(1000)
        .duration(500)
          .attr("y", function(d){
            return yScale(d["2014–2015"])
          })
          .attr("height", function(d){
              return height - yScale(d["2014–2015"])
          })

            svg.append("g")
                .attr("class", "xaxis")
                .attr("transform", "translate(" + -45 + "," + height + ")")
                .call(xAxis)


                });


   </script>
  </body>
</html>

## Opioid_age.csv

          
            Age group (years)
            2007–2008
            2008–2009
            2009–2010
            2010–2011
            2011–2012
            2012–2013
            2013–2014
            2014–2015

            
              0
              65+
              16.6
              17.1
              17.6
              18.1
              19.6
              19.4
              19.3
              20.1

            
              1
              45–64
              13.7
              14.4
              15.5
              16.5
              17.2
              18.4
              18.1
              18.3

            
              2
              25–44
              11.1
              10.3
              11.2
              11.1
              13.2
              12.9
              12.4
              13.1

            
              3
              15–24
              6.5
              6.4
              6.7
              7.1
              8.5
              9.6
              9.9
              10.4

            
              4
              <15
              1.4
              1.4
              1.3
              1.4
              1.4
              1.6
              1.7
              1.8
	<!Doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title> Learning D3 </title>
	<link rel="stylsheet" href="main.css">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<style type = "text/css">

	body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 11px;
	text-align: center;
	}

	#chart{
	background-color: #F5F2EB;
	border: 1px solid #CCC;
	}

	.yaxis path{
	fill: none;
	stroke: none;
	}

	.yaxis line{
	fill: none;
	stroke: #dcd9d3;
	stroke-width: 2px;
	shape-rendering: crispEdges;
	opacity: 0.7;
	stroke-dasharray: 3,3;
	}

	.xaxis path,
	.xaxis line{
	fill: none;
	stroke: none;
	}



	</style>
	<body>
	<!-- Place all DOM elements here -->

	<script>

	var w = 730;
	var h = 400;

	var margin = {
	top: 40,
	bottom: 40,
	left: 40,
	right: 40
	}

	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;


	var svg = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("width", w)
	.attr("height", h)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var xScale = d3.scaleBand()
	.range([width, 0])

	var yScale = d3.scaleLinear()
	.range([height, 0])

	var xAxis = d3.axisBottom()
	.scale(xScale)



	d3.csv("Opioid_age.csv", function(error, data){
	data.forEach(function(d){
	d["Age group (years)"] = d["Age group (years)"];
	d["2014–2015"] = +d["2014–2015"];
	d["2013–2014"] = +d["2013–2014"];
	d["2012–2013"] = +d["2012–2013"];
	d["2011–2012"] = +d["2011–2012"];
	d["2010–2011"] = +d["2010–2011"];
	d["2009–2010"] = +d["2009–2010"];
	d["2008–2009"] = +d["2008–2009"];
	d["2007–2008"] = +d["2007–2008"];
	});

	yScale.domain([0, d3.max(data, function(d){ return d["2014–2015"] })])
	xScale.domain(data.map(function(d){ return d["Age group (years)"] }))


	svg.selectAll(".rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", function(d){
	return xScale(d["Age group (years)"])
	})
	.attr("y", function(d){
	return yScale(d["2007–2008"])
	})
	.attr("width", 40)
	.attr("height", function(d){
	return height - yScale(d["2007–2008"])
	})
	.style("fill", "purple")
	.transition()
	.delay(1000)
	.duration(500)
	.attr("y", function(d){
	return yScale(d["2014–2015"])
	})
	.attr("height", function(d){
	return height - yScale(d["2014–2015"])
	})

	svg.append("g")
	.attr("class", "xaxis")
	.attr("transform", "translate(" + -45 + "," + height + ")")
	.call(xAxis)







	});




	</script>
	</body>
	</html>
	Age group (years)	2007–2008	2008–2009	2009–2010	2010–2011	2011–2012	2012–2013	2013–2014	2014–2015
0	65+	16.6	17.1	17.6	18.1	19.6	19.4	19.3	20.1
1	45–64	13.7	14.4	15.5	16.5	17.2	18.4	18.1	18.3
2	25–44	11.1	10.3	11.2	11.1	13.2	12.9	12.4	13.1
3	15–24	6.5	6.4	6.7	7.1	8.5	9.6	9.9	10.4
4	<15	1.4	1.4	1.3	1.4	1.4	1.6	1.7	1.8