| license: mit |
This bar chart and pie chart was inspired by Number of Mortality Death in year of 2014 in US published by National Center for Health Statistics,
The Code of bar chart refers to CS573 Curran's bar chart sample
Built with blockbuilder.org
forked from loveice622's block: Number of Mortality Death in Year of 2014 in US
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { | |
| margin:0px; | |
| } | |
| .label { | |
| font-size: 10pt; | |
| font-family: 'sans-serif'; | |
| alignment-baseline: middle; | |
| fill: #ffffff; | |
| } | |
| .number, .subtitle { | |
| font-size: 10pt; | |
| font-family: 'sans-serif'; | |
| alignment-baseline: middle; | |
| fill: #890000; | |
| } | |
| .head { | |
| font-size: 20pt; | |
| font-family: 'Gill Sans MT'; | |
| alignment-baseline: middle; | |
| fill: #000000; | |
| } | |
| .subhead { | |
| font-size: 10pt; | |
| font-family: 'Gill Sans MT Condensed'; | |
| alignment-baseline: middle; | |
| fill: #000000; | |
| } | |
| .bar { | |
| fill: #db0049; | |
| } | |
| .arc text { | |
| font: 15px sans-serif; | |
| text-anchor: middle; | |
| fill: #ffffff; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| } | |
| </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', 'head') | |
| .attr('x', margin.left) | |
| .attr('y', 50) | |
| .text('Number of Mortality Death in Year of 2014 in US.'); | |
| svg.append('text') | |
| .attr('class', 'subhead') | |
| .attr('x', margin.left+4) | |
| .attr('y', 75) | |
| .text('Published by National Center for Health Statistics'); | |
| const g = svg.append('g') | |
| .attr('transform', `translate(${margin.left}, ${margin.top})`) | |
| const data = [ | |
| { | |
| name: "Total deaths", | |
| value: 319.048 | |
| }, | |
| { | |
| name: "Injury", | |
| value: 199.752 | |
| }, | |
| { | |
| name: "Poisoning", | |
| value: 51.966 | |
| }, | |
| { | |
| name: "Traffic", | |
| value: 33.736 | |
| }, | |
| { | |
| name: "Firearm", | |
| value: 33.594 | |
| } | |
| ]; | |
| 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', 5) | |
| .attr('y', yScale.bandwidth() / 2) | |
| .text(yValue); | |
| const percentFormat = d3.format(",.1%"); | |
| const xPercent = d => percentFormat(xValue(d) / xScale.domain()[1]); | |
| groupsEnter | |
| .append('text') | |
| .attr('class', 'number') | |
| .attr('x', d => xScale(xValue(d)) + 8) | |
| .attr('y', yScale.bandwidth() / 2) | |
| .text(d => `${xValue(d)} (${xPercent(d)})`); | |
| const dataPie = [ | |
| { | |
| name: "Injury", | |
| value: 199.752 | |
| }, | |
| { | |
| name: "Poisoning", | |
| value: 51.966 | |
| }, | |
| { | |
| name: "Traffic", | |
| value: 33.736 | |
| }, | |
| { | |
| name: "Firearm", | |
| value: 33.594 | |
| } | |
| ]; | |
| var svg2 = d3.select("svg"), | |
| radius = Math.min(width/2, height/2) / 2, | |
| g2 = svg2.append("g").attr("transform", `translate(${margin.left+600}, ${margin.top+250})`); | |
| var color = d3.scaleOrdinal(["#549687", "#696282", "#687787", "#476b60"]); | |
| var pie = d3.pie() | |
| .sort(null) | |
| .value(function(d) { return d.value; }); | |
| var path = d3.arc() | |
| .outerRadius(radius - 10) | |
| .innerRadius(0); | |
| var label = d3.arc() | |
| .outerRadius(radius - 50) | |
| .innerRadius(radius - 50); | |
| var arc = g2.selectAll(".arc") | |
| .data(pie(dataPie)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| arc.append("path") | |
| .attr("d", path) | |
| .attr("fill", function(d) { return color(d.data.name); }); | |
| arc.append("text") | |
| .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) | |
| .attr("dy", "0.35em") | |
| .text(function(d) { return d.data.name; }); | |
| </script> | |
| </body> |