Built with blockbuilder.org
See version 2 for an example with a legend and updateable bands
license: mit |
Built with blockbuilder.org
See version 2 for an example with a legend and updateable bands
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
font-family: sans-serif; | |
margin: 0; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
rect, | |
line { | |
shape-rendering: crispEdges | |
} | |
</style> | |
</head> | |
<body> | |
<div id="horizon"> | |
<h2>Horizon bar chart</h2> | |
</div> | |
<div id="heat"> | |
<h2>Heat map</h2> | |
</div> | |
<div id="bar"> | |
<h2>Bar chart</h2> | |
</div> | |
<script> | |
const minY = 0; | |
const maxY = 100; | |
const numberOfBands = 4; | |
const bandWidth = (maxY - minY)/(numberOfBands); | |
const height = 80; | |
const width = 800; | |
const margin = { "top": 10, "bottom": 10, "left": 50, "right": 10, }; | |
//used Draw My Data http://www.robertgrantstats.co.uk/drawmydata.html | |
const data = [9.5433, 4.5433, 4.5433, 6.0817, 8.7743, 10.6971, 22.2356, 34.5433, 37.2356, 37.6202, 37.2356, 35.6971, 34.5433, 38.3894, 43.3894, 47.6202, 52.2356, 55.3125, 59.1587, 59.9279, 58.3894, 56.851, 56.0817, 59.5433, 61.851, 64.9279, 67.6202, 69.9279, 69.9279, 68.004, 67.2356, 65.3125, 62.2356, 60.3125, 58.3894, 57.2356, 47.6202, 39.9279, 1.0817, 2.6202, 13.0048, 12.6202, 61.4663, 61.0817, 69.9279, 77.2356, 85.3125, 82.6202, 91.0817, 88.774, 77.6202, 66.0817, 64.5433, 54.5433, 45.3125, 46.4663, 49.9279, 40.6971, 37.6202, 36.0817, 35.3125, 39.5433, 38.774, 57.6202, 50.3125, 16.851, 17.6202, 18.774, 23.774, 58.774, 48.0048, 46.4663, 50.3125]; | |
const barWidth = width / data.length - 1; | |
const xScale = d3.scaleLinear() | |
.domain([0, data.length]) | |
.range([0, width]); | |
var yScaleBar = d3.scaleLinear() | |
.domain([0, maxY]) | |
.range([height, 0]); | |
var colour = d3.scaleLinear() | |
//.domain(d3.extent(data, function (d) { return d })) | |
.domain([0,100]) | |
.range(["yellow", "darkgreen"]); | |
drawHorizon(data); | |
drawHeat(data); | |
drawBarchart(data); | |
function drawHorizon(data) { | |
let yScale = d3.scaleLinear() | |
.domain([0, bandWidth]) | |
.range([height, 0]); | |
let yAxis = d3.axisLeft(yScale); | |
let svg = d3.select("#horizon").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
let g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
let axisG = g.append("g") | |
.call(yAxis) | |
axisG.selectAll("text") | |
.text(function (d) { return "..." + d }); | |
axisG.select(".domain").remove(); | |
let bars = g.selectAll(".bars") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("transform", function (d, i) { | |
return "translate(" + xScale(i) + ",0)"; | |
}) | |
let backgroundBars = bars.append("rect") | |
.attr("width", barWidth) | |
.attr("height", height) | |
.style("fill", function (d) { | |
return d < bandWidth ? "white" : colour(band(d, bandWidth)); | |
}); | |
let foregroundBars = bars.append("rect") | |
.attr("y", function (d) { | |
let thisHeight = barHeight(d, bandWidth); | |
return yScale(thisHeight); | |
}) | |
.attr("width", barWidth) | |
.attr("height", function (d) { | |
let thisHeight = barHeight(d, bandWidth); | |
return height - yScale(thisHeight); | |
}) | |
.style("fill", function (d) { | |
let thisBand = band(d, bandWidth) + bandWidth; | |
console.log(d + " - " + thisBand); | |
return colour(thisBand); | |
}); | |
/*var caps = bars.append("line") | |
.attr("x1", 0) | |
.attr("x2", barWidth) | |
.attr("y1", function(d){ | |
let thisHeight = barHeight(d, bandWidth); | |
return yScale(thisHeight); | |
}) | |
.attr("y2", function(d){ | |
let thisHeight = barHeight(d, bandWidth); | |
return yScale(thisHeight); | |
}) | |
.style("stroke", "white")*/ | |
}; | |
function drawHeat(data) { | |
let svg = d3.select("#heat").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
let g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
let bars = g.selectAll(".bars") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("transform", function (d, i) { | |
return "translate(" + xScale(i) + ",0)"; | |
}) | |
bars.append("rect") | |
.attr("width", barWidth) | |
.attr("height", height) | |
.style("fill", function (d) { | |
return colour(d); | |
}); | |
}; | |
function drawBarchart(data) { | |
let yScale = d3.scaleLinear() | |
.domain([0, maxY]) | |
.range([height, 0]); | |
let yAxis = d3.axisLeft(yScale); | |
let svg = d3.select("#bar").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
let g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
let axisG = g.append("g") | |
.call(yAxis) | |
axisG.select(".domain").remove(); | |
let bars = g.selectAll(".bars") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("transform", function (d, i) { | |
return "translate(" + xScale(i) + ",0)"; | |
}); | |
bars.append("rect") | |
.attr("x", 0) | |
.attr("y", function (d) { | |
return yScale(d); | |
}) | |
.attr("width", barWidth) | |
.attr("height", function (d) { | |
return height - yScale(d); | |
}) | |
.style("fill", colour(50)); | |
}; | |
function band(n, bandWidth) { | |
return Math.floor(n / bandWidth) * bandWidth; | |
}; | |
function barHeight(n, bandWidth) { | |
return n - band(n, bandWidth); | |
}; | |
</script> | |
</body> |