Skip to content

Instantly share code, notes, and snippets.

@tizon9804

tizon9804/.block

Last active September 11, 2016 06:58
Show Gist options
  • Save tizon9804/d4ab67d803079a49ab4ec4ecc158edfd to your computer and use it in GitHub Desktop.
Save tizon9804/d4ab67d803079a49ab4ec4ecc158edfd to your computer and use it in GitHub Desktop.
Download ZIP
3D EPI Data Visual analitycs
Raw
.block
license: mit
Raw
README.md

Tarea 4

Juan Camilo Ortiz

Stevenson Contreras

What:

structure:Table    
A Quantitive attribute: indicators
A categorical attribute: Countries

Why:

Present the distribution of the information of a country in all their aspects like politics,economics,environment etc.

How: Polar Area 3D chart

	mark:

			-3d area
      -3D volume
      
channels:

			Angle to express dimension
      color to differentiate dimension
      3d Volumen

Expressiveness:

The color channel do not match some indicators the data is not show in an order way and it show more information that the dataset has like the volume chart and the angle position of each indicator. Because it id 3d some indicator are covering others. Other important aspect is that the kind of measures of each indicator are not show so what is the range, domain of each data?

Effectiveness:

This charts do not use the most important channels to show the indicators. It use 3d position so it is difficult to compare, it use angles and areas and the dataset is not too complex to use that.

Development:

First, the best form to show quantitive attributes is with 2D chart. Second, using principal marks like lines, points and channels like bars to compare the principal information. Other channels like shapes to show secundary information like the mean of those indicators to understand without read.finishing, the best colors to use are those have strong tones because it is more easy to differentiate.

Alternative:

In this prototype we show a first level of the data collected. The data itself is clasified into categories and subcategories. Here we presente the axis of the categories. In future developements clicking over each acces will grant acces to a detailed graph (same structure) to the subcategories. This design decision was made due to the large amount of data in the dataset and the possibility of breaking it into smaller steps, that way we can use the visualization tool to analyze at several levels of abstraction.

