D3 Examples - D3 Practice - Animated Bar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;;top:0;right:0;bottom:0;left:0; }
    svg { background-color: #fff; }
    svg .bar { stroke-width: 1px; stroke: #fff; fill: #00f; }
    svg .bar.tall { fill: #c00; }
  </style>
</head>
​
<body>
<main id="app-content" role="main"></main>
<script>
'use strict';
​
// set vars
var dataset = [100, 250, 175, 200, 360, 320, 210, 85],
    rect_dim = { width: 20, margin: 15 },
    svg_dim = { width: 960, height: 400, pad: 20 },
    margin = { top: 20, btm: 20, left: 15, right: 15 },
    w = svg_dim.width - margin.left - margin.right,
    h = svg_dim.height - margin.top - margin.btm,
    pad = svg_dim.pad,
    extent = d3.extent(dataset),
    xScale = d3.scaleBand()
        .rangeRound([0, w])
        .padding(0.1),
    yScale = d3.scaleLinear()
        .domain([0, extent[1]])
        .range([h, pad]),
    xAxis = d3.axisBottom(xScale),
    yAxis = d3.axisLeft(yScale);
​
// append and setup svg
var svg = d3.select("#app-content")
    .append("svg")
    .attrs({
        class: "chart chart-bar",
        width: svg_dim.width,
        height: svg_dim.height
    });
​
svg.append("g")
    .attr("class", "bars")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attrs({
        x: function(d, i) { return i * rect_dim.width + rect_dim.margin * 2.5; },
        y: h,
        width: rect_dim.width,
        height: 1,
        class: "bar"
    })
    .transition()
    .duration(function(d, i) {
        let time = 500
        return time - i * 0.5;
    })
    .delay(function(d, i) {
        return i * 100;
    })
    .attrs({
        y: function(d) { return yScale(d); },
        height: function(d) { return h - yScale(d); },
        class: function(d) {
            if (d >= 300) { return "bar tall"; }
            else { return "bar"; }
        }
    });
​
svg.append('g')
    .attrs({
        class: "axis axis-y",
        transform: "translate(" + (margin.left+10) + ",0)"
​
    })
    .call(yAxis);
​
svg.append('g')
    .attrs({
        class: "axis axis-x",
        transform: "translate(" + (margin.left+10) + "," + (svg_dim.height - margin.btm-20) + ")"
    })
    .call(xAxis);
</script>
​
</body>
    