ndarville/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Illustreret er Megafons sensationelle meningsmåling, der ikke viser, at DF er større end V og S; det er der ikke statistisk belæg for, fordi usikkerheden er for høj.
Hver søjle er opdelt i to:

Den minimale (garanterede) stemmeandel.
Den maksimale (mulige) stemmeandel.

Som det fremgår af søjlen, kan ethvert af de tre partier være størst!
For at kunne sige (med 95% sandsynlighed) at DF er størst, skulle DFs nederste søjle—dén, der viser den garanterede stemmeandel—rage højere end den (maksimalt) mulige stemmeandel for de to andre partier; det er tydeligvis ikke tilfældet.

Antal svarpersoner er 1095 (buh), og konfidensintervallet er 95%, beregnet hurtigt med dette til lejligheden opfundet værktøj.
Det er værd at bemærke, at hele det her cirkus er på baggrund af en måling, der giver DF en “føring” over Venstre på NUL KOMMA TRE PROCENT.

Grafikken er lavet med udgangspunkt i Mike Bostocks oprindelige værk. Tror ikke han har noget imod det.
Et stort tillykke til Dansk Folkeparti med den gratis mediedækning.

Se anden del af kommentaren til dækningen af Megafon-målingen her.

Parti | Min. stemmeandel | Max. stemmeandel | Statistisk Usikkerhed
------|------------------|------------------|----------------------
DF    | 18.8             | 23.6             | 4.8
V     | 18.5             | 23.3             | 4.8
S     | 17.4             | 22.2             | 4.8

  
## data.csv

          
            Parti
            Min. stemmeandel
            Max. stemmeandel

            
              DF
              18.8
              4.8

            
              V
              18.5
              4.8

            
              S
              17.4
              4.8

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

.divider {
  shape-rendering: crispEdges;
  fill: none;
  stroke-width: 1px;
  stroke: #000;
  stroke-dasharray: 5, 5;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .5);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#a05d56"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(",.0f"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Parti"; }));

  data.forEach(function(d) {
    var y0 = 0;
    d.stemmeandel = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.stemmeandel[d.stemmeandel.length - 1].y1;
  });

  data.sort(function(a, b) { return b.total - a.total; });

  x.domain(data.map(function(d) { return d.Parti; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Stemmeandel (%)");

  var parti = svg.selectAll(".parti")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.Parti) + ",0)"; });

  parti.selectAll("rect")
      .data(function(d) { return d.stemmeandel; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

  svg.append("line")
      .attr("class", "divider")
      .attr({
          "x1": x(0),
          "x2": x(width),
          "y1": y(18.8),
          "y2": y(18.8)
      });

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
Parti	Min. stemmeandel	Max. stemmeandel
DF	18.8	4.8
V	18.5	4.8
S	17.4	4.8
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	.divider {
	shape-rendering: crispEdges;
	fill: none;
	stroke-width: 1px;
	stroke: #000;
	stroke-dasharray: 5, 5;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .5);

	var y = d3.scale.linear()
	.rangeRound([height, 0]);

	var color = d3.scale.ordinal()
	.range(["#98abc5", "#a05d56"]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(d3.format(",.0f"));

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("data.csv", function(error, data) {
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Parti"; }));

	data.forEach(function(d) {
	var y0 = 0;
	d.stemmeandel = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
	d.total = d.stemmeandel[d.stemmeandel.length - 1].y1;
	});

	data.sort(function(a, b) { return b.total - a.total; });

	x.domain(data.map(function(d) { return d.Parti; }));
	y.domain([0, d3.max(data, function(d) { return d.total; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Stemmeandel (%)");

	var parti = svg.selectAll(".parti")
	.data(data)
	.enter().append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x(d.Parti) + ",0)"; });

	parti.selectAll("rect")
	.data(function(d) { return d.stemmeandel; })
	.enter().append("rect")
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.y1); })
	.attr("height", function(d) { return y(d.y0) - y(d.y1); })
	.style("fill", function(d) { return color(d.name); });

	svg.append("line")
	.attr("class", "divider")
	.attr({
	"x1": x(0),
	"x2": x(width),
	"y1": y(18.8),
	"y2": y(18.8)
	});

	var legend = svg.selectAll(".legend")
	.data(color.domain().slice().reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	});

	</script>