JSFiddle - React, Tailwind, and code Playground

by mpetrovich

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

<svg class="chart"></svg>

CSS

.chart rect {
    fill: steelblue;
}
.chart text {
    fill: white;
    font: 10px arial, sans-serif;
}
.chart .value-label {
    text-anchor: end;
}

JavaScript

var chart, bar,
    url = "https://api.nextbigsound.com/metrics/v1/entityData?start=2013-10-01&end=2014-01-01&metrics=11&entities=510&access_token=b64c0cc62e490751773b3b00e6fb36ba"
    chart_width = 400,
    bar_height = 20;

// Utility polyfills
Object.values = function(obj) {
    return Object.keys(obj).map(function(key) {
        return obj[key];
    });
};

chart = d3.select(".chart");
chart.attr("width", chart_width);

$.ajax(url).done(function(response) {
    var data, data_values, scale;
    
    data = response.output.artists["510"]
        .metrics["11"].endpoints["380067_beyonce"]
        .data.global.values.totals;
    
    data_values = Object.values(data);
    
    data = Object.keys(data).map(function(date_key) {
        var date = new Date(date_key * 86400 * 1000);
        return {
            date: date.getTime(),
            date_pretty: date.getMonth() + "/" + date.getDate(),
            value: data[date_key]
        };
    });
    
    console.log(data);
    
    scale = d3.scale.linear()
        .domain([0, d3.max(data_values)])
        .range([0, chart_width]);
    
    chart.attr("height", bar_height * data_values.length);
    
    bar = chart.selectAll("g").data(data)
        .enter()
            .append("g")
            .attr("transform", function(datum, index) {
                return "translate(0," + index * bar_height + ")";
            });
    
    bar.append("rect")
        .attr("width", function(datum) {
            return scale(datum.value);
        })
        .attr("height", bar_height - 1);
    
    bar.append("text")
        .attr("class", "value-label")
        .attr("x", function(datum) {
            return scale(datum.value) - 5;
        })
        .attr("y", bar_height / 2)
        .attr("dy", "0.35em")
        .text(function(datum) {
            return datum.value;
        });
    
    bar.append("text")
        .attr("class", "date-label")
        .attr("x", 10)
        .attr("y", bar_height / 2)
        .attr("dy",...