Raw
index.html
<!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: darkgoldenrod;
}
.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;
}
</style>
<body>
<div id="table_container" class="csvTable">Seleccione el pais:</div>
<div id="selectedName"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 100, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {};
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("indicators.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]));
}));
var dropDown = d3.select("#table_container").append("select")
.attr("name", "country-list")
.on("change", change);
var options = dropDown.selectAll("option")
.data(countries
.sort(function(a,b) { return d3.ascending(a.Country,b.Country);}))
.enter()
.append("option");
options.text(function (d) { return d["Country"]; })
.attr("value", function (d) { return d["Country"]; });
function change() {
var selectedIndex = dropDown.property('selectedIndex'),
selectedCountry = options[0][selectedIndex].__data__;
foreground.style("display", function(d) {
if(d.Country==selectedCountry["Country"]){
return null;
}
else{
return "none";
}
});
}
// 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) + ")"; });
// 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) {
if(d!="Rank"){
return d.toString().split("-")[1].trim();
}
else{
return d;
}
})
.style("fill",function(d){
var randomColor = Math.floor(Math.random()*16777215).toString(16);
return randomColor;
});
// 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("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
// add style linepath
d3.selectAll(".foreground path").style("stroke",function(d,i){
return "hsl("+(((170-d.Rank)*90)/170)+",80%,60%)";
}).style("stroke-width",function(d,i){
return (1-(d.Rank/170)*5)+5;
}).style("opacity",function(d,i){
return 1-((d.Rank)/300);
});
});
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// 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>
Raw
indicators.csv
Country Rank EH - Health Impacts EH - Air Quality EH -Water and Sanitation EV - Water Resources EV - Agriculture EV - Forests EV - Fisheries EV- Biodiversity and Habitat EV - Climate and Energy
Switzerland 1 100 76.56 100 96.95 49.24 49.65 0 100 78.14
Luxembourg 2 94.79 81.98 100 95 65.33 33.76 0 100 56.75
Australia 3 100 98.33 100 92.33 66.46 100 19.37 83.08 47.67
Singapore 4 100 98.33 100 99.65 96 0 0 46.33 86.85
Czech Republic 5 100 73.99 97.91 75.68 67.07 45.05 0 98.35 65.82
Germany 6 100 78.5 100 95.18 65.31 31.35 13.4 100 62.77
Spain 7 96.17 97.37 99.33 92.83 65.19 45.05 23.24 56.56 81.84
Austria 8 100 76.45 100 79.05 65.49 19.87 0 86.59 62.09
Sweden 9 100 97.13 100 87.86 65.18 14.35 25.3 62.38 77.34
Norway 10 100 98.33 100 77.05 46.6 32.52 20.88 71.68 75.65
Netherlands 11 100 75.57 100 98.82 65.36 33.76 0 94.69 53.32
United Kingdom 12 100 95.82 100 97.93 66.03 43.06 0 70.11 54.24
Denmark 13 100 92.82 100 93.45 66.06 18.52 8.66 67.74 67.22
Iceland 14 97.97 98.33 100 51.94 50.62 0 16.71 81.9 71.31
Slovenia 15 100 78.13 95.96 53.99 63.43 45.05 0 100 54.59
New Zealand 16 94.16 98.33 71.28 77.9 79.49 100 5.42 76.05 62.94
Portugal 17 100 97.97 96.75 70.33 64.3 7.75 30.07 64.36 80.68
Finland 18 100 98.33 100 84.25 66.99 11.77 32.89 61.86 62.24
Ireland 19 100 98.33 90.47 87.47 66.39 100 16.49 18.74 75.01
Estonia 20 93.47 96.21 77.67 75.27 67.12 9.02 27.66 100 56.71
Slovakia 21 93.13 73.12 97.43 57.64 63.85 21.31 0 84.33 72.48
Italy 22 100 80.85 63.51 91.44 58.87 55.41 24.93 79.77 63.41
Greece 23 100 85.88 87.76 87.33 61.01 22.83 25.86 66.49 59.79
Caoda 24 100 97.85 95.9 80.42 62.52 16.64 21.54 58.4 59.85
United Arab Emirates 25 96.09 86.47 82.41 67.06 92 0 24.25 96.47 33.86
Japan 26 99.2 84.79 100 71.26 46.48 55.41 25.34 73.53 43.54
France 27 100 89.44 100 83.8 65.55 37.94 0 54.45 49.83
Hungary 28 96.71 70.24 99.99 58.62 65.34 100 0 29.57 66.87
Chile 29 91.71 96.8 79.74 68.85 67.39 100 23.35 60.16 35.92
Poland 30 98.71 70.74 59.31 60.73 64.98 58.94 26.52 91.76 60.53
Serbia 31 84.77 67.17 78.19 8.79 96 100 0 99.78 62.92
Belarus 32 88.14 81.21 73.66 86.45 68 68.23 0 41.25 43.15
United States of America 33 95.33 96.41 86.48 63.66 61.53 14.35 3.34 63.35 56.45
Malta 34 85.76 98.33 100 37.01 19.66 0 0 80.96 55.32
Saudi Arabia 35 94.68 84.45 83.48 28.54 92 0 6.43 93.7 46.63
Belgium 36 99.65 69.79 100 60 65.33 23.64 0 57.56 64.47
Brunei Darussalam 37 100 94.62 73.93 37.84 68 36.46 42.06 100 21.73
Cyprus 38 100 85.68 100 9.44 61.34 35.07 32.32 77.03 61.92
Israel 39 98.13 79.57 100 88.4 14.66 0 0 39.34 41.86
Latvia 40 91.58 96.29 53.69 49.62 64.57 3.3 0 95.17 53.27
Bulgaria 41 87.46 77.23 95.02 28.86 81.62 84.12 0 68.85 48.18
Kuwait 42 80.72 61.54 91.69 43 92 0 0 92.88 42.23
South Korea 43 96.93 62.24 85.92 83.68 46.98 33.76 22.24 50.4 41.55
Qatar 44 90.52 76.81 100 67.32 88 0 0 8.47 70.93
Croatia 45 95.79 76.67 77.71 13.23 60.99 63.12 19.3 70.87 63.26
Taiwan 46 94.95 76.38 100 4.59 44.96 49.65 27.04 71.39 57.69
Tonga 47 72.58 85.67 68.03 27.06 56 0 41.85 92.16 41.88
Armenia 48 80.93 76.6 66.3 22.59 92 74.82 0 80.16 39.91
Lithuania 49 92.69 85.09 43.81 45.82 66.61 23.64 0 91.83 51.02
Egypt 50 66.83 67.99 73.59 49.5 73.01 0 23.78 65.26 61.05
Malaysia 51 95.38 90.54 77.21 8.64 57.68 1.68 17.6 93.37 40.24
Tunisia 52 89.95 99.04 54.57 27.77 88 100 14.85 31.08 54.38
Ecuador 53 72.1 98.13 50.07 6.4 96 28.15 37.17 88.09 54.66
Costa Rica 54 90.39 97.88 59.57 0.9 90 19.87 37.51 89.55 38.46
Jamaica 55 72.5 96.33 41.26 10 96 18.52 0 88.04 76.98
Mauritius 56 88.37 100 71.27 5.44 92 100 47.5 43.7 29.91
Venezuela 57 70.44 99.04 49.01 14.94 94 33.76 18.5 92.92 43.59
Pa0ma 58 72.7 94 39.11 20.15 96 14.35 27.75 86.96 52.82
Kiribati 59 58.45 84.67 11.24 27.06 56 0 36.08 100 0
Jordan 60 79.31 82.51 69.06 42.3 84 0 0 8.52 65.68
Seychelles 61 83.98 100 66.09 3.96 48 0 51.16 72.42 26.83
Montenegro 62 98.68 76.19 60.08 5.1 86 100 0 51.6 47.4
Azerbaijan 63 60.57 86.87 30.66 13.15 62 63.12 0 58.66 80.88
Cuba 64 93.18 97 51.75 9.19 84 100 32.72 56.06 16.93
Mexico 65 76.67 87.09 46.2 37.45 55.21 19.87 25.34 62.32 51.35
Turkey 66 66.06 84.07 71.43 48.93 56.67 52.35 21.9 32.62 46.52
Albania 67 93.75 68.24 55.91 3.36 60 17.25 0 63.19 85.74
Syria 68 78.81 71.08 51.38 82.17 92 3.3 0 23.44 59.1
Sri Lanka 69 82.82 70.8 48.85 0 92 33.76 62.43 67.7 54.62
Uruguay 70 80.39 100 89.51 6.67 68.06 100 20.19 24.62 24.51
Suri0me 71 64.28 96 41.16 0.01 90 63.12 17.55 75.04 52.76
South Africa 72 47.51 94.4 36.08 27.86 79.2 100 2.52 63.96 49.87
Russia 73 83.12 94.36 45.17 21.5 16.93 35.07 12.73 53.39 61.02
Moldova 74 76.03 73.63 50.99 34.15 74 100 0 7.51 63.16
Dominican Republic 75 78.15 97.55 31.68 5.9 52.69 5.79 37.15 92.94 44.06
Fiji 76 72.54 87.67 51.94 3.9 94 58.94 38.36 37.98 65.71
Brazil 77 68.59 97.64 50.44 10.87 74.51 10.81 24.68 66.74 53.82
Thailand 78 88.23 67.67 57.62 16 62.13 25.34 19.05 70.19 46.05
Trinidad and Tobago 79 63.01 99.88 52.08 5.25 96 17.88 24.58 83.48 32.54
Palau 80 76.45 100 79.06 40 12 0 50 43.95 1.02
Morocco 81 64.96 98.85 26.24 39.39 46.35 100 19.37 31.2 49.4
Bahrain 82 81.63 74.63 93.4 64.27 12 0 0 4.99 39.57
Iran 83 64.34 88.81 75.21 2.77 92 84.12 22.41 37.06 36.73
Kazakhstan 84 66.8 95.92 63.48 30.5 37.13 74.82 0 14.11 43.49
Colombia 85 63 95.09 39.92 4.6 52.51 26.24 32.46 80.4 43.49
Romania 86 85.36 68.88 31.32 13.05 72.13 45.05 0 63.51 62.82
Bolivia 87 48.63 88.77 24.46 11.3 64 11.77 0 81.04 63.57
Belize 88 80.78 96 62.49 2.28 92 4.69 0 98.58 2.59
Macedonia 89 100 64.26 70.51 3.74 94 25.34 0 27.54 54.41
Nicaragua 90 74.66 81.88 23.16 8.4 88 0 28.11 91.67 46.82
Lebanon 91 91.77 77.34 88.69 15.08 90 74.82 0 1.71 40.43
Algeria 92 66.12 99.28 46.13 34.64 94 26.24 23.71 34.86 37.53
Argenti0 93 85.07 99.64 75.7 11.75 96 0 15.68 44.88 16.79
Zimbabwe 94 43.76 78 17.5 14.03 56 23.64 0 99.52 0
Ukraine 95 83.06 84.76 65.31 14.7 62.03 32.52 25.3 41.46 27.78
Antigua and Barbuda 96 83.79 100 61.01 11.37 84 0 0 60.92 8.41
Honduras 97 53.31 82.88 36.38 15.54 92 6.17 27.29 76.81 48.29
Guatemala 98 58.89 80.4 42.37 5.37 94 0 32.6 57.55 64.18
Oman 99 88.83 96.89 57.52 13.4 24 0 24.39 42.28 21.64
Botswa0 100 56.09 87.67 42.36 0.95 20 0 0 100 16.57
Georgia 101 79.42 75.53 64.39 0 56 84.12 0 29.59 45.43
Dominica 102 73.9 99.67 43.98 2.99 56 0 0 66.29 27.95
Bhutan 103 42.35 44.86 38.98 0 50 63.12 0 94.92 0
Gabon 104 37.41 90.97 21.88 0 12 58.94 28.8 82.94 56.67
Bahamas 105 71.19 98.33 51.95 11.37 12 21.31 39.68 75.53 0
Vanuatu 106 69.57 72 29.8 27.06 56 74.82 48.81 27.46 0
Bosnia and Herzegovi0 107 91.03 69.53 72.15 3.18 56 100 0 2.5 31.71
Barbados 108 89.63 100 73.12 11.37 84 0 50 2.28 12.38
Turkmenistan 109 48.37 98.2 51.78 9.8 50 0 0 17.86 61.67
Peru 110 54.81 83.68 29.07 20.98 92 32.52 29.77 70.36 16.71
Mongolia 111 65.75 76 23.61 19.8 88 0 0 73.25 25.06
Indonesia 112 67.55 75.31 24.29 0.02 51.85 7.75 25.8 78.08 45.25
Cape Verde 113 77.56 89.33 29.29 19.4 92 0 43.26 7.32 45.04
Philippines 114 62.94 81.53 37.35 0.53 45.38 31.35 23.18 64.67 35.73
El Salvador 115 71.88 92.55 32.43 0.62 84 9.9 31.98 24.53 58.24
0mibia 116 56.53 81.67 28.4 13 56 0 24.59 94.39 0.54
Uzbekistan 117 55.07 79.37 68.59 0 50 55.41 0 12.87 51.9
Chi0 118 76.23 18.81 33.15 18.18 33.85 25.34 14.68 66.63 65.16
Central African Republic 119 15.89 66.68 10.66 0 90 43.06 0 97 0
Libya 120 81.63 97.12 37.24 18.08 12 0 38.84 0.89 46.61
Zambia 121 26.17 71.25 11.12 4.2 42.83 13.28 0 100 0
Papua New Guinea 122 46.1 75.43 1.38 0 56 45.05 49.51 25.68 89.98
Equatorial Guinea 123 17.28 74.09 25.18 1.25 0 37.94 49.67 91.32 0
Senegal 124 35.02 83 16.49 2.06 17.45 0 20.78 85.36 0
Kyrgyzstan 125 56.77 86.51 47.11 4.2 94 68.23 0 15.77 0
Burki0 Faso 126 13.18 69.33 14.01 0.02 88 0 0 83.75 0
Laos 127 56.74 29.23 17.5 0 80 13.28 0 93.85 0
Malawi 128 28.05 67.55 22.44 0 88 0 0 87.81 0
Cote d'Ivoire 129 28.6 73.88 14.77 0.6 80 0 33.68 81.23 49.3
Congo 130 27.54 73.85 10.27 0.18 92 47.23 0 66.29 59.88
Ethiopia 131 35.24 66.85 3.53 0 60 35.07 0 83.78 0
Timor-Leste 132 53.2 69.33 12.22 0.3 50 31.35 59.87 60.43 0
Paraguay 133 63.67 83.67 29.76 0.16 92 0 0 31.2 44.09
Nigeria 134 21.29 72.7 8.17 1.08 92 29.16 28.24 57.54 70.55
Uganda 135 31.05 66.8 13.93 0.56 58 4.34 0 91.31 0
Viet 0m 136 62.83 51.32 43.15 0.14 58.25 17.25 20.11 43.39 44.51
Guya0 137 64.24 97.55 45.78 0 92 63.12 15.79 18.66 0.64
Swaziland 138 31.43 81.67 17.34 55.5 58 52.35 0 17.69 14.04
Nepal 139 56.79 16.23 22 0 92 63.12 0 61.79 0
Kenya 140 33.86 73.33 7.92 0.52 92 15.46 37.87 67.96 0
Cameroon 141 22.91 73.8 16.17 0 96 43.06 0 45.67 62.13
Niger 142 11.94 67.4 2.93 0 78 0 0 77.21 0
Tanzania 143 35.69 68.31 3.68 0.42 65.87 14.9 26.2 79.12 0
Guinea-Bissau 144 14.52 67.33 10.19 0 56 13.81 29.9 89.87 0
Cambodia 145 52.86 64.82 10.52 0 64 0 0 78.93 0
Rwanda 146 35.65 63.26 17.2 0 60 45.05 0 56.32 0
Gre0da 147 75.84 100 51.93 11.37 50 0 0 3.74 4.14
Pakistan 148 64.97 23.02 28.34 3.52 74 43.06 14.61 41.43 44.33
Iraq 149 71.73 67.42 34.87 8.29 50 0 0 0 36.03
Benin 150 24.65 67.39 11.44 0.01 74.05 0 0 65.88 0
Gha0 151 33.45 69.72 17.77 10.25 92 10.81 29.46 34.26 27.3
Solomon Islands 152 55.12 70 15.13 0 56 35.07 54.67 17.58 0
Comoros 153 34.1 76.33 31.77 3.96 58 68.23 48.26 0 0
Tajikistan 154 43.73 69.19 36.74 2.25 76 0 0 24.28 0
India 155 50.04 23.24 26.28 10.49 58.4 35.07 22.64 39.18 35.24
Chad 156 15.25 70.55 2.91 0 75.14 0 0 55.34 0
Yemen 157 38.98 81.65 10.69 0.49 92 0 30.85 23.59 0
Mozambique 158 23.25 68.33 2.88 2.5 50.7 3.99 23.67 63.17 0
Gambia 159 22.16 69.67 31.26 0.4 92 0 0 37.05 0
Angola 160 15.29 79.27 11.76 0 56 26.24 22.95 41.7 0
Djibouti 161 31.57 93.39 33.11 0 84 0 0 15.45 0
Guinea 162 18.03 67.67 10.91 0.75 94 17.25 20.73 41 0
Togo 163 26.06 67.23 5.18 0 92 28.15 0 44.23 0
Myanmar 164 45.8 47.68 30.69 0 80 24.47 0 28.62 0
Mauritania 165 26.73 80.67 4.52 0 56 0 23.31 32.63 0
Madagascar 166 41.84 67.33 2.43 0.53 92 7.75 0 37.08 0
Burundi 167 18.1 59.95 16.63 0 88 22.83 0 30.29 0
Eritrea 168 46.58 78.2 5.53 0 92 0 0 17.94 0
Bangladesh 169 54.87 13.83 22.56 0 92 22.83 0 39.68 0
Dem. Rep. Congo 170 11.04 56.26 4.39 0 58 26.24 0 44.85 0
Sudan 171 29.95 73.55 5.51 0 92 0 22.75 16.29 0
Liberia 172 35.4 67.33 11.22 0 96 20.58 30.5 4.13 0
Sierra Leone 173 11.55 67.33 4.77 0 56 18.52 26.94 23.54 0
Afghanistan 174 33.83 62.32 7.69 0 50 52.35 0 2.52 0
Lesotho 175 36.32 79.67 13.94 0.3 56 0 0 1.3 0
Haiti 176 33.13 69.67 8.37 0 52 23.64 0 1.09 0
Mali 177 9.7 67.33 8.19 0 58 0 0 14.3 0
Somalia 178 18.55 66.89 1.29 3.96 56 0 0 1.75 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment