Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active June 28, 2017 14:02
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomshanley/1d58d9d4ab24b5fc3d16901c02229c62 to your computer and use it in GitHub Desktop.
Save tomshanley/1d58d9d4ab24b5fc3d16901c02229c62 to your computer and use it in GitHub Desktop.
Download ZIP
Horizon bar chart
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment