Skip to content

Instantly share code, notes, and snippets.

@mziembinski
Last active March 23, 2017 13:35
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 mziembinski/5d51aecea7501de31113dc51612a9f2f to your computer and use it in GitHub Desktop.
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.
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);
}
});
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);
}
});
<!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>
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;
}
[{"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