JSFiddle - React, Tailwind, and code Playground

by rakesh1201

HTML

<div id="chart" class="container"></div>
<pre id="data">
Date,Open,High,Low,Close,Volume,Adj...

CSS

pre {
    display:none;
}
.container {
    margin: 0 auto;
}
.block {
    /*border: 2px solid;*/
    float: left;
    margin: 0 0px;
}
body {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
}
.day {
    fill: #fff;
    stroke: #ccc;
}
.month {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
}
.RdYlGn .q0-11 {
    fill:rgb(165, 0, 38)
}
.RdYlGn .q1-11 {
    fill:rgb(215, 48, 39)
}
.RdYlGn .q2-11 {
    fill:rgb(244, 109, 67)
}
.RdYlGn .q3-11 {
    fill:rgb(253, 174, 97)
}
.RdYlGn .q4-11 {
    fill:rgb(254, 224, 139)
}
.RdYlGn .q5-11 {
    fill:rgb(255, 255, 191)
}
.RdYlGn .q6-11 {
    fill:rgb(217, 239, 139)
}
.RdYlGn .q7-11 {
    fill:rgb(166, 217, 106)
}
.RdYlGn .q8-11 {
    fill:rgb(102, 189, 99)
}
.RdYlGn .q9-11 {
    fill:rgb(26, 152, 80)
}
.RdYlGn .q10-11 {
    fill:rgb(0, 104, 55)
}

JavaScript

var cellSize = 17, // cell size
    paddingSize = 10,
    height = 960,
    width = cellSize * 7 + (paddingSize * 2);


var day = d3.time.format("%w"),
    week = d3.time.format("%U"),
    percent = d3.format(".1%"),
    format = d3.time.format("%Y-%m-%d");

var color = d3.scale.quantize()
    .domain([-.05,.05])
    .range(d3.range(11).map(function (d) {
    return "q" + d + "-11";
}));

var svg = d3.select("#chart").selectAll("svg")
    .data(d3.range(2008,2010)
    .enter().append("div").attr("class", "block").attr("width", width)
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "RdYlGn")
    .append("g")
    .attr("transform", "translate(" + paddingSize + ",15)");

svg.append("text")
   .attr("transform", "translate(" + width/2 + "," + -5 + ")")
    .style("text-anchor", "middle")
    .text(function(d) { return d; });

var rect = svg.selectAll(".day")
    .data(function (d) {
    return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));
})
    .enter().append("rect")
    .attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("y", function (d) {
    return week(d) * cellSize;
})
    .attr("x", function (d) {
    return day(d) * cellSize;
})
    .datum(format);

rect.append("title")
    .text(function (d) {
    return d;
});

svg.selectAll(".month")
    .data(function (d) {
    return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1));
})
    .enter().append("path")
    .attr("class", "month")
    .attr("d", monthPath);

// Commenting out so I can use 'pre' data in JSFiddle
// as per: http://stackoverflow.com/questions/22890836/loading-external-csv-file-in-jsfiddle
//d3.csv("dji.csv", function(error, csv) {

var csvdata = d3.csv.parse(d3.select("pre#data").text());

var data = d3.nest()
    .key(function (d) {
    return d.Date;
})
    .rollup(function (d) {
    return (d[0].Close - d[0].Open) / d[0].Open;
})
    .map(csvdata);

rect.filter(function (d) {
    return d in...