Last active
August 12, 2018 10:15
-
-
Save stianSjoli/c4d357d8ceefd66ba2e37fb297c75f2b to your computer and use it in GitHub Desktop.
Donut chart of perished big predators in Norway. From data, published 21th of June 2018, statistisk sentralbyrå
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" /> | |
| <title>D3 V4 Playground</title> | |
| <style> | |
| text{ | |
| font-family: "Open Sans" | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"><\/script> | |
| <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /> | |
| <style> | |
| text{ | |
| font-family: "Open Sans" | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| </body> | |
| <script> | |
| var data = [ | |
| {animal:"Bjørn", count:9}, | |
| {animal:"Ulv", count:31}, | |
| {animal:"Jerv", count:84}, | |
| {animal:"Gaupe", count:55} | |
| ]; | |
| var height = 500; | |
| var width = 500; | |
| var totalAnimals = d3.sum(data, function(d){ | |
| return d.count; | |
| }); | |
| var colorPalette = d3.scaleOrdinal() | |
| .range(["brown", | |
| "#787878", | |
| "#494847", "#9F8170"]) | |
| var outerRadius = 250; | |
| var innerRadius = outerRadius - (outerRadius * 1/3); | |
| var arc = d3.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| var label = d3.arc() | |
| .outerRadius(outerRadius) | |
| .innerRadius(innerRadius - 20); | |
| var pie = d3.pie() | |
| .padAngle(0.02) | |
| .sort(null) | |
| .value(function(d){ | |
| return d.count; | |
| }); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| var arcs = svg.selectAll("g.arc") | |
| .data(pie(data)) | |
| .enter() | |
| .append("g") | |
| .classed("arc", true) | |
| arcs.attr("transform", | |
| "translate(" + outerRadius + ", " + outerRadius + ")") | |
| .append("path") | |
| .attr("fill", function(d,i){ | |
| return colorPalette(i); | |
| }) | |
| .attr("d", arc); | |
| arcs.append("g") | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("font-size", "22px") | |
| .attr("fill", "lightgrey") | |
| .attr("transform", function(d){ | |
| return "translate(" + label.centroid(d) + ")"; | |
| }) | |
| .attr("dy", "-0.15em") | |
| .text(function(d){ | |
| return d.data.animal; | |
| }) | |
| arcs.append("g") | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("font-size", "26px") | |
| .attr("fill", "lightgrey") | |
| .attr("transform", function(d){ | |
| return "translate(" + label.centroid(d) + ")"; | |
| }) | |
| .attr("dy", "0.9em") | |
| .text(function(d){ | |
| return d.data.count; | |
| }) | |
| svg.append("text") | |
| .classed("count", true) | |
| .attr("x", 250) | |
| .attr("y", 180) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","72px") | |
| .attr("alignment-baseline", "middle") | |
| .text(totalAnimals) | |
| svg.append("text") | |
| .classed("name", true) | |
| .attr("x", 250) | |
| .attr("y", 240) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","36px") | |
| .attr("alignment-baseline", "middle") | |
| .text("store rovdyr") | |
| svg.append("text") | |
| .attr("x", 250) | |
| .attr("y", 290) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","36px") | |
| .attr("alignment-baseline", "middle") | |
| .text("omkom") | |
| svg.append("text") | |
| .attr("x", 250) | |
| .attr("y", 350) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","18px") | |
| .attr("alignment-baseline", "middle") | |
| .text("2017/2018") | |
| <\/script> | |
| </html></script> | |
| </body> | |
| <script> | |
| var data = [ | |
| {animal:"Bjørn", count:9}, | |
| {animal:"Ulv", count:31}, | |
| {animal:"Jerv", count:84}, | |
| {animal:"Gaupe", count:55} | |
| ]; | |
| var height = 500; | |
| var width = 500; | |
| var totalAnimals = d3.sum(data, function(d){ | |
| return d.count; | |
| }); | |
| var colorPalette = d3.scaleOrdinal() | |
| .range(["brown", | |
| "#787878", | |
| "#494847", "#9F8170"]) | |
| var outerRadius = 250; | |
| var innerRadius = outerRadius - (outerRadius * 1/3); | |
| var arc = d3.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| var label = d3.arc() | |
| .outerRadius(outerRadius) | |
| .innerRadius(innerRadius - 20); | |
| var pie = d3.pie() | |
| .padAngle(0.02) | |
| .sort(null) | |
| .value(function(d){ | |
| return d.count; | |
| }); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| var arcs = svg.selectAll("g.arc") | |
| .data(pie(data)) | |
| .enter() | |
| .append("g") | |
| .classed("arc", true) | |
| arcs.attr("transform", | |
| "translate(" + outerRadius + ", " + outerRadius + ")") | |
| .append("path") | |
| .attr("fill", function(d,i){ | |
| return colorPalette(i); | |
| }) | |
| .attr("d", arc); | |
| arcs.append("g") | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("font-size", "22px") | |
| .attr("fill", "lightgrey") | |
| .attr("transform", function(d){ | |
| return "translate(" + label.centroid(d) + ")"; | |
| }) | |
| .attr("dy", "-0.15em") | |
| .text(function(d){ | |
| return d.data.animal; | |
| }) | |
| arcs.append("g") | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("font-size", "26px") | |
| .attr("fill", "lightgrey") | |
| .attr("transform", function(d){ | |
| return "translate(" + label.centroid(d) + ")"; | |
| }) | |
| .attr("dy", "0.9em") | |
| .text(function(d){ | |
| return d.data.count; | |
| }) | |
| svg.append("text") | |
| .classed("count", true) | |
| .attr("x", 250) | |
| .attr("y", 180) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","72px") | |
| .attr("alignment-baseline", "middle") | |
| .text(totalAnimals) | |
| svg.append("text") | |
| .classed("name", true) | |
| .attr("x", 250) | |
| .attr("y", 240) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","36px") | |
| .attr("alignment-baseline", "middle") | |
| .text("store rovdyr") | |
| svg.append("text") | |
| .attr("x", 250) | |
| .attr("y", 290) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","36px") | |
| .attr("alignment-baseline", "middle") | |
| .text("omkom") | |
| svg.append("text") | |
| .attr("x", 250) | |
| .attr("y", 350) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size","18px") | |
| .attr("alignment-baseline", "middle") | |
| .text("2017/2018") | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment