ignorabilis
10/17/2017 - 8:25 AM

Explore D3 - working with simple data

Explore D3 - working with simple data

script.js
content_copyfile_download
// to view and play just use jsbin - copy the url and replace 'github' with 'jsbin' to instantly view the code in action
// change width and height so that each chart adjusts automatically
// change dataset so that new values are automatically added
var w = 200;
var h = 100;
var padding = 2;
var simple_dataset = [5, 10, 15, 20, 25, 45];
var bar_chart = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
var step_chart = d3.select("body")
                    .append("div")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

var range_dataset = [{h: 5, r: 4}, {h: 10, r: 2}, {h: 15, r: 10}, 
                     {h: 20, r: 2}, {h: 25, r: 15}, {h: 45, r: 8}];
var range_chart = d3.select("body")
                    .append("div")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

function bar_factor (d) {
  return d * 1.5;
}

// simple bar chart
bar_chart.selectAll("rect")
    .data(simple_dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i){ return i * (w / simple_dataset.length); })
    .attr("y", function (d, i) { return h - bar_factor(d); })
    .attr("width", function (d, i){ return (w / simple_dataset.length) - padding; })
    .attr("height", function (d, i){ return bar_factor(d); });

// resembles a step chart
step_chart.selectAll("rect")
    .data(simple_dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i){ return i * (w / simple_dataset.length); })
    .attr("y", function (d, i) { return h - d; })
    .attr("width", function (d, i){ return (w / simple_dataset.length); })
    .attr("height", function (d, i){ return 2; });

// a "real" range chart
range_chart.selectAll("rect")
    .data(range_dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i){ return i * (w / range_dataset.length); })
    .attr("y", function (d, i) { return h - d.h; })
    .attr("width", function (d, i){ return (w / range_dataset.length) - padding * 2; })
    .attr("height", function (d, i){ return d.r; });
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

</body>
</html>