Simple d3.js bar chart

This is a d3.js bar chart as used as an example in the book D3 Tips and Tricks.

It is derived from the Mike Bostock's Bar Chart example but it is a slightly cut down version.

forked from d3noob's block: Simple d3.js bar chart

<!DOCTYPE html>
<meta charset="utf-8">

.axis {
      font: 10px sans-serif;
    }

.axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.nav {
      display: flex;
      flex-direction: row;
      width: 500px;
    }

.round {
      background: #c0c0c0;
      height: 32px;
      width: 32px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.detail {
      flex-grow: 1;
      display: flex;
      justify-content: center;
    }

#detail {
      border: 1px solid red;
      width: calc(100% - 16px);
    }

</style>
</head>

<body>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
          width = 600 - margin.left - margin.right,
          height = 300 - margin.top - margin.bottom;

// Parse the date / time
      var	parseDate = d3.time.format("%Y-%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10);

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");

d3.csv("bar-data.csv", function(error, data) {

data.forEach(function(d) {
          d.date = parseDate(d.date);
          d.value = +d.value;
        });

x.domain(data.map(function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.value; })]);

svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", "-.55em")
          .attr("transform", "rotate(-90)" );

svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Value ($)");

svg.selectAll("bar")
          .data(data)
          .enter().append("rect")
          .style("fill", "steelblue")
          .attr("x", function(d) { return x(d.date); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); });

});
      
      	const data = [{
          name: 'a', value: 200,
          name: 'b', value: 50,
          name: 'c', value: 25,
        }]
        
        
       const detail = d3.select('#detail');
      
      	const g = detail.selectAll('g').data(data)

</script>

</body>

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