Built with blockbuilder.org
Last active
July 24, 2017 15:18
-
-
Save alansmithy/2fb6e0145e95cefa72b1e66de845e7ad to your computer and use it in GitHub Desktop.
Enzo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name | perc1 | perc2 | |
---|---|---|---|
A | 23.36 | 42.23 | |
B | 13.94 | 60.95 | |
C | 8.50 | 19.45 | |
D | 29.44 | 35.46 | |
E | 81.27 | 35.81 | |
F | 44.75 | 12.73 | |
G | 57.45 | 98.72 | |
H | 94.11 | 82.07 | |
I | 91.98 | 66.30 | |
J | 47.44 | 64.74 | |
K | 28.31 | 5.56 | |
L | 44.78 | 29.25 | |
M | 50.42 | 13.57 | |
N | 19.49 | 18.52 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name | perc1 | perc2 | |
---|---|---|---|
Enzo | 33.60 | 57.30 | |
Alvaro | 84.85 | 2.06 | |
Luis | 10.60 | 54.79 | |
D | 84.54 | 46.75 | |
E | 77.22 | 36.62 | |
F | 84.69 | 69.73 | |
G | 24.71 | 68.72 | |
H | 5.00 | 95.76 | |
I | 72.96 | 96.04 | |
J | 15.34 | 38.53 | |
K | 0.73 | 20.27 | |
L | 26.25 | 56.94 | |
M | 47.66 | 83.25 | |
N | 72.61 | 27.30 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
//don't do anything until you have loaded the data | |
d3.csv("ext-data.csv",function(data){ | |
//set the size and margins of the graphic and plot area | |
var w = 960; | |
var h = 500; | |
var margin={left:30,top:66,right:30,bottom:50} | |
var plotW = w-(margin.left+margin.right) | |
var plotH = h-(margin.top+margin.bottom) | |
//create the svg element - Scalable Vector Graphics | |
var svg = d3.select("body").append("svg") | |
.attr("width", w) | |
.attr("height", h) | |
//Create a title | |
svg.append("text") | |
.attr("id","infoText") | |
.attr("x",margin.left) | |
.attr("y",40) | |
.attr("font-family","Metric") | |
.attr("font-size","30px") | |
.text("What title do you want Gisella?") | |
//work out the maximum values (this is the long way around - d3 has a much quicker way of doing this) | |
var maxValue = 0; | |
var maxValue2 = 0; | |
data.forEach(function(d,i){ | |
maxValue = d3.max([maxValue,data[i].perc1]); | |
maxValue2 = d3.max([maxValue,data[i].perc2]); | |
}) | |
var highestMax = d3.max([maxValue,maxValue2]) | |
//create background rectangle in lovely FT pink | |
svg.append("rect") | |
.attr("x",margin.left) | |
.attr("y",margin.top) | |
.attr("width",plotW) | |
.attr("height",plotH) | |
.attr("fill","#fff1e0") | |
//create a chart 'group' element that is offset by the margins | |
var chart = svg.append("g") | |
.attr("transform","translate("+margin.left+","+margin.top+")") | |
//create a linear scale for the vertical axis - this maps the input values (the domain) to output pixels (the range) | |
var yScale = d3.scaleLinear() | |
.domain([0,highestMax]) | |
.range([plotH,0]) | |
//extract the names for the categories of each bar | |
var cats = data.map(function(d){return d.name}) | |
//use the category names to create a scale for the x axis - note this is different to to the yScale, which is Linear | |
var xScale = d3.scaleBand() | |
.domain(cats) | |
.range([0,plotW]) | |
.padding(0.2) | |
//create and append the xAxis | |
var xAxis = d3.axisBottom(xScale) | |
chart.append("g") | |
.attr("id","xAxis") | |
.attr("transform","translate(0,"+plotH+")") | |
.call(xAxis) | |
//create and append the yAxis | |
var yAxis = d3.axisLeft(yScale) | |
.ticks(7) | |
.tickSizeInner(-plotW) | |
chart.append("g") | |
.attr("id","yAxis") | |
.call(yAxis) | |
//finally - we can actually create the rectangles needed for the chart - notice that the geometry of the chart uses the xScale and yScale objects we have just created to put the chart in the right place | |
var rects = chart.append("g") | |
.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect") | |
.attr("fill","#bb6d82") | |
.attr("x",function(d){ | |
return xScale(d.name) | |
}) | |
.attr("width",xScale.bandwidth) | |
.attr("y",function(d){ | |
return yScale(d.perc1) | |
}) | |
.attr("height",function(d){ | |
return plotH-(yScale(d.perc1)) | |
}) | |
//create a circle - to be used for interactivity | |
chart.append("circle") | |
.attr("r",20) | |
.attr("cx",50) | |
.attr("cy",50) | |
.attr("fill","blue") | |
.on("mouseover",function(){ | |
rects.transition().duration(1000).attr("fill","blue") | |
}) | |
.on("mouseout",function(){ | |
rects.transition().duration(1000).attr("fill","#bb6d82") | |
}) | |
.on("click",function(){ | |
rects.transition() | |
.duration(1000) | |
.ease(d3.easeElastic) | |
.delay(function(d,i){ | |
//this delays each bar by 100 milliseconds | |
return i*100 | |
}) | |
.attr("y",function(d){ | |
//uses the alternative value (perc2) | |
return yScale(d.perc2) | |
}) | |
.attr("height",function(d){ | |
//uses the alternative value (perc2) | |
return plotH-(yScale(d.perc2)) | |
}) | |
}) | |
}) | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment