Skip to content

Instantly share code, notes, and snippets.

@junkwhinger

junkwhinger/index.html

Last active August 29, 2015 14:25
Show Gist options
  • Save junkwhinger/53896a1c6cc37c0dbd3e to your computer and use it in GitHub Desktop.
Save junkwhinger/53896a1c6cc37c0dbd3e to your computer and use it in GitHub Desktop.
Download ZIP
OECD service trade restrictiveness
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.foreground path {
fill: none;
stroke: steelblue;
stroke-opacity: .7;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff;
cursor: move;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>
<script>
var m = [100, 150, 10, 10],
w = 960 - m[1] - m[3],
h = 560 - m[0] - m[2];
var x = d3.scale.ordinal().rangePoints([0, w], 1),
y = {},
dragging = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground;
var color = d3.scale.category20();
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("service_trade_oecd.csv", function(error, cars) {
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
return d != "Sector" && (y[d] = d3.scale.linear()
.domain([0, 1])
.range([h, 0]));
}));
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.data(cars)
foreground.selectAll("path")
.data(cars)
.enter().append("path")
.attr("class", "line")
.attr("id", function(d){
return "line_" + d.Sector;
//console.log(d)
})
.attr("d", path)
.style("stroke", function (d) {
return color(d.Sector)
})
.style("stroke-width", "1.5px");
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.attr("text-anchor", "start")
.attr("x", 3)
.attr("y", 1)
.attr("transform", function(d) {
return "rotate(-90)"
})
.text(String);
var legendSpace = 450 / cars.length;
foreground.selectAll(".legend_box")
.data(cars)
.enter().append("rect")
.attr("class", "legend_box")
.attr("width", 10)
.attr("height", 10)
.attr("id", function (d) {
//console.log(d)
return "legend-" + d.Sector;
})
.attr("x", w + 1)
.attr("y", function (d, i) {
return (legendSpace) + i * (legendSpace) - 13;
})
.attr("fill", function(d){
return color(d.Sector)
})
.on("click", function(d) {
//console.log(d.Sector)
//console.log(count)
line = "line_" + d.Sector;
line_id = "#"+line;
legend_id = "#legend-" + d.Sector;
console.log(d3.select(line_id))
var active = x.active? false : true,
newOpacity = active ? 0.1 : 1,
newFill = active ? "rgba(20,20,20,.2)" : color(d.Sector)
newStroke = active ? "1px" : "2px";
console.log(line.active)
d3.select(line_id).style("opacity", newOpacity);
d3.select(line_id).style("stroke-width", newStroke)
d3.select(legend_id).style("opacity", newOpacity);
x.active = active;
});
foreground.append("rect")
.attr("id", "all_rect")
.attr("width", 10)
.attr("height", 10)
.attr("x", w + 1)
.attr("y", - 13)
.attr("fill", "black")
.on("click", function(d){
var active = y.active? false : true,
newOpacity = active ? 0.1 : 1,
newStroke = active ? "1px" : "2px";
console.log(line.active)
d3.selectAll(".line").style("opacity", newOpacity);
d3.selectAll(".line").style("stroke-width", newStroke)
d3.selectAll(".legend_box").style("opacity", newOpacity);
d3.select("#all_rect").style("opacity", newOpacity)
y.active = active;
})
foreground.selectAll(".legend_text")
.data(cars)
.enter().append("text")
.attr("class", "legend_text")
.attr("x", w + (m[1] / 9))
.attr("y", function (d, i) {
return (legendSpace) + i * (legendSpace) -4;
})
.text(function (d) {
return d.Sector;
});
foreground.append("text")
.attr("id", "all_text")
.attr("width", 10)
.attr("height", 10)
.attr("x", w + (m[1] / 9))
.attr("y", -5)
.text("All")
});
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
</script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
Raw
service_trade_oecd.csv
Sector Accounting Architecture Engineering Legal Motion pictures Broadcasting Sound recording Telecom Air transport Maritime transport Road freight transport Rail freight transport Courier Distribution Commercial banking Insurance Computer Construction
Australia 0.135 0.157 0.081 0.114 0.099 0.182 0.086 0.189 0.258 0.233 0.106 0.2 0.309 0.08 0.139 0.134 0.113 0.157
Austria 0.376 0.315 0.318 0.444 0.187 0.4 0.227 0.064 0.374 0.222321429 0.215 0.15 0.154 0.12 0.183 0.204 0.231 0.181
Belgium 0.271 0.278 0.118 0.383 0.122 0.167 0.159 0.198 0.371 0.17 0.134 0.101 0.15 0.083 0.126 0.117 0.164 0.094
Canada 0.177 0.186 0.116 0.125 0.241 0.386 0.141 0.283 0.531 0.188 0.137 0.161 0.334 0.242 0.136 0.182 0.127 0.136
Chile 0.135 0.125 0.144 0.187 0.152 0.308 0.165 0.281 0.324 0.386 0.092 0.245 0.472 0.109 0.196 0.138 0.132 0.135
Czech_Republic 0.197 0.238 0.24 0.229 0.144 0.149 0.13 0.121 0.371 0.222321429 0.134 0.117 0.139 0.054 0.152 0.155 0.214 0.133
Denmark 0.24 0.079 0.068 0.319 0.112 0.19 0.119 0.075 0.376 0.205 0.12 0.112 0.121 0.093 0.139 0.203 0.099 0.102
Estonia 0.206 0.439 0.442 0.39 0.179 0.192 0.151 0.143 0.386 0.378 0.151 0.105 0.125 0.09 0.128 0.052 0.164 0.164
Finland 0.262 0.129 0.131 0.148 0.214 0.267 0.179 0.193 0.41 0.252 0.204 0.15 0.162 0.22 0.181 0.249 0.209 0.223
France 0.216 0.189 0.102 0.22 0.216 0.266 0.17 0.056 0.353 0.129 0.144 0.12 0.101 0.109 0.104 0.102 0.12 0.065
Germany 0.208 0.167 0.166 0.225 0.1 0.158 0.081 0.093 0.346 0.135 0.116 0.158 0.088 0.05 0.102 0.118 0.082 0.056
Greece 0.412 0.23 0.218 0.275 0.141 0.326 0.16 0.277 0.354 0.335 0.18 0.184 0.133 0.156 0.095 0.148 0.221 0.194
Hungary 0.202 0.198 0.199 0.291 0.139 0.198 0.093 0.159 0.357 0.222321429 0.123 0.073 0.128 0.076 0.104 0.185 0.14 0.111
Iceland 0.241 0.239 0.198 0.283 0.296 0.395 0.287 0.218 0.402 0.208 0.25 0.175606061 0.374 0.226 0.255 0.283 0.287 0.324
Ireland 0.273 0.128 0.129 0.258 0.124 0.155 0.122 0.118 0.365 0.157 0.13 0.12 0.118 0.116 0.122 0.111 0.12 0.115
Israel 0.304 0.246 0.249 0.393 0.134 0.367 0.132 0.377 0.513 0.181 0.162 1 0.376 0.096 0.185 0.162 0.164 0.285
Italy 0.266 0.269 0.27 0.224 0.154 0.226 0.233 0.133 0.365 0.301 0.194 0.164 0.176 0.13 0.129 0.171 0.167 0.172
Japan 0.171 0.201 0.189 0.213 0.149 0.16 0.145 0.301 0.476 0.239 0.173 0.229 0.214 0.133 0.193 0.189 0.18 0.118
Korea 0.254 0.259 0.086 0.37 0.138 0.342 0.153 0.196 0.523 0.288 0.106 0.149 0.338 0.058 0.137 0.075 0.126 0.136
Luxembourg 0.238 0.205 0.208 0.217 0.1 0.079 0.086 0.182 0.376 0.222321429 0.081 0.105 0.103 0.098 0.081 0.098 0.102 0.069
Mexico 0.157 0.184 0.149 0.517 0.221 0.347 0.13 0.34 0.57 0.25 0.137 0.253 0.4 0.097 0.366 0.226 0.157 0.2
Netherlands 0.157 0.066 0.065 0.205 0.062 0.07 0.054 0.088 0.345 0.07 0.095 0.057 0.07 0.077 0.098 0.047 0.079 0.054
New_Zealand 0.133 0.16 0.094 0.236 0.105 0.151 0.113 0.254 0.288 0.251 0.085 0.147 0.18 0.069 0.195 0.161 0.137 0.152
Norway 0.275 0.105 0.106 0.282 0.13 0.24 0.152 0.234 0.507 0.16 0.194 0.283 0.406 0.132 0.139 0.215 0.133 0.184
Poland 1 0.47 0.463 0.169 0.09 0.325 0.2 0.151 0.387 0.209 0.162 0.15 0.145 0.092 0.185 0.138 0.108 0.118
Portugal 0.474 0.287 0.225 0.302 0.132 0.163 0.142 0.068 0.397 0.123 0.141 0.112 0.133 0.098 0.135 0.197 0.178 0.137
Slovak_Republic 0.21 0.438 0.442 0.514 0.105 0.115 0.096 0.117 0.355 0.222321429 0.141 0.113 0.136 0.065 0.11 0.163 0.119 0.124
Slovenia 0.207 0.186 0.188 0.218 0.123 0.183 0.118 0.148 0.378 0.195 0.13 0.073 0.086 0.061 0.128 0.119 0.184 0.183
Spain 0.323 0.237 0.239 0.314 0.09 0.13 0.089 0.113 0.38 0.144 0.123 0.099 0.153 0.022 0.064 0.156 0.131 0.083
Sweden 0.297 0.105 0.106 0.158 0.148 0.218 0.109 0.202 0.401 0.205 0.158 0.134 0.193 0.122 0.094 0.127 0.168 0.18
Switzerland 0.413 0.188 0.191 0.428 0.212 0.437 0.196 0.215 0.4 0.222321429 0.137 0.214 0.357 0.138 0.186 0.127 0.222 0.181
Turkey 1 0.196 0.168 0.457 0.112 0.411 0.114 0.131 0.447 0.323 0.176 0.322 0.447 0.086 0.209 0.162 0.146 0.149
United_Kingdom 0.174 0.115 0.102 0.163 0.144 0.133 0.093 0.095 0.353 0.127 0.13 0.073 0.154 0.065 0.083 0.142 0.12 0.081
United_States 0.147 0.163 0.199 0.14 0.06 0.297 0.049 0.124 0.581 0.383 0.141 0.122 0.37 0.073 0.13 0.222 0.152 0.158
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment