Skip to content

Instantly share code, notes, and snippets.

@evaristoc
Last active January 17, 2016 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save evaristoc/b6bb842a4ea3a4fca09d to your computer and use it in GitHub Desktop.
Save evaristoc/b6bb842a4ea3a4fca09d to your computer and use it in GitHub Desktop.
FCC: Parallel Coordinates

This project is based on jasondavies’s block #1341281 for Parallel Coordinates parallel coordinates.

The project works some differences between countries in terms of activity as observed in some of FCC data management tools, country demographics (especially connectivity) and campersites.

Actual values transformed into a ordinal scales (the more higher the actual value, the higher the ordinal value). Variables were:

  • sessions: number of sessions between 2014 and 2015

  • int pop (DES): country's population connected to internet

  • ses/intpop: sessions per country's population connected to internet

  • ses/(48%*pop): sessions per (48% of country's population); 48% is the China's population connected to internet

  • connectivity: based on percentage of country's population connected to internet

  • rankingcampersite: based on number of camper sites in the country

  • finalscore: average of previous ordinal values

country sessions int pop (DES) ses/intpop ses/(48%*pop) connectivity rankingcampersite finalscore
Afghanistan 10 30 16 6 6 2 29.5
Albania 28 29 48 63 77 2 35.33333333
Algeria 51 67 28 17 12 4 45.66666667
Argentina 86 98 47 60 72 5 57.16666667
Armenia 31 20 64 64 51 2 41.5
Australia 113 89 107 110 94 11 75.83333333
Austria 68 69 75 81 93 2 53.5
Azerbaijan 33 63 11 30 71 2 31.16666667
Bahrain 2 17 21 55 109 1 17.66666667
Bangladesh 75 78 68 14 5 3 58.66666667
Barbados 6 3 93 98 91 1 38.16666667
Belarus 73 60 81 82 68 3 58.33333333
Belgium 80 75 79 88 92 3 58.66666667
Belize 3 1 112 89 25 2 50.16666667
Bolivia 35 52 19 23 33 3 36.33333333
Brazil 115 115 54 59 58 17 70.16666667
Bulgaria 65 48 86 83 62 2 56.83333333
Cambodia 47 13 102 37 3 2 52.83333333
Cameroon 34 21 70 13 4 3 42.66666667
Canada 116 99 113 115 103 15 79
Chile 60 82 29 53 79 3 44.5
China 101 119 1 3 55 7 49.16666667
Colombia 83 94 46 52 56 9 57.83333333
Costa Rica 53 36 80 75 49 3 52.83333333
Croatia 71 45 101 102 86 3 59.16666667
Cyprus 42 11 94 103 114 3 43
Czech Republic 78 73 77 85 90 5 57.83333333
Denmark 74 61 82 94 116 4 53
Dominican Republic 77 54 91 84 48 2 63.16666667
Ecuador 45 66 20 32 39 3 41
Egypt 93 108 24 40 50 4 56.33333333
El Salvador 16 19 42 27 22 1 33.66666667
Estonia 59 14 115 117 95 2 55.16666667
Ethiopia 29 28 50 1 1 3 38.16666667
Finland 79 58 97 106 112 6 58.83333333
France 105 110 40 67 100 9 58.33333333
Georgia 36 35 51 62 70 1 39
Germany 111 113 59 73 108 12 63.16666667
Ghana 52 46 72 22 9 2 50.66666667
Greece 92 68 100 96 74 3 67.33333333
Guatemala 39 41 38 20 16 2 40.5
Guyana 9 4 95 77 29 1 46
Haiti 14 15 53 15 8 1 34.83333333
Honduras 19 23 43 21 17 2 35
Hungary 67 72 73 76 89 2 53.33333333
Iceland 17 6 103 111 115 2 40.5
India 118 118 34 34 26 18 69.16666667
Indonesia 90 105 26 16 11 8 58.83333333
Iran 54 97 5 12 28 4 43.83333333
Iraq 20 44 15 8 7 2 33.5
Ireland 85 50 114 116 102 4 64.33333333
Israel 91 62 108 104 83 4 67.5
Italy 102 101 49 61 73 10 61.5
Jamaica 44 16 89 79 40 2 51.5
Japan 84 116 6 26 111 4 40.66666667
Jordan 43 42 52 47 36 2 44.83333333
Kazakhstan 46 77 12 29 65 3 36.83333333
Kenya 76 87 41 42 34 3 55.66666667
Kuwait 25 32 35 48 54 2 34.5
Kyrgyzstan 26 18 65 39 21 2 41.33333333
Latvia 48 25 85 93 105 2 44.5
Lebanon 32 43 25 51 84 2 31.33333333
Lithuania 63 37 99 108 106 2 53.66666667
Luxembourg 4 8 67 78 110 1 27.83333333
Malaysia 88 93 61 69 81 6 59.16666667
Maldives 24 2 119 114 60 2 53.33333333
Malta 12 5 92 91 80 1 40
Mauritius 1 9 60 57 42 1 34.16666667
Mexico 103 109 39 45 43 12 64
Moldova 40 27 71 68 57 3 45.16666667
Mongolia 41 10 109 70 15 2 56
Montenegro 27 7 106 101 75 1 47.66666667
Morocco 55 88 10 25 67 3 38.83333333
Nepal 57 79 27 38 37 6 48.16666667
Netherlands 104 85 88 99 119 5 63.5
New Zealand 81 47 110 113 96 5 63.16666667
Nicaragua 15 12 69 28 10 3 39.33333333
Nigeria 95 112 13 19 32 7 55.5
Norway 72 59 84 97 117 5 53.16666667
Oman 13 33 17 35 53 1 27.5
Pakistan 94 100 32 18 18 9 59
Panama 30 24 58 56 41 2 41.33333333
Paraguay 21 39 22 33 30 3 34.5
Peru 64 83 37 41 35 3 52
Philippines 108 104 66 58 38 8 70.83333333
Poland 109 96 83 86 78 11 71
Portugal 87 70 98 95 82 4 65.16666667
Qatar 38 26 62 71 87 2 38.5
Romania 110 80 111 109 66 12 79.16666667
Russia 114 114 56 66 76 14 67.83333333
Saudi Arabia 58 86 14 36 63 4 42.33333333
Senegal 11 40 9 11 19 1 28.66666667
Serbia 98 49 116 112 64 5 72.5
Singapore 100 51 117 118 88 2 69.83333333
Slovakia 62 53 78 87 97 3 50.83333333
Slovenia 56 22 105 107 85 2 54.33333333
South Africa 89 95 55 54 45 4 61.83333333
South Korea 82 107 18 50 101 4 46.5
Spain 106 102 63 74 98 12 63
Sri Lanka 50 56 45 31 23 4 47
Sudan 8 74 2 2 20 1 31
Sweden 96 76 90 100 118 2 60.83333333
Switzerland 66 71 74 80 107 5 51.33333333
Syria 5 65 3 5 24 1 29
Taiwan 107 91 87 92 99 2 66.5
Tanzania 23 34 30 4 2 2 35
Thailand 70 92 23 24 27 3 50.66666667
Tunisia 49 55 44 49 44 2 45.66666667
Turkey 97 103 33 44 52 4 58
Uganda 18 64 7 7 14 2 33.83333333
Ukraine 112 90 104 90 46 13 80.33333333
United Arab Emirates 61 57 76 72 59 3 54.83333333
United Kingdom 117 111 96 105 113 16 75.16666667
United States 119 117 118 119 104 19 84.5
Uruguay 37 31 57 65 69 2 40.33333333
Uzbekistan 22 81 4 10 31 2 34.5
Venezuela 69 84 31 46 61 4 48.66666667
Vietnam 99 106 36 43 47 4 60
Zimbabwe 7 38 8 9 13 2 28.33333333
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ddd;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: steelblue;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
cursor: move;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
<script>
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {},
dragging = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground;
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("C_FCC.csv", function(error, countries) {
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(countries[0]).filter(function(d) {
return d != "country" && (y[d] = d3.scale.linear()
.domain(d3.extent(countries, function(p) { return +p[d]; }))
.range([height, 0]));
}));
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(countries)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(countries)
.enter().append("path")
.attr("d", path);
// 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) + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return {x: x(d)}; })
.on("dragstart", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) {
d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brushstart", brushstart).on("brush", brush));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
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])]; }));
}
function brushstart() {
d3.event.sourceEvent.stopPropagation();
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment