JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

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

CSS

svg {
    border: 1px solid black;
}

.cell {

}

JavaScript

// Select the DIV container "D3grid_D3way", then
// add an SVG element to it

var colors = ['#c0dac1', '#ffe0ff', '#eaf0b6', '#e0ffe0', '#ffffe0', '#e0e0ff', '#fff2e0'],
    data = [],
    rows = Math.round(Math.random() * 5) + 3,
    cols = Math.round(Math.random() * (colors.length - 3)) + 3;

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        data.push({ col: j, row: i, label: 'Foobar', color: colors[j], alerting: Math.round(Math.random()) == 1 });
    }
}

console.log(data);
    
var width = 50;
var height = 50;
 
var gridGraph = d3.select("#D3grid_D3way")
    .append("svg:svg")
    .attr("width", width)     // Set width of the SVG canvas
    .attr("height", height);   // Set height of the SVG canvas

gridGraph.selectAll('rect.cell')
    .data(data)
    .enter().append('svg:rect')
    .attr('class', 'cell')
    .attr('width', function(d) { return width / cols; })
    .attr('height', function(d) { return height / rows; })
    .attr('x', function(d) { return d.col * (width / cols); })
    .attr('y', function(d) { return d.row * (height / rows); })
    .style('fill', function(d) { return d.alerting ? 'red' : d.color; });
/*
// the yaxiscoorddata gives the y coordinates
// for horizontal lines ("x1" = 25 and, "x2"=width-25)
var yaxiscoorddata = d3.range(25, height, 25);
 
// the xaxiscoorddata gives the x coordinates
// for vertical lines ("y1" = 25 and, "y2"=height-25)
var xaxiscoorddata = d3.range(25, width, 25);
 
 
// Using the xaxiscoorddata to generate vertical lines.
gridGraph.selectAll("line.vertical")
.data(xaxiscoorddata)
.enter().append("svg:line")
.attr("x1", function(d){return d;})
.attr("y1", 25)
.attr("x2", function(d){return d;})
.attr("y2", height-25)
.style("stroke", "rgb(6,120,155)")
.style("stroke-width", 2);       
 
 
// Using the yaxiscoorddata to generate horizontal lines.       
gridGraph.selectAll("line.horizontal")
.data(yaxiscoorddata)
.enter().append("svg:line")
.attr("x1", 25)
.attr("y1", function(d){return...