Skip to content

Instantly share code, notes, and snippets.

@EveTheAnalyst

EveTheAnalyst/Readme.md

Last active Jul 26, 2019
Embed
What would you like to do?
OECD Data: Percentage of workers in risk of job loss
country High Medium
Slovak Republic 11 35
Czech Republic 10 35.5
Italy 9 35
Germany 12 31
Austria 12 29
Poland 7 30
Netherlands 9.5 26.5
United Kingdom 10 25
8 26.5
United States 8 26
Spain 12 21.5
Norway 10 23
Denmark 7 26
Canada 8 25
Ireland 7 24
Sweden 6 24
France 7.5 22.5
Japan 6 23.5
Belgium 6 23
Finland 5.5 21.5
Estonia 5.5 21.5
South Korea 5.5 19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My map</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style></style>
</head>
<body>
<div id="container" class="svg-container"></div>
<script type="text/javascript">
var margin = {top: 20, right: 30, bottom: 50, left: 40},
width = 700 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("div#container").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 + ")");
var x = d3.scaleLinear()
.rangeRound([0, width]);
var y = d3.scaleBand()
.rangeRound([height, 0]).padding(0.2);
var z = d3.scaleOrdinal()
.range([ "#1c2833", "#78d0fa"]);
// this is done to later call a specific bar by its number
id = 0;
var ids = function () {
return "bar-"+id++;
}
id_2 = 0;
var ids_2 = function () {
return "bar2-"+id_2++;
}
d3.csv("data.csv", function(error, data) {
data.sort(function(a,b) {return a.High-b.High;});
data.forEach(function(d) {
d.Medium = +d.Medium;
d.High = +d.High;
});
x.domain([-50,50]);
y.domain(data.map(function(d) { return d.country; }));
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("id", ids)
.attr("x", function (d) {
return x(Math.min(0, d.Medium));
})
.attr("y", function (d) {
return y(d.country);
})
.attr("width", function (d) {
return Math.abs(x(d.Medium) - x(0));
})
.attr("height", y.bandwidth());
svg.selectAll(".bar2")
.data(data)
.enter().append("rect")
.attr("class", "bar2")
.attr("id", ids_2)
.attr("x", function (d) {
return x(Math.min(0, -d.High));
})
.attr("y", function (d) {
return y(d.country);
})
.attr("width", function (d) {
return Math.abs(x(-d.High) - x(0));
})
.attr("height", y.bandwidth());
svg.selectAll(".barlabel")
.data(data)
.enter()
.append("text")
.attr("class", "barlabel")
.attr("y", function(d){ return y(d.country)+ y.bandwidth()/2; })
.attr("x", function(d) { return x(d.Medium) - 5; })
.attr("alignment-baseline", "middle")
.attr("dy", ".1em")
.text(function(d) {return d.Medium + '%';})
.attr("text-anchor", "end");
svg.selectAll(".barlabel_2")
.data(data)
.enter()
.append("text")
.attr("class", "barlabel_2")
.attr("y", function(d){ return y(d.country)+ y.bandwidth()/2; })
.attr("x", function(d) { return x(-d.High) + 5; })
.attr("alignment-baseline", "middle")
.attr("dy", ".1em")
.text(function(d) {return d.High + '%';})
.attr("text-anchor", "start");
var average = svg.select("#bar-10").attr("class","average");
var average2 = svg.select("#bar2-10").attr("class","average_2");
svg.selectAll(".textlabel")
.data(data)
.enter()
.append("text")
.attr("class", "textlabel")
.attr("y", function(d){ return y(d.country)+ y.bandwidth()/2; })
.attr("x", function(d) { return x(-15) ; })
.attr("alignment-baseline", "middle")
.text(function(d) {return d.country;})
.attr("text-anchor", "end");
// average val
svg.append("text")
.attr("y", height-230)
.attr("x", x(-15))
.attr("class", "textlabel_avg")
.attr("alignment-baseline", "middle")
.text("Average")
.style("font-style","italic")
.attr("text-anchor", "end");
var keys = data.columns.slice(1);
var formatter = d3.format("0");
svg.append("g")
.attr("class", "top axis")
.call(d3.axisTop(x)
.tickFormat(function (d) {
if (d < 0) d = -d; // No negative labels
return formatter(d) + '%';
} ));
svg.append("g")
.attr("class", "bottom axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickFormat(function (d) {
if (d < 0) d = -d; // No negative labels
return formatter(d) + '%';
} ));
svg.append("g")
.attr("class", "y_axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("y2", height);
var legend_holder = svg.append("g")
.attr("transform", "translate("+ ( width/2 - margin.left) + "," + (height - margin.top + margin.bottom) + ")");
var legend = legend_holder.selectAll(".legend")
.data(keys.slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + i * 110 + ",0)"; });
legend.append("rect")
.attr("x", -40)
.attr("width", 19)
.attr("height", 19)
.attr("fill", function(d) { return z(d); });
legend.append("text")
.attr("x", -14)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d + " Risk"; });
});
</script>
</body>
</html>
.bar {
fill: #78d0fa;
}
.bar2 {
fill: #1c2833;
} .bar:hover {
fill: #550000;
}
.bar2:hover {
fill: #ff6347;
}
.barlabel {
fill: #78d0fa;
font-family: "Franklin Gothic Book", Arial;
font-size: 80%;
pointer-events: none;
}
.barlabel_2 {
fill: #1c2833;
font-family: "Franklin Gothic Book", Arial;
font-size: 80%;
pointer-events: none;
}
.average {
stroke: #47b4e8;
stroke-dasharray: 2,2;
stroke-width: 1px;
fill: none;
}
.average_2{
stroke: #1c2833;
stroke-dasharray: 2,2;
stroke-width: 1px;
fill: none;
}
.axis text {
fill: black;
font-family: "Franklin Gothic Book", Arial;
font-size: 120%;
text-anchor: middle;
}
.legend text {
fill: black;
font-family: "Franklin Gothic Book", Arial;
font-size: 80%;
text-anchor: start;
}
.axis path, .axis line {
fill: none;
stroke: #4b5158;
shape-rendering: geometricPrecision;
stroke-width: 0.7;
}
.yaxis line {
fill: none;
}
.textlabel, .textlabel_avg{
fill: black;
font-family: "Franklin Gothic Book", Arial;
font-size: 80%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment