JSFiddle - React, Tailwind, and code Playground

by friek2k

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>

<div id="figure" style="margin-bottom: 50px;"></div>

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JavaScript

var margin = {
    top: 50,
    right: 20,
    bottom: 10,
    left: 65
},
width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .3);

var x = d3.scale.linear()
    .rangeRound([0, width]);

var color = d3.scale.ordinal()
    .range(["#c7001e", "#f6a580", "#cccccc", "#92c6db", "#086fad"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top");

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

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

color.domain(["Strongly disagree", "Disagree", "Neither agree nor disagree", "Agree", "Strongly agree"]);

var data


d3.csv("https://test1-mawis.app.moba.de/errordata.json", function (error, data) {

    data.forEach(function (d) {
        // calc percentages
        d["Strongly disagree"] = +d[1] * 100 / d.N;
        d["Disagree"] = +d[2] * 100 / d.N;
        d["Neither agree nor disagree"] = +d[3] * 100 / d.N;
        d["Agree"] = +d[4] * 100 / d.N;
        d["Strongly agree"] = +d[5] * 100 / d.N;
        var x0 = -1 * (d["Neither agree nor disagree"] / 2 + d["Disagree"] + d["Strongly disagree"]);
        var idx = 0;
        d.boxes = color.domain().map(function (name) {
            return {
                name: name,
                x0: x0,
                x1: x0 += +d[name],
                N: +d.N,
                n: +d[idx += 1]
            };
        });
    });

    var min_val = d3.min(data, function (d) {
        return d.boxes["0"].x0;
    });

    var max_val = d3.max(data, function (d) {
        return d.boxes["4"].x1;
    });

    x.domain([min_val, max_val]).nice();
    y.domain(data.map(function (d) {
        return d.Question;
    }));

    svg.append("g")
       ...