Skip to content

Instantly share code, notes, and snippets.

@CDEdata

CDEdata/README.md

Last active September 5, 2016 07:59
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 CDEdata/2b4f4cf295f502b596646ad64432d3f7 to your computer and use it in GitHub Desktop.
Save CDEdata/2b4f4cf295f502b596646ad64432d3f7 to your computer and use it in GitHub Desktop.
Download ZIP
Quality of Investment (meso Scale)
Raw
README.md

This visualisation is based on Nick Strayer’s Block - Aster Plot http://bl.ocks.org/nstrayer/c6576b5b236f7f73cf8b

  1. Download http://brackets.io / install and start Brackets
  2. Create a new file, copy paste the index.html from below and save it as index.html
  3. Create another new file, copy paste the example1.csv from below and save it as example1.csv in the same folder as you saved index.html before
  4. Adjust the data in example1.csv for other projects

Description of example1.csv: "id", "order", defines the order in the circle, starting on the top right corner "score", is the percentage score of the dimension (100%=25) "weight", is the weight of the dimension, here equals 1 because the are equally important (all have 25 as maxScore) "color"," define the color of the dimensions label" is displayed when hovering over the dimensions

Raw
example1.csv
id order score weight color label
Env 1 83 1 #0DD87A Environment Impacts
Eco 3 51 1 #00ACB8 Economic Impacts
Soc 2 44 1 #E33143 Social Impacts
Com 4 89 1 #FFD34A Compliance
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.solidArc:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
.solidArc {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.x.axis path {
display: none;
}
.aster-score {
line-height: 1;
font-weight: bold;
font-size: 500%;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var width = 500,
height = 500,
radius = Math.min(width, height) / 2,
innerRadius = 0.3 * radius;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.width; });
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.html(function(d) {
return "Overall Score of</br>" + d.data.label + ": </br><span style='color:orangered'>" + d.data.score + "</span>";
});
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function (d) {
return (radius - innerRadius) * (d.data.score / 100.0) + innerRadius;
});
var outlineArc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.call(tip);
d3.csv('example1.csv', function(error, data) {
data.forEach(function(d) {
d.id = d.id;
d.order = +d.order;
d.color = d.color;
d.weight = +d.weight;
d.score = +d.score;
d.width = +d.weight;
d.label = d.label;
});
// for (var i = 0; i < data.score; i++) { console.log(data[i].id) }
var path = svg.selectAll(".solidArc")
.data(pie(data))
.enter().append("path")
.attr("fill", function(d) { return d.data.color; })
.attr("class", "solidArc")
.attr("stroke", "gray")
.attr("d", arc)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
var outerPath = svg.selectAll(".outlineArc")
.data(pie(data))
.enter().append("path")
.attr("fill", "none")
.attr("stroke", "gray")
.attr("class", "outlineArc")
.attr("d", outlineArc);
// calculate the weighted mean score
var score =
data.reduce(function(a, b) {
//console.log('a:' + a + ', b.score: ' + b.score + ', b.weight: ' + b.weight);
return a + (b.score * b.weight);
}, 0) /
data.reduce(function(a, b) {
return a + b.weight;
}, 0);
svg.append("svg:text")
.attr("class", "aster-score")
.attr("dy", ".35em")
.attr("text-anchor", "middle") // text-align: right
.text(Math.round(score));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment