thole/fische_2014.csv

## fische_2014.csv

          
            fisch
            betriebe
            menge

            
              Gemeiner Karpfen
              3812
              5284

            
              Regenbogenforelle
              2501
              8465

            
              Lachsforelle
              260
              1470

            
              Elsässer Saibling
              268
              1542

            
              Bachforelle
              418
              675

            
              Europäischer Aal
              17
              926

            
              Afrikanischer Raubwels
              7
              876

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <style>
    body {
      font: 10px sans-serif;
      background-color: #1e1e20;
    }

    text {
      font-weight: bold;
      font-size: 12px;
    }
  </style>
  <script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <script>

    var width = 860,
        height = 500,
        radius = Math.min(width, height) / 2,
        barwidth = 25,
        barSpace = 5;
        innerRadius = 75;


    var color = d3.scale.ordinal()
        .range(["#525254","#4C4C4E","#454548","#3F3F41","#39393B","#575246","#562930"]);

    var arc = d3.svg.arc()
      .startAngle(0)

    var arcScale = d3.scale.linear()
      .range([0,2*Math.PI])

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    d3.csv("fische_2014.csv", function(error, data) {

      // number parsing
      data.forEach(function(d){
        d.menge = parseInt(d.menge)
      })
      // sort data by population
      data.sort(function(a,b){ return d3.ascending(a.menge,b.menge)})

      arcScale.domain([0,d3.sum(data,function(d){return d.menge;})])


      var g = svg.selectAll(".arc")
          .data(data)
        .enter().append("g")
          .attr("class", "arc");

      var path = g.append("path")
          .style("fill", function(d) { return color(d.fisch); })
          .attr("d", function(d,i){
                                      return arc
                                            .innerRadius(innerRadius + (i * barwidth))
                                            .outerRadius(innerRadius - barwidth + barSpace + (i * barwidth))
                                            .endAngle(arcScale(0))() })

          path
            .transition()
            .duration(2000)
            .attrTween("d", function(d,i){
                                      return function(t){
                                        return arc
                                            .innerRadius(innerRadius + (i * barwidth))
                                            .outerRadius(innerRadius - barwidth + barSpace + (i * barwidth))
                                            .endAngle(arcScale(d.menge) * t )()
                                      }}
                                     );


          g.append("text")
            .attr("x",function(d,i){ return - 10})
            .attr("y",function(d,i){ return -innerRadius - (barwidth + barSpace)/2 - (i-1)*barwidth })
            .text(function(d,i){return d.fisch})
            .style("fill", function(d) { return color(d.fisch); })
            .style("alignment-baseline","middle")
            .style("text-anchor","end")


          g.append("text")
            .attr("x",function(d,i){ return 0})
            .attr("y",function(d,i){ return -innerRadius  - (barwidth + barSpace)/2 - (i -1)*barwidth })
            .text(function(d,i){ return "" + d.menge; })
            .attr("transform", function(d,i){ return "rotate(" + (arcScale(d.menge) * 180 + 5) / Math.PI + ",0,0)"})
            .style("fill", function(d) { return color(d.fisch); })
            .style("alignment-baseline","middle")
            .style("text-anchor","start")
            .style("opacity",0)
            .transition()
            .delay(function(d,i){ return 2000})
            .style("opacity",1)

    });

  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
fisch	betriebe	menge
Gemeiner Karpfen	3812	5284
Regenbogenforelle	2501	8465
Lachsforelle	260	1470
Elsässer Saibling	268	1542
Bachforelle	418	675
Europäischer Aal	17	926
Afrikanischer Raubwels	7	876
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<style>
	body {
	font: 10px sans-serif;
	background-color: #1e1e20;
	}

	text {
	font-weight: bold;
	font-size: 12px;
	}
	</style>
	<script src="//d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script>

	var width = 860,
	height = 500,
	radius = Math.min(width, height) / 2,
	barwidth = 25,
	barSpace = 5;
	innerRadius = 75;


	var color = d3.scale.ordinal()
	.range(["#525254","#4C4C4E","#454548","#3F3F41","#39393B","#575246","#562930"]);

	var arc = d3.svg.arc()
	.startAngle(0)

	var arcScale = d3.scale.linear()
	.range([0,2*Math.PI])

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	d3.csv("fische_2014.csv", function(error, data) {

	// number parsing
	data.forEach(function(d){
	d.menge = parseInt(d.menge)
	})
	// sort data by population
	data.sort(function(a,b){ return d3.ascending(a.menge,b.menge)})

	arcScale.domain([0,d3.sum(data,function(d){return d.menge;})])


	var g = svg.selectAll(".arc")
	.data(data)
	.enter().append("g")
	.attr("class", "arc");

	var path = g.append("path")
	.style("fill", function(d) { return color(d.fisch); })
	.attr("d", function(d,i){
	return arc
	.innerRadius(innerRadius + (i * barwidth))
	.outerRadius(innerRadius - barwidth + barSpace + (i * barwidth))
	.endAngle(arcScale(0))() })

	path
	.transition()
	.duration(2000)
	.attrTween("d", function(d,i){
	return function(t){
	return arc
	.innerRadius(innerRadius + (i * barwidth))
	.outerRadius(innerRadius - barwidth + barSpace + (i * barwidth))
	.endAngle(arcScale(d.menge) * t )()
	}}
	);




	g.append("text")
	.attr("x",function(d,i){ return - 10})
	.attr("y",function(d,i){ return -innerRadius - (barwidth + barSpace)/2 - (i-1)*barwidth })
	.text(function(d,i){return d.fisch})
	.style("fill", function(d) { return color(d.fisch); })
	.style("alignment-baseline","middle")
	.style("text-anchor","end")


	g.append("text")
	.attr("x",function(d,i){ return 0})
	.attr("y",function(d,i){ return -innerRadius - (barwidth + barSpace)/2 - (i -1)*barwidth })
	.text(function(d,i){ return "" + d.menge; })
	.attr("transform", function(d,i){ return "rotate(" + (arcScale(d.menge) * 180 + 5) / Math.PI + ",0,0)"})
	.style("fill", function(d) { return color(d.fisch); })
	.style("alignment-baseline","middle")
	.style("text-anchor","start")
	.style("opacity",0)
	.transition()
	.delay(function(d,i){ return 2000})
	.style("opacity",1)

	});

	</script>
	</body>
	</html>