Last active
March 17, 2019 22:16
-
-
Save stianSjoli/8e44b4bfba5fa6052e0f81665ce61d57 to your computer and use it in GitHub Desktop.
Kundeandel fordelt på sektor. Tall tatt fra Bouvet Q3 2018.
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> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| </body> | |
| <script> | |
| var data = [ | |
| {sektor:"Service", andel:5.2}, | |
| {sektor:"Transport", andel:10.4}, | |
| {sektor:"Detaljhandel", andel:5.9}, | |
| {sektor:"Annet", andel:2.4}, | |
| {sektor:"Bank og finans", andel:4.2}, | |
| {sektor:"Kraftleverandør", andel:10.0}, | |
| {sektor:"Helse", andel:2.3}, | |
| {sektor:"Industri", andel:4.9}, | |
| {sektor:"Kommunikasjon", andel:4.9}, | |
| {sektor:"Offentlig administrasjon", andel:27.5}, | |
| {sektor:"Olje og gass", andel:25.8}, | |
| ]; | |
| var height = 600; | |
| var width = 500; | |
| var outerRadius = (height - 300)/2; | |
| var innerRadius = outerRadius - (outerRadius * 1/4); | |
| var arc = d3.arc() | |
| .innerRadius(innerRadius) | |
| .outerRadius(outerRadius) | |
| .cornerRadius(4); | |
| var colors = d3.schemeCategory20; | |
| var pie = d3.pie() | |
| .padAngle(0.02) | |
| .sort(function(x, y){ | |
| console.log(x) | |
| return d3.ascending(x.andel, y.andel); | |
| }) | |
| .value(function(d){ | |
| return d.andel; | |
| }) | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| var label = svg.selectAll("g.label") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| label | |
| .append("rect") | |
| .attr("x", function(d,i) { | |
| return width/7 + 30; | |
| }) | |
| .attr("y",function(d,i) { | |
| return (height-300)/4 + (i * 15) | |
| }) | |
| .attr("width",10) | |
| .attr("height",10) | |
| .attr("fill", function(d,i) { | |
| return colors[i]; | |
| }) | |
| .attr("rx", 2) | |
| .attr("ry", 2) | |
| label | |
| .append("text") | |
| .attr("x", function(d,i) { | |
| return width/7 + 45; | |
| }) | |
| .attr("y", function(d,i) { | |
| return (height-270)/4 + (i * 15) | |
| }) | |
| .attr("font-size", 12) | |
| .attr("text-anchor", "start") | |
| .attr("fill", "black") | |
| .text(function(d) { | |
| return d.sektor; | |
| }) | |
| 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 colors[i]; | |
| }) | |
| .attr("d", arc) | |
| arcs.append("g") | |
| .append("text") | |
| .attr("x", function(d) { | |
| return arc.centroid(d)[0] | |
| }) | |
| .attr("y", function(d) { | |
| return arc.centroid(d)[1] + 1; | |
| }) | |
| .attr("text-anchor", "middle") | |
| .attr("font-size", "12px") | |
| .attr("fill", "black") | |
| .text(function(d){ | |
| return d.data.andel; | |
| }) | |
| </script> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment