Old school D3 from simpler times

All examples By author By category About

ValIlya

Full window Github gist

JS Bin // source http://jsbin.com/qemeyoq

forked from ValIlya's block: JS Bin

// source http://jsbin.com/qemeyoq

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
var margin = {
  top: 20,
  right: 20,
  bottom: 40,
  left: 30
}
var fullWidth = 500
var fullHeight = 500
var width = fullWidth - margin.left - margin.right
var height = fullHeight - margin.top - margin.bottom

var data = [{
      "cost": 77916.131234700006, 
      "last_tick": 0, 
      "process": 0, 
      "sol": [
        [ 1, 0, 0, 0 ], [ 1, 1, 0, 1 ], [ 1, 0, 0, 0 ], [ 0, 0, 0, 1 ], [ 1, 0, 0, 0 ], [ 0, 0, 0, 1 ], [ 1, 0, 0, 0 ], [ 1, 0, 0, 1 ], [ 1, 0, 1, 1 ], [ 1, 1, 0, 0 ], [ 1, 0, 0, 0 ], [ 1, 0, 0, 1 ], [ 0, 0, 0, 1 ], [ 0, 0, 0, 0 ], [ 1, 0, 0, 1 ], [ 0, 1, 0, 0 ], [ 0, 1, 0, 0 ], [ 1, 0, 1, 0 ], [ 0, 0, 0, 0 ], [ 0, 1, 1, 1 ], [ 0, 1, 0, 0 ]
      ], 
      "tick": 0
    }]

var nempl = data[0].sol[0].length
var nslots = data[0].sol.length

var xExtent = [0, nempl]
var yExtent = [0, nslots]

var xScale = d3.scaleLinear()
  .domain(xExtent)
  .range([0, width])

console.log(xScale(4))

var yScale = d3.scaleLinear()
  .domain(yExtent)
  .range([0, height])

var color = d3.scaleLinear()
  .domain([0, 1])
  .range(['white', 'green'])

var svg = d3.select('body')
  .append('svg')
  .attr('width', fullWidth)
  .attr('height', fullHeight)
  .append('g')
  .attr('transform',
        'translate(' +
        margin.left + ',' +
        margin.top +
        ')')

var axisX = d3.axisTop(xScale)
    .ticks(nempl)

svg
  .append('g')
  .call(axisX)

var axisY = d3.axisLeft(yScale)
  .ticks(nslots)

svg
  .append('g')
  .call(axisY)

var row_groups = svg
  .append('g')
  .selectAll('g')
  .data(data[0].sol)
  .enter()
  .append('g')

var rect_width = xScale(1) - xScale(0)
var rect_height = yScale(1) - yScale(0)

var rects = row_groups
  .selectAll('g')
  .data(function (d, parentIndex) {
    return d.map(function(data, index){
      return {
        parentIndex: parentIndex,
        index: index,
        data: data
      }
    })
  })
  .enter()
  .append('rect')
    .attr('x', function(d, i) {return xScale(d.index);})
    .attr('y', function(d, i) {return yScale(d.parentIndex);})
    .attr('width', rect_width)
    .attr('height', rect_height)
    .attr('stroke', 'black')
    .attr('fill', function(d, i) {return color(d.data);})
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"><\/script>
  
  <title>JS Bin</title>
</head>
<body>

</body>
</script>

<script id="jsbin-source-javascript" type="text/javascript">var margin = {
  top: 20,
  right: 20,
  bottom: 40,
  left: 30
}
var fullWidth = 500
var fullHeight = 500
var width = fullWidth - margin.left - margin.right
var height = fullHeight - margin.top - margin.bottom

var data = [{
      "cost": 77916.131234700006, 
      "last_tick": 0, 
      "process": 0, 
      "sol": [
        [ 1, 0, 0, 0 ], [ 1, 1, 0, 1 ], [ 1, 0, 0, 0 ], [ 0, 0, 0, 1 ], [ 1, 0, 0, 0 ], [ 0, 0, 0, 1 ], [ 1, 0, 0, 0 ], [ 1, 0, 0, 1 ], [ 1, 0, 1, 1 ], [ 1, 1, 0, 0 ], [ 1, 0, 0, 0 ], [ 1, 0, 0, 1 ], [ 0, 0, 0, 1 ], [ 0, 0, 0, 0 ], [ 1, 0, 0, 1 ], [ 0, 1, 0, 0 ], [ 0, 1, 0, 0 ], [ 1, 0, 1, 0 ], [ 0, 0, 0, 0 ], [ 0, 1, 1, 1 ], [ 0, 1, 0, 0 ]
      ], 
      "tick": 0
    }]

var nempl = data[0].sol[0].length
var nslots = data[0].sol.length

var xExtent = [0, nempl]
var yExtent = [0, nslots]

var xScale = d3.scaleLinear()
  .domain(xExtent)
  .range([0, width])

console.log(xScale(4))

var yScale = d3.scaleLinear()
  .domain(yExtent)
  .range([0, height])

var color = d3.scaleLinear()
  .domain([0, 1])
  .range(['white', 'green'])

var svg = d3.select('body')
  .append('svg')
  .attr('width', fullWidth)
  .attr('height', fullHeight)
  .append('g')
  .attr('transform',
        'translate(' +
        margin.left + ',' +
        margin.top +
        ')')

var axisX = d3.axisTop(xScale)
    .ticks(nempl)

svg
  .append('g')
  .call(axisX)

var axisY = d3.axisLeft(yScale)
  .ticks(nslots)

svg
  .append('g')
  .call(axisY)

var row_groups = svg
  .append('g')
  .selectAll('g')
  .data(data[0].sol)
  .enter()
  .append('g')

var rect_width = xScale(1) - xScale(0)
var rect_height = yScale(1) - yScale(0)

var rects = row_groups
  .selectAll('g')
  .data(function (d, parentIndex) {
    return d.map(function(data, index){
      return {
        parentIndex: parentIndex,
        index: index,
        data: data
      }
    })
  })
  .enter()
  .append('rect')
    .attr('x', function(d, i) {return xScale(d.index);})
    .attr('y', function(d, i) {return yScale(d.parentIndex);})
    .attr('width', rect_width)
    .attr('height', rect_height)
    .attr('stroke', 'black')
    .attr('fill', function(d, i) {return color(d.data);})

</script></body>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js