Last active
October 3, 2018 15:07
-
-
Save fabiomainardi/2971d4ac0978634c3d15 to your computer and use it in GitHub Desktop.
Barchart with tooltips, sort function and radio group
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
| Rank | Country | Value | |
|---|---|---|---|
| 1 | Norway | 63909 | |
| 2 | Australia | 41524 | |
| 3 | Switzerland | 53762 | |
| 4 | Netherlands | 42397 | |
| 5 | United States | 52308 | |
| 6 | Germany | 43049 | |
| 7 | New Zealand | 32569 | |
| 8 | Canada | 41887 | |
| 9 | Singapore | 72371 | |
| 10 | Denmark | 42880 | |
| 11 | Ireland | 33414 | |
| 12 | Sweden | 43201 | |
| 13 | Iceland | 35116 | |
| 14 | United Kingdom | 35002 | |
| 15 | Hong Kong | 52383 | |
| 15 | Korea (Republic of) | 30345 | |
| 16 | Japan | 36747 | |
| 17 | Liechtenstein | 87085 | |
| 18 | Israel | 29966 | |
| 19 | France | 36629 | |
| 20 | Austria | 42930 | |
| 20 | Belgium | 39471 | |
| 20 | Luxembourg | 58695 | |
| 21 | Finland | 37366 | |
| 22 | Slovenia | 26809 | |
| 23 | Italy | 32669 | |
| 24 | Spain | 30561 | |
| 25 | Czech Republic | 24535 | |
| 26 | Greece | 24658 | |
| 27 | Brunei Darussalam | 70883 | |
| 28 | Qatar | 119029 | |
| 29 | Cyprus | 26771 | |
| 30 | Estonia | 23387 | |
| 31 | Saudi Arabia | 52109 | |
| 32 | Lithuania | 23740 | |
| 32 | Poland | 21487 | |
| 33 | Andorra | 40597 | |
| 33 | Slovakia | 25336 | |
| 34 | Malta | 27022 | |
| 35 | United Arab Emirates | 58068 | |
| 36 | Chile | 20804 | |
| 36 | Portugal | 24130 | |
| 37 | Hungary | 21239 | |
| 38 | Bahrain | 32072 | |
| 38 | Cuba | 19844 | |
| 39 | Kuwait | 85820 | |
| 40 | Croatia | 19025 | |
| 41 | Latvia | 22186 | |
| 42 | Argentina | 17297 |
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| position: relative; | |
| width: 960px; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar { | |
| fill: steelblue; | |
| fill-opacity: .9; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| label { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| } | |
| rect:hover { | |
| fill: yellow; | |
| } | |
| rect { | |
| -moz-transition: all 0.3s; | |
| -o-transition: all 0.3s; | |
| -webkit-transition: all 0.3s; | |
| transition: all 0.3s; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| width: 220px; | |
| height: auto; | |
| padding: 10px; | |
| background-color: #aec; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| pointer-events: none; | |
| } | |
| #tooltip.hidden { | |
| display: none; | |
| } | |
| #tooltip p { | |
| margin: 0; | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| </style> | |
| <label><input id='sort' type="checkbox" align='right'> Sort values</label> | |
| <div id="tooltip" class="hidden"> | |
| <p><strong id="country">Country </strong></p> | |
| <p><span id="rank">Rank </span></p> | |
| <p><span id="value">Value</span></p> | |
| </div> | |
| <div id="types"> | |
| <form action=""> | |
| <input id="radio1" type="radio" name="group" value="Life"/> Life Expectancy<br> | |
| <input id="radio2" type="radio" name="group" value="School"/> Mean Years of schooling<br> | |
| <input id="radio3" type="radio" name="group" value="GNI"/> Gross National Income per capita<br> | |
| </form> | |
| </div> | |
| <div id="tooltip" class="hidden"> | |
| <p><strong>Human Development Index:</strong></p> | |
| <p><span id="value">100</span>%</p> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script> | |
| var Unit;//string for the units in toolptips | |
| var Label; | |
| var Dataset; | |
| var InputFileName; | |
| var margin = {top: 20, right: 20, bottom: 180, left: 100}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var format = d3.format(".0"); | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1, 1); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickFormat(format); | |
| 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 + ")"); | |
| //Default Values | |
| Unit=' years'; | |
| Label='Life Expectancy: '; | |
| InputFileName="LifeExp-VeryHigh.csv"; | |
| if(document.getElementById('radio1').checked){ | |
| Unit=' years'; | |
| Label='Life Expectancy: '; | |
| InputFileName='LifeExp-VeryHigh.csv';} | |
| if(document.getElementById('radio2').checked){ | |
| Unit=' years'; | |
| Label='Schooling: '; | |
| InputFileName='School-VeryHigh.csv';} | |
| if(document.getElementById('radio3').checked){ | |
| Label='GNI per capita: '; | |
| Unit=' PPP$'; | |
| InputFileName='GNI-VeryHigh.csv';} | |
| document.getElementById('radio1').checked=true; | |
| d3.csv(InputFileName, function(error, data) { | |
| data.forEach(function(d) { | |
| d.Value = +d.Value; | |
| }); | |
| Dataset=data; | |
| x.domain(data.map(function(d) { return d.Country; })); | |
| y.domain([0, d3.max(data, function(d) { return d.Value; })]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("text-anchor", "end") | |
| .attr("dx", "-.5em") | |
| .attr("dy", "-.9em") | |
| .attr("transform", function(d) { | |
| return "rotate(-90)" | |
| }); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Value"); | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.Country); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.Value); }) | |
| .attr("height", function(d) { return height - y(d.Value); }) | |
| .on("mouseover", function(d) { | |
| //Get this bar's x/y values, then augment for the tooltip | |
| var xPosition = parseFloat(d3.select(this).attr("x")) ; | |
| var yPosition = parseFloat(d3.select(this).attr("y")) ; | |
| //Update the tooltip position and value | |
| d3.select("#tooltip") | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .select("#value") | |
| .text(Label+d.Value+Unit); | |
| d3.select("#tooltip") | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .select("#rank") | |
| .text("HDI Rank: "+d.Rank) | |
| d3.select("#tooltip") | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .select("#country") | |
| .text("Country: "+d.Country) | |
| //Show the tooltip | |
| d3.select("#tooltip").classed("hidden", false); | |
| }) | |
| .on("mouseout", function() { | |
| //Hide the tooltip | |
| d3.select("#tooltip").classed("hidden", true); | |
| }) | |
| //.append("title") | |
| //.text(function(d) { | |
| // return 'HDI Rank:'+d.Rank+' Value:'+d.Value; | |
| // }); | |
| d3.selectAll("input").on("change", change); | |
| d3.select("#sort").on("change", sort); | |
| var sortTimeout = setTimeout(function() { | |
| d3.select("#sort").property("checked", true).each(change); | |
| }, 2000); | |
| //Action when radiobutton status is changed | |
| function change() { | |
| //update status and filename | |
| document.getElementById('sort').checked=false; | |
| if(document.getElementById('radio1').checked){ | |
| Unit=' years'; | |
| Label='Life Expectancy: '; | |
| InputFileName='LifeExp-VeryHigh.csv';} | |
| if(document.getElementById('radio2').checked){ | |
| Unit=' years'; | |
| Label='Schooling: '; | |
| InputFileName='School-VeryHigh.csv';} | |
| if(document.getElementById('radio3').checked){ | |
| Label='GNI per capita: '; | |
| Unit=' PPP$'; | |
| InputFileName='GNI-VeryHigh.csv';} | |
| //if(document.getElementById('radio4').checked){ | |
| //InputFileName='HDI-Low.csv';} | |
| //change dataset | |
| d3.selectAll("svg").remove(); | |
| 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(InputFileName, function(error, data) { | |
| data.forEach(function(d) { | |
| d.Value = +d.Value; | |
| }); | |
| Dataset=data; | |
| x.domain(data.map(function(d) { return d.Country; })); | |
| y.domain([0, d3.max(data, function(d) { return d.Value; })]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("text-anchor", "end") | |
| .attr("dx", "-.5em") | |
| .attr("dy", "-.9em") | |
| .attr("transform", function(d) { | |
| return "rotate(-90)" | |
| }); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Value"); | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.Country); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.Value); }) | |
| .attr("height", function(d) { return height - y(d.Value); }) | |
| .on("mouseover", function(d) { | |
| var xPosition = parseFloat(d3.select(this).attr("x")); | |
| var yPosition = parseFloat(d3.select(this).attr("y")); | |
| d3.select("#tooltip") | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .select("#value") | |
| .text(Label+d.Value+Unit); | |
| d3.select("#tooltip") | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .select("#rank") | |
| .text("HDI Rank: "+d.Rank) | |
| d3.select("#tooltip") | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .select("#country") | |
| .text("Country: "+d.Country) | |
| //Show the tooltip | |
| d3.select("#tooltip").classed("hidden", false); | |
| }) | |
| .on("mouseout", function() { | |
| //Hide the tooltip | |
| d3.select("#tooltip").classed("hidden", true); | |
| }) | |
| }); | |
| }; | |
| //SORTING | |
| function sort(){ | |
| data=Dataset; | |
| var x0 = x.domain(data.sort(this.checked | |
| ? function(a, b) { return b.Value - a.Value; } | |
| : function(a, b) { return a.Rank-b.Rank; }) | |
| .map(function(d) { return d.Country; })) | |
| .copy(); | |
| svg.selectAll(".bar") | |
| .sort(function(a, b) { return x0(a.Country)-x0(b.Country); }); | |
| var transition = svg.transition().duration(750), | |
| delay = function(d, i) { return i * 50; }; | |
| transition.selectAll(".bar") | |
| .delay(delay) | |
| .attr("x", function(d) { return x0(d.Country); }); | |
| transition.select(".x.axis") | |
| .call(xAxis) | |
| .selectAll("g") | |
| .delay(delay) | |
| .selectAll("text") | |
| .style("text-anchor", "end") | |
| .attr("dx", "-.5em") | |
| .attr("dy", "-.9em") | |
| .attr("transform", function(d) { | |
| return "rotate(-90)" | |
| }); | |
| }; | |
| }); | |
| </script> |
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
| Rank | Country | Value | |
|---|---|---|---|
| 1 | Norway | 81.5 | |
| 2 | Australia | 82.5 | |
| 3 | Switzerland | 82.6 | |
| 4 | Netherlands | 81.0 | |
| 5 | United States | 78.9 | |
| 6 | Germany | 80.7 | |
| 7 | New Zealand | 81.1 | |
| 8 | Canada | 81.5 | |
| 9 | Singapore | 82.3 | |
| 10 | Denmark | 79.4 | |
| 11 | Ireland | 80.7 | |
| 12 | Sweden | 81.8 | |
| 13 | Iceland | 82.1 | |
| 14 | United Kingdom | 80.5 | |
| 15 | Hong Kong | 83.4 | |
| 15 | Korea (Republic of) | 81.5 | |
| 16 | Japan | 83.6 | |
| 17 | Liechtenstein | 79.9 | |
| 18 | Israel | 81.8 | |
| 19 | France | 81.8 | |
| 20 | Austria | 81.1 | |
| 20 | Belgium | 80.5 | |
| 20 | Luxembourg | 80.5 | |
| 21 | Finland | 80.5 | |
| 22 | Slovenia | 79.6 | |
| 23 | Italy | 82.4 | |
| 24 | Spain | 82.1 | |
| 25 | Czech Republic | 77.7 | |
| 26 | Greece | 80.8 | |
| 27 | Brunei Darussalam | 78.5 | |
| 28 | Qatar | 78.4 | |
| 29 | Cyprus | 79.8 | |
| 30 | Estonia | 74.4 | |
| 31 | Saudi Arabia | 75.5 | |
| 32 | Lithuania | 72.1 | |
| 32 | Poland | 76.4 | |
| 33 | Andorra | 81.2 | |
| 33 | Slovakia | 75.4 | |
| 34 | Malta | 79.8 | |
| 35 | United Arab Emirates | 76.8 | |
| 36 | Chile | 80.0 | |
| 36 | Portugal | 79.9 | |
| 37 | Hungary | 74.6 | |
| 38 | Bahrain | 76.6 | |
| 38 | Cuba | 79.3 | |
| 39 | Kuwait | 74.3 | |
| 40 | Croatia | 77.0 | |
| 41 | Latvia | 72.2 | |
| 42 | Argentina | 76.3 |
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
| Rank | Country | Value | |
|---|---|---|---|
| 1 | Norway | 12.6 | |
| 2 | Australia | 12.8 | |
| 3 | Switzerland | 12.2 | |
| 4 | Netherlands | 11.9 | |
| 5 | United States | 12.9 | |
| 6 | Germany | 12.9 | |
| 7 | New Zealand | 12.5 | |
| 8 | Canada | 12.3 | |
| 9 | Singapore | 10.2 | |
| 10 | Denmark | 12.1 | |
| 11 | Ireland | 11.6 | |
| 12 | Sweden | 11.7 | |
| 13 | Iceland | 10.4 | |
| 14 | United Kingdom | 12.3 | |
| 15 | Hong Kong | 10.0 | |
| 15 | Korea (Republic of) | 11.8 | |
| 16 | Japan | 11.5 | |
| 17 | Liechtenstein | 10.3 | |
| 18 | Israel | 12.5 | |
| 19 | France | 11.1 | |
| 20 | Austria | 10.8 | |
| 20 | Belgium | 10.9 | |
| 20 | Luxembourg | 11.3 | |
| 21 | Finland | 10.3 | |
| 22 | Slovenia | 11.9 | |
| 23 | Italy | 10.1 | |
| 24 | Spain | 9.6 | |
| 25 | Czech Republic | 12.3 | |
| 26 | Greece | 10.2 | |
| 27 | Brunei Darussalam | 8.7 | |
| 28 | Qatar | 9.1 | |
| 29 | Cyprus | 11.6 | |
| 30 | Estonia | 12.0 | |
| 31 | Saudi Arabia | 8.7 | |
| 32 | Lithuania | 12.4 | |
| 32 | Poland | 11.8 | |
| 33 | Andorra | 10.4 | |
| 33 | Slovakia | 11.6 | |
| 34 | Malta | 9.9 | |
| 35 | United Arab Emirates | 9.1 | |
| 36 | Chile | 9.8 | |
| 36 | Portugal | 8.2 | |
| 37 | Hungary | 11.3 | |
| 38 | Bahrain | 9.4 | |
| 38 | Cuba | 10.2 | |
| 39 | Kuwait | 7.2 | |
| 40 | Croatia | 11.0 | |
| 41 | Latvia | 11.5 | |
| 42 | Argentina | 9.8 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment