JSFiddle - React, Tailwind, and code Playground

by philgyford

HTML

<body>
    <div id="chart-references"></div>
</body>

CSS

#chart-references {
    width: 100%;
}
.bar {
	fill: #333;
}
.rule {
    stroke: #900;
    stroke-width: 1px;
}

JavaScript

var data = [
    {'name': 'Jan 1660', 'percent_refs': 3, 'num_refs': 1},
    {'name': 'Feb 1660', 'percent_refs': 71, 'num_refs': 20},
    {'name': 'Mar 1660', 'percent_refs': 87, 'num_refs': 26},
    {'name': 'Apr 1660', 'percent_refs': 77, 'num_refs': 24},
    {'name': 'May 1660', 'percent_refs': 84, 'num_refs': 26}
];

var width = 400;
var height = 200;

var svg = d3.select('#chart-references').append('svg')
        .attr('class', 'chart')
        .attr('width', width)
        .attr('height', height);

// The scales.
var x = d3.scale.ordinal()
        .domain(d3.range(data.length))
        .rangeRoundBands([0, width], 0);

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

// Add the horizontal lines in the background.
svg.selectAll('.rule')
         // HERE: Why does `4` ticks show `5` lines?
        .data(y.ticks(4))
    .enter().append('line')
        .attr('class', 'rule')
        .attr('x1', 0)
        .attr('x2', width)
        .attr('y1', y)
        .attr('y2', y);

// Draw the actual bars themselves.
svg.selectAll('.bar')
        .data(data)
    .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', function(d,i){ return x(d.name); })
        .attr('y', function(d){ return y(d.percent_refs); })
        .attr('width', x.rangeBand())
        .attr('height', function(d,i){return height - y(d.percent_refs); });

// And HERE, why is this y-axis horizontal?
var yAxis = d3.svg.axis()
        .scale(y)
        .tickValues([25, 50, 75, 100]);

svg.append('g')
    .attr('class', 'axis')
    .call(yAxis);