| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <!-- load local CSS --> | |
| <link rel="stylesheet" href="style.css"> | |
| <script type="text/javascript"> | |
| function draw(data) { | |
| const d = data['content'] | |
| .map(({brand, share}) => ({name: brand, value: share})) | |
| .sort((a, b) => b.value - a.value) // decreasing | |
| var margin = 75, | |
| width = 800 - 2 * margin, | |
| height = 600 - 2 * margin; | |
| const x = d3.scaleBand() | |
| .range([0, width]) | |
| .domain(d.map(s => s.name)) | |
| .padding(0.4); | |
| const y = d3.scaleLinear() | |
| .range([height, 0]) | |
| .domain([0, d3.max(d, function(s){return s.value;})]) | |
| .nice(); | |
| xAxis = g => g | |
| .attr("transform", `translate(0,${height})`) | |
| .call(d3.axisBottom(x) | |
| .tickSizeOuter(0)) | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width + margin) | |
| .attr("height", height + margin) | |
| .attr('transform', `translate(${margin / 2}, ${margin / 2})`) | |
| .append('g') | |
| .attr('class','chart'); | |
| const barGroups = svg.selectAll() | |
| .data(d) | |
| .enter() | |
| .append("g") | |
| barGroups | |
| .append('rect') | |
| .attr('class', s => {return s.name !== 'Apple' ? 'bar' : 'highlight-bar'}) | |
| .attr("x", s => x(s.name)) | |
| .attr("y", s => y(s.value)) | |
| .attr("height", d => y(0) - y(d.value)) | |
| .attr("width", x.bandwidth()); | |
| barGroups | |
| .append('text') | |
| .attr('class', s => {return s.name !== 'Apple' ? 'value' : 'highlight-value'}) | |
| .attr('x', s => x(s.name) + x.bandwidth() / 2) | |
| .attr('y', s => y(s.value) + 20) | |
| // only add text for values greater than 0 | |
| .text(s => {return s.value !== 0 ? `${s.value}%` : ''}) | |
| // X-Axis | |
| svg | |
| .append("g") | |
| .attr('class', 'axis') | |
| .call(xAxis) | |
| .selectAll("text") | |
| .attr('class', 'xtick-label') | |
| //.attr("dx", "-.8em") | |
| //.attr("dy", ".15em") | |
| //.attr("transform", "rotate(30)"); | |
| // Title | |
| svg | |
| .append('text') | |
| .attr('class', 'title') | |
| .attr('x', width / 2) | |
| .attr('y', 20) | |
| .text('U.S. SmartPhone Marketshare') | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| /* | |
| Use D3 to load json file and pass | |
| the contents to the draw function. | |
| Applied d3 V5 load changes | |
| */ | |
| d3.json("market-share.json") | |
| .then(draw); | |
| </script> | |
| </body> | |
| </html> |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| path { | |
| stroke: #607d8b; | |
| } | |
| line { | |
| stroke: #607d8b; | |
| } | |
| .bar { | |
| fill: #4fc3f7; | |
| } | |
| .highlight-bar { | |
| fill: #e4405f; | |
| } | |
| text.value { | |
| font-size: 12px; | |
| text-anchor: middle; | |
| fill: white; | |
| } | |
| text.highlight-value { | |
| font-size: 12px; | |
| text-anchor: middle; | |
| fill: #131418; | |
| } | |
| text.label { | |
| font-size: 14px; | |
| text-anchor: middle; | |
| fill: #37474f; | |
| } | |
| text.xtick-label { | |
| text-anchor: middle; | |
| fill: #37474f; | |
| } | |
| text.title { | |
| font-size: 22px; | |
| font-weight: 600; | |
| text-anchor: middle; | |
| fill: #263238; | |
| } |
