JSFiddle - React, Tailwind, and code Playground

by devgru

CSS

path {
    fill: none;
}

text {
    font-size: 11px;
    font-family: monospace;
}

JavaScript

var margin = {top: 0, right: 0, bottom: 0, left: 60}
var width = 900 - margin.left - margin.right
var height = 300 - margin.top - margin.bottom
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 + ")")
    
    var color = d3.scale.linear()
        .domain([0, 400000, 650000])
        .range(['white', 'green', '#020'])
    
    var size = 14

d3.csv('http://d3-js.ru/data/british-museums.csv', function (rows) {
    
    var nested = d3.nest()
        .key(function (d) { return d.Museum })
        .entries(rows)
    nested = nested.slice(1, 4)
    var popup = svg.append('text')
        .attr('dy', size * 20)
    
    var years = d3.time.scale()
        .domain([new Date(2004,0,1), new Date(2014, 0, 1)])
        .range([size * 0.5, size * 10.5])
    var months = d3.time.scale()
        .domain([new Date(2014,0,1), new Date(2014, 11,1)])
        .range([size * 2.5, size * 13.5])
    
    var museums = svg
        .selectAll('g')
        .data(nested)
        .enter()
        .append('g')
        .attr('transform', function (d, i) {
            return 'translate(' + 17 * size * i + ',0)'
        })
    
    museums.append('text')
        .text(function (d) { return d.key })
        .attr('dy', 12)
        .attr('dx', size * 5.5)
        .style('text-anchor', 'middle')
    
    museums
        .append('g')
        .attr('transform','translate(0,' + (size * 14) + ')')
        .call(d3.svg.axis()
             .orient('bottom')
             .scale(years)
             .tickSize(0)
             .tickFormat(d3.time.format('%y'))
             .ticks(6)
             )
    
    museums.append('g')
        .call(d3.svg.axis()
             .orient('left')
             .scale(months)
             .tickSize(2)
             .tickFormat(function (d) {
                 return...