JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<div id="chart"></div>

<div id="chart2"></div>

<div id="chart3"></div>

CSS

.bar rect { fill: blue;}
.focus-label, .focus {fill: orange;}
.domain {stroke: #999; fill: none; }
.axis-label {fill: #666;}
.tick line {stroke: #999;}

JavaScript

var data = [61.5, 65.2, 72.3, 75.1, 85.0, 86.2, 61.0, 64.3, 72.1, 75.8, 79.9, 84.8, 63.1, 65.0, 77.0, 74.0, 88.0, 87.0, 60.4, 65.9, 79.5, 70.1, 80.4, 85.9, 90.0];

d3  .select('#chart')
    .datum(data)
    .call(histogramChart()
        .width(700)
        .height(250)
        .lowerBand(60)
        .upperBand(90)
        .bins(9)
        .yAxisLabel("# of Orgs")
        .xAxisLabel("# of FooBars")  
);

d3  .select('#chart2')
    .datum(data)
    .call(histogramChart()
        .width(700)
        .height(250)
        .lowerBand(55)
        .upperBand(100)
        .bins(9)
        .yAxisLabel("# of Orgs")
        .xAxisLabel("# of FooBars")  
);

d3  .select('#chart3')
    .datum(data)
    .call(histogramChart()
        .width(700)
        .height(250)
        .lowerBand(60)
        .upperBand(95)
        .bins(7)
        .yAxisLabel("# of Orgs")
        .xAxisLabel("# of FooBars")  
);

function histogramChart(){
    var margin = {
        top: 64,
        right: 32,
        bottom: 72,
        left: 32,
        labels: 32
    };
    //defaults
    var height = 200;
    var width = 500;
    var lowerBand = 0;
    var upperBand = 100;
    var bins = 5;
    var chartTitle = ["test"];
    var yAxisLabel = "y axis label";
    var xAxisLabel = "x axis label";
    var xformat = function(d){return d};
    var formatCount = d3.format(",.0f");

    function chart(selection) {
        var maxBarHeight = height - (margin.top + margin.bottom);
        var chartWidth = width - margin.right - margin.left;
        
        var tempScale = d3.scale.linear().domain([0, bins]).range([lowerBand, upperBand]);
        var tickArray = d3.range(bins + 1).map(tempScale);            
        xformat = formatCount;
        selection.selectAll('svg').remove();//remove old charts
        
        selection.each(function(values) {
            
            var x = d3.scale.linear()
                .domain([lowerBand, upperBand])
                .range([margin.labels, chartWidth]);
         ...