This is a bar chart about Overwatch top offense hero pick rate in September. It is inspired by Overbuff Statistics. And the original visualization code is copied from Extremist Murders in the US.
Built with blockbuilder.org
Last active
October 10, 2017 15:00
-
-
Save FanYang715/252508c60ecb868871e044d2d7616492 to your computer and use it in GitHub Desktop.
Overwatch Top Offense Hero Pick Rate in Septemper 2017
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
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { | |
| margin:0px; | |
| } | |
| .label { | |
| font-size: 23pt; | |
| font-family: 'Verdana'; | |
| alignment-baseline: middle; | |
| fill: white; | |
| } | |
| .number, .subtitle { | |
| font-size: 21pt; | |
| font-family: 'Verdana'; | |
| alignment-baseline: middle; | |
| fill: #002560; | |
| } | |
| .bar { | |
| fill: #002560; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const width = 960; | |
| const height = 500; | |
| const margin = { | |
| left: 50, | |
| right: 200, | |
| top: 90, | |
| bottom: 52 | |
| } | |
| const svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append('text') | |
| .attr('class', 'subtitle') | |
| .attr('x', margin.left) | |
| .attr('y', 79) | |
| .text('Overwatch Top Offense Hero Pick Rate in Septemper 2017.'); | |
| const g = svg.append('g') | |
| .attr('transform', `translate(${margin.left}, ${margin.top})`) | |
| const data = [ | |
| { | |
| name: "Soldier: 76", | |
| value: 20.07 | |
| }, | |
| { | |
| name: "Genji", | |
| value: 17.31 | |
| }, | |
| { | |
| name: "McCree", | |
| value: 15.51 | |
| }, | |
| { | |
| name: "Pharah", | |
| value: 14.87 | |
| } | |
| ]; | |
| const innerWidth = width - margin.left - margin.right; | |
| const innerHeight = height - margin.top - margin.bottom; | |
| const xValue = d => d.value; | |
| const yValue = d => d.name; | |
| const xScale = d3.scaleLinear() | |
| .domain([0, d3.max(data, xValue)]) | |
| .range([0, innerWidth]); | |
| const yScale = d3.scaleBand() | |
| .domain(data.map(yValue).reverse()) | |
| .range([innerHeight, 0]) | |
| .padding(0.272); | |
| const groups = g.selectAll('g').data(data); | |
| const groupsEnter = groups | |
| .enter().append('g') | |
| .attr('transform', d => `translate(0, ${yScale(yValue(d))})`); | |
| groupsEnter | |
| .append('rect') | |
| .attr('class', 'bar') | |
| .attr('width', d => xScale(xValue(d))) | |
| .attr('height', yScale.bandwidth()) | |
| .attr('fill', 'black'); | |
| groupsEnter | |
| .append('text') | |
| .attr('class', 'label') | |
| .attr('x', 15) | |
| .attr('y', yScale.bandwidth() / 2) | |
| .text(yValue); | |
| const percentFormat = d3.format(",.2%"); | |
| const xPercent = d => percentFormat(xValue(d) / 100); | |
| groupsEnter | |
| .append('text') | |
| .attr('class', 'number') | |
| .attr('x', d => xScale(xValue(d)) + 10) | |
| .attr('y', yScale.bandwidth() / 2) | |
| .text(d => `${xPercent(d)}`); | |
| saveAs(model-js); | |
| </script> | |
| </body> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment