Skip to content

Instantly share code, notes, and snippets.

@stianSjoli

stianSjoli/index.html

Last active August 12, 2018 10:25
Show Gist options
  • Save stianSjoli/d3149f054a7439afa5d34caf6945243c to your computer and use it in GitHub Desktop.
Save stianSjoli/d3149f054a7439afa5d34caf6945243c to your computer and use it in GitHub Desktop.
Download ZIP
Bar chart of education in Norway. From "Befolkningens utdanningsnivå", published 8th of June 2018, statistisk sentralbyrå.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" />
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"><\/script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"><\/script>
<title>JS Bin</title>
</head>
<body>
</body>
<script>
var dataset = [
{label:"Grunnskole", count:1120799},
{label:"Videregående", count:1601106},
{label:"Fagskole", count:122765},
{label:"Universitet og Høgskole < 4 år", count:1014637},
{label:"Universitet og Høgskole > 4 år", count:416540}
];
var height = 500;
var width = 800;
var padding = 50;
function getCount(record){
return record.count;
}
function getLabel(record){
return record.label;
}
/*creating yScale and yAxis */
var yScale = d3.scaleLinear()
.domain([d3.min(dataset, getCount) - 100000, d3.max(dataset, getCount) + 150000])
.range([height-padding, padding]);
var yAxis = d3.axisLeft(yScale);
/*creating xScale and xAxis*/
var xScale = d3.scalePoint()
.domain(dataset.map(getLabel))
.range([padding, width-padding])
.padding(0.5)
var xAxis = d3.axisBottom(xScale)
/*create svg*/
var svg = d3.select("body")
.append("svg")
.attrs({
height: height,
width: width
})
/*add y axis*/
svg.append("g")
.attr("transform", "translate(" + padding * 1.5 + ",0)")
.call(yAxis);
/*add y axis text*/
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - height/2)
.attr("y", -0.5)
.attr("dy", "0.8em")
.style("text-anchor","middle")
.style("fill","black")
.style("font-family", "Open Sans")
.style("font-size","15px")
.text("Folketelling (16 år eller eldre)");
/*add x axis*/
svg.append("g")
.attr("transform", "translate(" + padding/2 + "," + (height - padding) + ")")
.call(xAxis)
/*add bars*/
var g = svg.selectAll("rect")
.data(dataset)
.enter()
.append("g");
g.append("rect")
.attrs({
width:70,
height:function(d){
return (height - padding) - yScale(d.count);
},
x:function(d){
return padding/2 + (xScale(d.label) - 35);
},
y:function(d){
return yScale(d.count);
},
fill:"steelblue"
});
/*add bar label text*/
g.append("text")
.attr("x", function(d){
return padding/2 +(xScale(d.label))
})
.attr("y",function(d){
return yScale(d.count) + 20;
})
.style("text-anchor","middle")
.style("fill","white")
.style("font-family", "Open Sans")
.style("font-size", "15px")
.text(function(d){
return d.count;
});
/*create legend text*/
var legend = svg.append("g")
.classed("legend", true)
.style("font-size",19)
.style("text-anchor","middle")
.style("fill","white")
.style("font-family", "Open Sans")
.style("stroke", "white");
legend.append("rect")
.attrs({
x:440,
y:15,
height:160,
width:340,
fill:"orange",
stroke:"white"
});
legend.append("text")
.attrs({
x: 510,
y:65})
.style("font-size","34px")
.text("1 av 3");
legend.append("text")
.attrs({
x: 640,
y:65})
.text("har utdanning på");
legend.append("text")
.attrs({
x: 570,
y:95})
.text("universitet og høgskolenivå");
legend.append("text")
.attrs({
x: 565,
y:140})
.style("font-size","34px")
.text("1 av 100");
legend.append("text")
.attrs({
x: 480,
y:140})
.text("og");
legend.append("text")
.attrs({
x: 690,
y:140})
.text("har en PhD");
<\/script>
</html></script>
</body>
<script>
var dataset = [
{label:"Grunnskole", count:1120799},
{label:"Videregående", count:1601106},
{label:"Fagskole", count:122765},
{label:"Universitet og Høgskole < 4 år", count:1014637},
{label:"Universitet og Høgskole > 4 år", count:416540}
];
var height = 500;
var width = 800;
var padding = 50;
function getCount(record){
return record.count;
}
function getLabel(record){
return record.label;
}
/*creating yScale and yAxis */
var yScale = d3.scaleLinear()
.domain([d3.min(dataset, getCount) - 100000, d3.max(dataset, getCount) + 150000])
.range([height-padding, padding]);
var yAxis = d3.axisLeft(yScale);
/*creating xScale and xAxis*/
var xScale = d3.scalePoint()
.domain(dataset.map(getLabel))
.range([padding, width-padding])
.padding(0.5)
var xAxis = d3.axisBottom(xScale)
/*create svg*/
var svg = d3.select("body")
.append("svg")
.attrs({
height: height,
width: width
})
/*add y axis*/
svg.append("g")
.attr("transform", "translate(" + padding * 1.5 + ",0)")
.call(yAxis);
/*add y axis text*/
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - height/2)
.attr("y", -0.5)
.attr("dy", "0.8em")
.style("text-anchor","middle")
.style("fill","black")
.style("font-family", "Open Sans")
.style("font-size","15px")
.text("Folketelling (16 år eller eldre)");
/*add x axis*/
svg.append("g")
.attr("transform", "translate(" + padding/2 + "," + (height - padding) + ")")
.call(xAxis)
/*add bars*/
var g = svg.selectAll("rect")
.data(dataset)
.enter()
.append("g");
g.append("rect")
.attrs({
width:70,
height:function(d){
return (height - padding) - yScale(d.count);
},
x:function(d){
return padding/2 + (xScale(d.label) - 35);
},
y:function(d){
return yScale(d.count);
},
fill:"steelblue"
});
/*add bar label text*/
g.append("text")
.attr("x", function(d){
return padding/2 +(xScale(d.label))
})
.attr("y",function(d){
return yScale(d.count) + 20;
})
.style("text-anchor","middle")
.style("fill","white")
.style("font-family", "Open Sans")
.style("font-size", "15px")
.text(function(d){
return d.count;
});
/*create legend text*/
var legend = svg.append("g")
.classed("legend", true)
.style("font-size",19)
.style("text-anchor","middle")
.style("fill","white")
.style("font-family", "Open Sans")
.style("stroke", "white");
legend.append("rect")
.attrs({
x:440,
y:15,
height:160,
width:340,
fill:"orange",
stroke:"white"
});
legend.append("text")
.attrs({
x: 510,
y:65})
.style("font-size","34px")
.text("1 av 3");
legend.append("text")
.attrs({
x: 640,
y:65})
.text("har utdanning på");
legend.append("text")
.attrs({
x: 570,
y:95})
.text("universitet og høgskolenivå");
legend.append("text")
.attrs({
x: 565,
y:140})
.style("font-size","34px")
.text("1 av 100");
legend.append("text")
.attrs({
x: 480,
y:140})
.text("og");
legend.append("text")
.attrs({
x: 690,
y:140})
.text("har en PhD");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment