stianSjoli/index.html

## index.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>
  <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>
	<!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>