Built with blockbuilder.org
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.
forked from tizon9804's block: 3D EPI Data Visual analitycs
xxxxxxxxxx
<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;
}
</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: 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 = {};
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)
.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", "none");
foreground.style("display",selectedCountry);
//path(selectedCountry).stroke("steelblue");
//var fs = d3.select("#selectedName").append("p").text(selectedCountry["Country"]);
//var actives = dimensions.filter(function(p) { return y[selectedCountry];});
// foreground.style("display", function(d) {
// return actives;
//});
//foreground.style("display", function(d) {
// return dimensions.filter(function(p) { return y[selectedCountry]; });
//}) ;
//path(selectedCountry).attr("class", "foreground");
// foreground(path(selectedCountry));
// d3.select("#selectedName").append("p").text(selectedCountry["Country"]);
}
// 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) { 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("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
// 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>
https://d3js.org/d3.v3.min.js