Built with blockbuilder.org
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: Making a bar chart with SVG</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 208;
var barPad = 1;
var hs = 15;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//ATTEMPT TO ADD INFO/Profile Background
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", h)
.attr("width", w)
.attr("fill", "wheat");
//ADD in Heatstrip
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i)
{return i * (w / dataset.length);})
.attr("y", h-hs-(4*barPad))
.attr("width", w / dataset.length - barPad)
.attr("height", hs)
.attr("fill", function(d){return "rgb(0,"+(d*10)+",0)";});
//ADD SECOND STRIP
svg.append("rect")
.attr("x", function(d, i)
{return i * (w / dataset.length);})
.attr("y", h-(3*hs)-(6*barPad))
.attr("width", w-(barPad))
.attr("height", 2*hs)
.attr("fill", "lightgrey");
//ADDING TEXT
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i)
{return (i+1.5) * (w / dataset.length);})
.attr("y", h-(6*barPad))
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
</script>
</body>
</html>
https://d3js.org/d3.v3.min.js