Skip to content

Instantly share code, notes, and snippets.

@tlfrd

tlfrd/.block

Last active January 1, 2020 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tlfrd/3f8b27c7d54803f2608841ad673deb5f to your computer and use it in GitHub Desktop.
Save tlfrd/3f8b27c7d54803f2608841ad673deb5f to your computer and use it in GitHub Desktop.
Download ZIP
Simple Bar Chart
Raw
.block
license: mit
Raw
README.md

A simple bar chart for Felix, built with love

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
text {
font-size: 14px;
}
.title {
font-family: sans-serif;
font-size: 16px;
}
rect {
fill: grey;
stroke: black;
}
line {
stroke: black;
opacity: 1;
}
</style>
</head>
<body>
<script>
var margin = {top: 75, right: 150, bottom: 75, left: 200};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("staffsurvey-belowavg.csv", (error, data) => {
if (error) throw error;
data = data.sort((a, b) => {
if (a["Below Average"] < b["Below Average"]) return 1;
if (a["Below Average"] > b["Below Average"]) return -1;
if (a["Below Average"] == b["Below Average"]) return 0;
});
var title = svg.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", -margin.top / 4)
.text("Number of Questions With Answers Below Imperial Avg Per Department")
var xScale = d3.scaleLinear()
.range([0, width])
.domain([0, d3.max(data, d => d["Below Average"])]);
var yScale = d3.scaleBand()
.range([0, height])
.domain(data.map(d => d.Department))
var yAxis = d3.axisLeft(yScale)
.tickSize(0);
var yAxisGroup = svg.append("g")
.attr("class", "y-axis")
.call(yAxis)
.selectAll("text")
.attr("x", -10);
var xAxis = d3.axisBottom(xScale.nice())
.ticks(10)
.tickSize(0);
var xAxisGroup = svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(" + [0, height] + ")")
.call(xAxis)
xAxisGroup.select(".domain")
.attr("opacity", 0);
xAxisGroup.selectAll("text")
.attr("y", 10)
var xGridLines = svg.append("g")
.attr("class", "x-grid-lines")
.selectAll("line")
.data(xScale.nice().ticks(10)).enter()
.append("line")
.attr("y1", 0)
.attr("y2", height)
.attr("x2", d => xScale(d))
.attr("x1", d => xScale(d));
var bars = svg.selectAll("rect")
.data(data).enter()
.append("rect")
.attr("y", d => yScale(d.Department))
.attr("width", d => xScale(d["Below Average"]))
.attr("height", yScale.bandwidth());
});
function drawBarChart() {
}
</script>
</body>
Raw
staffsurvey-belowavg.csv
Department Below Average
CEP 34
Chem 27
Life Science 46
Maths 27
Physics 32
Grantham 1
Medicine 51
Aero 53
Bioeng 18
Chem Eng 22
Civil 22
Computing 50
Earth Science 12
EEE 30
Materials 27
Dyson 20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment