Last active
April 18, 2016 11:48
-
-
Save fernandojunior/9b008c9c95ae4d4ad15b543a193464f9 to your computer and use it in GitHub Desktop.
Games market
This file contains hidden or 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 hidden or 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> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6" id="chart"></div> | |
| <div class="col-md-6" id="legends"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <hr/> | |
| <header> | |
| <div class="container"> | |
| <h1>Worldwide digital games market: 2015 total</h1> | |
| <h2>Top Grossing PC Games by Revenue, 2015 (mil $)</h2> | |
| </div> | |
| </header> | |
| <footer class="footer"> | |
| <div class="container"> | |
| Data from | |
| <a href="https://www.superdataresearch.com/">Superdata Research</a> | |
| (January 26, 2016) | |
| </div> | |
| </footer> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="script.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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 = [ | |
| { name: 'League of Legends', value: 1628 }, | |
| { name: 'CrossFire', value: 1110 }, | |
| { name: 'Dungeon Fighter Online', value: 1052 }, | |
| { name: 'World of Warcraft', value: 814 }, | |
| { name: 'World of Tanks', value: 446 }, | |
| { name: 'Lineage I', value: 339 }, | |
| { name: 'Maplestory', value: 253 }, | |
| { name: 'DOTA 2', value: 238 }, | |
| { name: 'CounterStrike: Global Offensive', value: 221 }, | |
| { name: 'Grand Theft Auto V', value: 205 } | |
| ]; | |
| var total = d3.sum(dataset.map(function(datum) { | |
| return datum.value; | |
| })); | |
| dataset.forEach(function (datum) { | |
| datum.percent = Math.round(100 * datum.value / total); | |
| }) | |
| var chartSize = 500; | |
| var chartRadius = chartSize / 2; | |
| // https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors | |
| var color = d3.scale.category20b(); | |
| var chart = d3.select('#chart') | |
| .append('svg') | |
| .attr({width: chartSize, height: chartSize}) | |
| .append('g') | |
| .attr('transform', 'translate(' + chartRadius + ',' + chartRadius + ')'); | |
| var pie = d3.layout.pie() | |
| .value(function(datum) { return datum.value; }); | |
| var path = chart.selectAll('path') | |
| .data(pie(dataset)) | |
| .enter() | |
| .append('path') | |
| .attr('d', d3.svg.arc().outerRadius(chartRadius)) | |
| .attr('fill', function(datum) { | |
| return color(datum.data.name); | |
| }); | |
| var legendSize = chartSize / 10 * 0.9; | |
| var legendSpacing = chartSize / 10 * 0.1; | |
| var legendsSize = dataset.length * (legendSize + legendSpacing); | |
| var legends = d3.select('#legends') | |
| .append('svg') | |
| .attr({width: legendsSize, height: legendsSize}) | |
| .append('g') | |
| .attr('transform', 'translate(0, 0)'); | |
| var legend = legends.selectAll('g') | |
| .data(color.domain()) | |
| .enter() | |
| .append('g') | |
| .attr('transform', function(datum, i) { | |
| var x = 0; | |
| var y = i * (legendSize + legendSpacing); | |
| return 'translate(' + x + ',' + y + ')'; | |
| }); | |
| legend.append('rect') | |
| .attr({width: legendSize, height: legendSize, fill: color}); | |
| legend.append('text') | |
| .attr({x: legendSize + legendSpacing, y: (legendSize/2) + 4}) | |
| .text(function(datum) { return datum; }); | |
| var tooltip = d3.select('#chart') | |
| .append('div') | |
| .style({ | |
| display: 'none', | |
| background: '#eee', | |
| color: '#333', | |
| padding: '10px', | |
| position: 'absolute', | |
| }); | |
| tooltip.append('div') | |
| .attr('class', 'name'); | |
| tooltip.append('div') | |
| .attr('class', 'value'); | |
| tooltip.append('div') | |
| .attr('class', 'percent'); | |
| path.on('mouseover', function(datum) { | |
| tooltip.select('.name').html(datum.data.name); | |
| tooltip.select('.value').html('$' + datum.data.value); | |
| tooltip.select('.percent').html(datum.data.percent + '%'); | |
| tooltip.style('display', 'block'); | |
| }); | |
| path.on('mousemove', function () { | |
| var coordinates = d3.mouse(this); | |
| var x = coordinates[0] + chartSize / 2 + 20; | |
| var y = coordinates[1] + chartSize / 2 + 20; | |
| tooltip.style({'left': x + 'px', 'top': y + 'px'}); | |
| }) | |
| chart.on('mouseout', function() { | |
| tooltip.style('display', 'none'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment