Last active
March 23, 2017 13:35
-
-
Save mziembinski/5d51aecea7501de31113dc51612a9f2f to your computer and use it in GitHub Desktop.
Historia finałów WOŚP na wykresie w d3.js. History of fundrising results of Great Orchestra of Christmas as d3.js barchart.
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
var dataset; | |
//Define bar chart function | |
function barChart(dataset){ | |
//Set width and height as fixed variables | |
var w = 520; | |
var h = 300; | |
var padding = 25; | |
//var margin = {top: 20, right: 20, bottom: 70, left: 40}, | |
// width = 600 - margin.left - margin.right, | |
// height = 300 - margin.top - margin.bottom; | |
var imgUrl = "http://static.wosp.org.pl/trunk/files/images/common/header/logo.png" | |
//Scale function for axes and radius | |
var yScale = d3.scale.linear() | |
.domain([0,d3.max(dataset, function(d){return d.zebrano;})]) | |
.range([h-padding-5,padding]); | |
var xScale = d3.scale.ordinal() | |
.domain(dataset.map(function(d){ return d.Rok;})) | |
.rangeRoundBands([padding+10,w-padding],.1,.1); | |
// define the axis | |
var formatThs = d3.format(',.2f'); | |
//Create y axis | |
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10); | |
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickFormat(formatThs); | |
//Define key function | |
var key = function(d){return d.Rok}; | |
//Define tooltip for hover-over info windows | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
//Create svg element | |
var svg = d3.select("#WOSP-results").append("svg") | |
.attr("width", w+padding).attr("height", h+padding) | |
.attr("id", "chart"); | |
// define filling | |
console.log(xScale.rangeBand()); | |
svg.append("defs") | |
.append("pattern") | |
.attr("id", "heart") | |
.attr('patternUnits', 'userSpaceOnUse') | |
//.attr('patternContentUnits', 'objectBoundingBox') | |
.attr("width",xScale.rangeBand()+2) | |
.attr("height", xScale.rangeBand()+2) | |
.attr("x", +5) | |
.attr("y", +2) | |
.append("image") | |
.attr("xlink:href", imgUrl) | |
.attr("width",xScale.rangeBand()) | |
.attr("height", xScale.rangeBand()); | |
// add the SVG element - zebrano charts | |
svg.selectAll("rect") | |
.data(dataset, key) | |
.enter() | |
.append("rect") | |
.attr("class", "bar") | |
.attr({ | |
x: function(d){ | |
return xScale(d.Rok); | |
}, | |
y: function(d){ | |
return yScale(Math.max(0, d.zebrano)); | |
}, | |
width: xScale.rangeBand(), | |
height: function(d){ | |
return Math.abs(yScale(d.zebrano) - yScale(0)); | |
} | |
}) | |
.attr("fill", "url(#heart)") | |
.on('mouseover', function(d){ | |
d3.select(this) | |
.style("opacity", 0.2) | |
.style("stroke", "black") | |
var info = div | |
.style("opacity", 1) | |
.style("left", (d3.event.pageX+10) + "px") | |
.style("top", (d3.event.pageY-30) + "px") | |
.html('<strong>'+d.Rok+'</strong>'); | |
info.append("p") | |
.text(formatThs(d.zebrano) + ' mln PLN'); | |
}) | |
.on('mouseout', function(d){ | |
d3.select(this) | |
.style({'stroke-opacity':0.5,'stroke':'#a8a8a8'}) | |
.style("opacity",0.9); | |
div | |
.style("opacity", 0); | |
}); | |
//Add y-axis | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(40,0)") | |
.call(yAxis); | |
//Add x-axis | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (h - padding) + ")") | |
.call(xAxis) | |
.selectAll("text") | |
.style("text-anchor", "end") | |
.attr("dx", "-.8em") | |
.attr("dy", ".15em") | |
.attr("transform", "rotate(-65)");; | |
}; | |
//Load data and call bar chart function | |
d3.json("WOSP_results.json", function(error,data){ | |
if(error){ | |
console.log(error); | |
} | |
else{ | |
data.forEach(function(d) { | |
d.zebrano = parseFloat(d.zebrano)/1e6; | |
}); | |
dataset=data; | |
barChart(dataset); | |
} | |
}); |
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
var dataset; | |
//Define bar chart function | |
function barChart2(dataset){ | |
//Set width and height as fixed variables | |
var w2 = 520; | |
var h2 = 150; | |
var padding2 = 25; | |
//Scale function for axes and radius | |
var yScale2 = d3.scale.linear() | |
.domain(d3.extent(dataset, function(d){return d.wzrost;})) | |
.range([h2-padding2-5,padding2]); | |
var xScale2 = d3.scale.ordinal() | |
.domain(dataset.map(function(d){ return d.Rok;})) | |
.rangeRoundBands([padding2+10,w2-padding2],.2); | |
//To format axis as a percent | |
var formatPercent = d3.format("%1"); | |
var formatThs = d3.format(',.2f'); | |
//Create y axis | |
var yAxis2 = d3.svg.axis().scale(yScale2).orient("left").ticks(5).tickFormat(formatThs); | |
//Define key function | |
var key = function(d){return d.Rok}; | |
//Define tooltip for hover-over info windows | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
//Create svg element | |
var svg2 = d3.select("#WOSP-growth").append("svg") | |
.attr("width", w2-padding2).attr("height", h2-padding2) | |
.attr("id", "chart"); | |
// .attr("viewBox", "0 0 "+w+ " "+h) | |
// .attr("preserveAspectRatio", "xMinYMin"); | |
//Resizing function to maintain aspect ratio (uses jquery) | |
/* var aspect = w / h; | |
var chart = $("#chart"); | |
$(window).on("resize", function() { | |
var targetWidth = $("body").width(); | |
if(targetWidth<w){ | |
chart.attr("width", targetWidth); | |
chart.attr("height", targetWidth / aspect); | |
} | |
else{ | |
chart.attr("width", w); | |
chart.attr("height", w / aspect); | |
} | |
});*/ | |
//Initialize state of chart according to drop down menu | |
var state = d3.selectAll("option"); | |
//Create barchart | |
svg2.selectAll("rect") | |
.data(dataset, key) | |
.enter() | |
.append("rect") | |
.attr("class", function(d){return d.wzrost < 0 ? "negative" : "positive";}) | |
.attr({ | |
x: function(d){ | |
return xScale2(d.Rok); | |
}, | |
y: function(d){ | |
return yScale2(Math.max(0, d.wzrost)); | |
}, | |
width: xScale2.rangeBand(), | |
height: function(d){ | |
return Math.abs(yScale2(d.wzrost) - yScale2(0)); | |
} | |
}) | |
.on('mouseover', function(d){ | |
d3.select(this) | |
.style("opacity", 0.2) | |
.style("stroke", "black") | |
var info = div | |
.style("opacity", 1) | |
.style("left", (d3.event.pageX+10) + "px") | |
.style("top", (d3.event.pageY-30) + "px") | |
.html('<strong>'+d.Rok+'</strong>'); | |
if(state[0][0].selected){ | |
info.append("p") | |
.text(formatThs(d.wzrost) + ' mln PLN'); | |
} | |
else if(state[0][1].selected){ | |
info.append("p") | |
.text(formatPercent(d.wzrost_proc)); | |
} | |
}) | |
.on('mouseout', function(d){ | |
d3.select(this) | |
.style({'stroke-opacity':0.5,'stroke':'#a8a8a8'}) | |
.style("opacity",1); | |
div | |
.style("opacity", 0); | |
}); | |
//Add y-axis | |
svg2.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(40,0)") | |
.call(yAxis2); | |
//Sort data when sort is checked | |
d3.selectAll(".checkbox"). | |
on("change", function(){ | |
var x0 = xScale2.domain(dataset.sort(sortChoice()) | |
.map(function(d){return d.Rok})) | |
.copy(); | |
var transition = svg2.transition().duration(750); | |
var delay = function(d, i){return i*10;}; | |
transition.selectAll("rect") | |
.delay(delay) | |
.attr("x", function(d){return x0(d.Rok);}); | |
}) | |
//Function to sort data when sort box is checked | |
function sortChoice(){ | |
var state = d3.selectAll("option"); | |
var sort = d3.selectAll(".checkbox"); | |
if(sort[0][0].checked && state[0][0].selected){ | |
var out = function(a,b){return b.wzrost - a.wzrost;} | |
return out; | |
} | |
else if(sort[0][0].checked && state[0][1].selected){ | |
var out = function(a,b){return b.wzrost_proc - a.wzrost_proc;} | |
return out; | |
} | |
else{ | |
var out = function(a,b){return d3.ascending(a.Rok, b.Rok);} | |
return out; | |
} | |
}; | |
//Change data to correct values on input change | |
d3.selectAll("select"). | |
on("change", function() { | |
var value= this.value; | |
if(value=="procent"){ | |
var x_value = function(d){return d.wzrost_proc;}; | |
var color = function(d){return d.wzrost_proc < 0 ? "negative" : "positive";}; | |
var y_value = function(d){ | |
return yScale2(Math.max(0, d.wzrost_proc)); | |
}; | |
var height_value = function(d){ | |
return Math.abs(yScale2(d.wzrost_proc) - yScale2(0)); | |
}; | |
yAxis2.tickFormat(formatPercent); | |
} | |
else if(value=="wzrost"){ | |
var x_value = function(d){return d.wzrost;}; | |
var color = function(d){return d.wzrost < 0 ? "negative" : "positive";}; | |
var y_value = function(d){ | |
return yScale2(Math.max(0, d.wzrost)); | |
}; | |
var height_value = function(d){ | |
return Math.abs(yScale2(d.wzrost) - yScale2(0)); | |
}; | |
yAxis2.tickFormat(formatThs); | |
} | |
//Update y scale | |
yScale2.domain(d3.extent(dataset, x_value)); | |
//Update with correct data | |
var rect = svg2.selectAll("rect").data(dataset, key); | |
rect.exit().remove(); | |
//Transition chart to new data | |
rect | |
.transition() | |
.duration(2000) | |
.ease("linear") | |
.each("start", function(){ | |
d3.select(this) | |
.attr("width", "0.2") | |
.attr("class", color) | |
}) | |
.attr({ | |
x: function(d){ | |
return xScale2(d.Rok); | |
}, | |
y: y_value, | |
width: xScale2.rangeBand(), | |
height: height_value | |
}); | |
//Update y-axis | |
svg2.select(".y.axis") | |
.transition() | |
.duration(1000) | |
.ease("linear") | |
.call(yAxis2); | |
}); | |
}; | |
//Load data and call bar chart function | |
d3.json("WOSP_results.json", function(error,data){ | |
if(error){ | |
console.log(error); | |
} | |
else{ | |
data.forEach(function(d) { | |
d.wzrost = parseFloat(d.wzrost)/1e6; | |
d.wzrost_proc = parseFloat(d.wzrost_proc); | |
}); | |
dataset=data; | |
barChart2(dataset); | |
} | |
}); |
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<title>Wyniki WOSP - historia</title> | |
<link href="style.css" rel="stylesheet"> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
</head> | |
<body> | |
<h2>Wyniki finałów WOŚP</h2> | |
<div id ="WOSP-results"> | |
<h3>Kwota zebrana</h3> | |
<p>w mln PLN</p> | |
</div> | |
<div id ="WOSP-growth-conteiner"> | |
<br> | |
<h3>Zmiana względem roku poprzedniego</h3> | |
<div class ="description"> | |
<table> | |
<tr> | |
<td> | |
<select> | |
<option id="item" value="wzrost">Wzrost w mln PLN</option> | |
<option id="item" value="procent">Wzrost procentowo</option> | |
</select> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<ul> | |
<li><input type="checkbox" class="checkbox" name="check" value="sort"> </li> | |
<li>Sortuj</li> | |
</ul> | |
</div> | |
</td> | |
</tr> | |
</table> | |
</div> <!--description--> | |
<div id="WOSP-growth"></div> | |
</div> | |
<div id="annotation"> | |
</br> | |
<strong>Note:</strong> na podstawie danych <a href="http://www.wosp.org.pl/final/historia-finalow">WOŚP - Historia finałów</a> | |
W latach 1993-2010 kwota zebrana była podawana w USD. Na potrzeby prezentacji dane przeliczone wg <a href="http://www.nbp.pl/home.aspx?f=/statystyka/kursy.html">kursu NBP</a> z dnia następującego po finale. | |
</div> | |
</div> | |
<script type="text/javascript" src="d3_chart.js"></script> | |
<script type="text/javascript" src="d3_chart_wzrost.js"></script> | |
</body> | |
</html> |
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
body{ | |
font-family: sans-serif; | |
} | |
.bar{ | |
stroke:#a8a8a8; | |
} | |
.positive{ | |
fill: red; | |
fill-opacity: 0.9; | |
stroke:#a8a8a8; | |
} | |
.negative{ | |
fill: darkred; | |
fill-opacity: 0.9; | |
stroke:#a8a8a8; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 10px; | |
} | |
div.tooltip { | |
position: absolute; | |
text-align: center; | |
vertical-align: middle; | |
width: 150px; | |
height: 50px; | |
padding: 5px; | |
color: #000000; | |
font-size: 12px; | |
background: #FFF; | |
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
border: 2px; | |
border-radius: 8px; | |
pointer-events: none; | |
} | |
li{ | |
overflow:hidden; | |
display: inline-block; | |
} | |
ul{ | |
padding-left: 0; | |
padding-right: 0; | |
} | |
#WOSP-results{ | |
float:left; | |
} | |
#WOSP-growth-conteiner{ | |
clear: left; | |
} | |
#annotation{ | |
font-size: 10px; | |
} |
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
[{"data":"1993-01-03","final":"1. Finał WOŚP - 3 stycznia 1993 r.", | |
"kwota1":1535440.68,"waluta":" USD","kurs":1.5777,"zebrano":2422464.7608,"wzrost":0,"wzrost_proc":0,"Rok":1993}, | |
{"data":"1994-01-02","final":"2. Finał WOŚP - 2 stycznia 1994 r.", | |
"kwota1":1930726.93,"waluta":" USD","kurs":2.1412,"zebrano":4134072.5025,"wzrost":1711607.7417,"wzrost_proc":0.7066,"Rok":1994}, | |
{"data":"1995-01-08","final":"3. Finał WOŚP - 8 stycznia 1995 r.", | |
"kwota1":2816465.36,"waluta":" USD","kurs":2.4385,"zebrano":6867950.7804,"wzrost":2733878.2778,"wzrost_proc":0.6613,"Rok":1995}, | |
{"data":"1996-01-07","final":"4. Finał WOŚP - 7 stycznia 1996 r.", | |
"kwota1":2543413.59,"waluta":" USD","kurs":2.483,"zebrano":6315295.944,"wzrost":-552654.8364,"wzrost_proc":-0.0805,"Rok":1996}, | |
{"data":"1997-01-05","final":"5. Finał WOŚP - 5 stycznia 1997 r.", | |
"kwota1":3062067.29,"waluta":" USD","kurs":2.88,"zebrano":8818753.7952,"wzrost":2503457.8512,"wzrost_proc":0.3964,"Rok":1997}, | |
{"data":"1998-01-04","final":"6. Finał WOŚP - 4 stycznia 1998 r", | |
"kwota1":3543276.74,"waluta":" USD","kurs":3.5275,"zebrano":12498908.7003,"wzrost":3680154.9052,"wzrost_proc":0.4173,"Rok":1998}, | |
{"data":"1999-01-10","final":"7. Finał WOŚP - 10 stycznia 1999 r.", | |
"kwota1":4515020.82,"waluta":" USD","kurs":3.488,"zebrano":15748392.6202,"wzrost":3249483.9198,"wzrost_proc":0.26,"Rok":1999}, | |
{"data":"2000-01-09","final":"8. Finał WOŚP - 9 stycznia 2000 r.", | |
"kwota1":6089390.91,"waluta":" USD","kurs":4.062,"zebrano":24735105.8764,"wzrost":8986713.2563,"wzrost_proc":0.5706,"Rok":2000}, | |
{"data":"2001-01-07","final":"9. Finał WOŚP - 7 stycznia 2001 r.", | |
"kwota1":6112642.74,"waluta":" USD","kurs":4.0991,"zebrano":25056333.8555,"wzrost":321227.9791,"wzrost_proc":0.013,"Rok":2001}, | |
{"data":"2002-01-13","final":"10. Finał WOŚP - 13 stycznia 2002 r.", | |
"kwota1":6848998.85,"waluta":" USD","kurs":4.0116,"zebrano":27475443.7867,"wzrost":2419109.9311,"wzrost_proc":0.0965,"Rok":2002}, | |
{"data":"2003-01-12","final":"11. Finał WOŚP - 12 stycznia 2003 r.", | |
"kwota1":7695614.16,"waluta":" USD","kurs":3.8086,"zebrano":29309516.0898,"wzrost":1834072.3031,"wzrost_proc":0.0668,"Rok":2003}, | |
{"data":"2004-01-11","final":"12. Finał WOŚP - 11 stycznia 2004 r.", | |
"kwota1":6923443.22,"waluta":" USD","kurs":3.6456,"zebrano":25240104.6028,"wzrost":-4069411.4869,"wzrost_proc":-0.1388,"Rok":2004}, | |
{"data":"2005-01-09","final":"13. Finał WOŚP - 9 stycznia 2005 r.", | |
"kwota1":9864292.87,"waluta":" USD","kurs":3.1091,"zebrano":30669072.9621,"wzrost":5428968.3593,"wzrost_proc":0.2151,"Rok":2005}, | |
{"data":"2006-01-08","final":"14. Finał WOŚP - 8 stycznia 2006 r.", | |
"kwota1":9660691,"waluta":" USD","kurs":3.1228,"zebrano":30168405.8548,"wzrost":-500667.1073,"wzrost_proc":-0.0163,"Rok":2006}, | |
{"data":"2007-01-14","final":"15. Finał WOŚP - 14 stycznia 2007 r.", | |
"kwota1":9349814.65,"waluta":" USD","kurs":2.9918,"zebrano":27972775.4699,"wzrost":-2195630.3849,"wzrost_proc":-0.0728,"Rok":2007}, | |
{"data":"2008-01-13","final":"16. Finał WOŚP - 13 stycznia 2008 r.", | |
"kwota1":13883627.13,"waluta":" USD","kurs":2.4055,"zebrano":33397065.0612,"wzrost":5424289.5913,"wzrost_proc":0.1939,"Rok":2008}, | |
{"data":"2009-01-11","final":"17. Finał WOŚP - 11 stycznia 2009 r.", | |
"kwota1":11011771.01,"waluta":" USD","kurs":3.0183,"zebrano":33236828.4395,"wzrost":-160236.6217,"wzrost_proc":-0.0048,"Rok":2009}, | |
{"data":"2010-01-10","final":"18. Finał WOŚP - 10 stycznia 2010 r.", | |
"kwota1":14090521.06,"waluta":" USD","kurs":2.7983,"zebrano":39429505.0822,"wzrost":6192676.6427,"wzrost_proc":0.1863,"Rok":2010}, | |
{"data":"2011-01-09","final":"19. Finał WOŚP - 9 stycznia 2011 r.", | |
"kwota1":47248415.05,"waluta":" PLN","zadeklarowano":47248415.05,"zebrano":47248415.05,"wzrost":7818909.9678,"wzrost_proc":0.1983,"Rok":2011}, | |
{"data":"2012-01-09","final":"20. Finał WOŚP - 9 stycznia 2012 r.", | |
"kwota1":40269194.76,"kwota2":50638801.3,"waluta":" PLN","zadeklarowano":40269194.76,"zebrano":50638801.3,"wzrost":3390386.25,"wzrost_proc":0.0718,"Rok":2012}, | |
{"data":"2013-01-13","final":"21. Finał WOŚP - 13 stycznia 2013 r.", | |
"kwota1":39855148,"kwota2":50657747.68,"waluta":" PLN","zadeklarowano":39855148,"zebrano":50657747.68,"wzrost":18946.38,"wzrost_proc":0.0004,"Rok":2013}, | |
{"data":"2014-01-12","final":"22. Finał WOŚP - 12 stycznia 2014 r.", | |
"kwota1":35489737,"kwota2":52448765.49,"waluta":" PLN","zadeklarowano":35489737,"zebrano":52448765.49,"wzrost":1791017.81,"wzrost_proc":0.0354,"Rok":2014}, | |
{"data":"2015-01-11","final":"23. Finał WOŚP - 11 stycznia 2015 r.", | |
"kwota1":36228912,"kwota2":53109702.83,"waluta":" PLN","zadeklarowano":36228912,"zebrano":53109702.83,"wzrost":660937.34,"wzrost_proc":0.0126,"Rok":2015}, | |
{"data":"2016-01-10","final":"24. Finał WOŚP - 10 stycznia 2016 r.", | |
"kwota1":44047594,"kwota2":72696501.53,"waluta":" PLN","zadeklarowano":44047594,"zebrano":72696501.53,"wzrost":19586798.7,"wzrost_proc":0.3688,"Rok":2016}, | |
{"data":"2017-01-15","final":"25. Finał WOŚP - 15 stycznia 2017 r.", | |
"kwota1":62418767,"kwota2":105570801.49,"waluta":" PLN","zadeklarowano":62418767,"zebrano":105570801.49,"wzrost":32874299.96,"wzrost_proc":0.4522,"Rok":2017}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment