block by michalskop 9013616

Inner circles seem bigger than outer rings (experiment)

Full Screen

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;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: #bbb;
  stroke-width: 1px;
}
.line.active {
  stroke-width: 5px;
  stroke: #444
}

.group-2 {
  fill: none;
  stroke: #aac;
  stroke-width: 1px;
}
.group-2.active {
  stroke-width: 5px;
  stroke: #335;
}

.zeroline {
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

.point {
  fill: white;
  stroke: #222;
}
.point.active {
  fill: #222;
}

.average {
  fill: orange;
  stroke: orange;
  fill-opacity: .6;
  stroke-width: 1.5px;
  stroke-opacity: 1;
}

.average.active {
  fill-opacity: 1;
}

.stimuli {
  fill: white;
  stroke: #000;
}
.stimuli.active {
  stroke: green;
}

</style>
<body>
<h1>How we perceive smaller the areas of the (colourful) rings than of their inner (white) circles</h1>
<div id="chart"></div>
<script src="//d3js.org/d3.v3.js"></script>
<script>

var realvalues = {S: 0.075, A: 0.359, D: 0.676, F: 0.984}
var averages = {S: 0, A: 0, D: 0, F: 0}

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

var x = d3.scale.linear()
    .range([0, width])
    .domain([0,1]);
var y = d3.scale.linear()
    .range([height, 0])
    .domain([-0.5,0.7]);
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
    

    
var svg = d3.select("#chart").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 + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
 .append("text")
  .attr("x", x(1))
  .attr("dx", ".71em")
  .style("text-anchor", "end")
  .text("Real values of percentage of colour");
  
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("Errors of Estimates");
  
var line = d3.svg.line()
    .x(
    function(d) { 
    return d[0]; })
    .y(function(d) { return d[1]; });
    
zeroline = Array([x(0),y(0)],[x(1),y(0)]);
svg.append("path")
      .datum(zeroline)
      .attr("class", "zeroline")
      .attr("d", line)

stimuli = function(rate) {
  R = 30;
  irate = 1-rate;
  q = R*(1-Math.sqrt(irate))
  r = R - q/2;
  return Array(r,q);
}

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

  /*data.forEach(function(d) {
    d.S = +d.S
    d.A = +d.A;
  });*/
  
  //realvalues.forEach(function(realval,index) {
  points = Array();
  
    data.forEach(function(d) {
      rdata = Array();
      for (i in realvalues) {
        xx = realvalues[i] + Math.random()/50-0.01; 
        yy = +d[i]/100-realvalues[i];
        rdata.push([x(xx),y(yy)]);
        points.push([xx,yy]);
        averages[i] += yy;
      }
      svg.append("path")
      .datum(rdata)
      .attr("class", function() {if (d.group == "2") return "group-2"; else return "line"})
      .attr("d", line)
      .attr("title",d.name)
      .on("mouseover", function() {
          d3.select(this)
            .classed("active", true ) // should then accept fill from CSS
        })
      .on("mouseout",  function() {
          d3.select(this)
            .classed("active", false)
          });
    });
  
  svg.selectAll('circle')
    .data(points)
    .enter().append('circle')
    .attr("cx", function(d) {return x(d[0]) })
    .attr("cy", function(d) {return y(d[1]) })
    .attr("r", 3)
    .attr("class", "point")
    .attr("title",function(d) {return "Error of colour estimate: " + Math.round(d[1]*1000)/10 + "% (percentage points)"})
    .on("mouseover", function() {
          d3.select(this)
            .classed("active", true )
        })
      .on("mouseout",  function() {
          d3.select(this)
            .classed("active", false)
          });
    
  for(i in averages) {
      svg.append('circle')
        .attr("cx", x(realvalues[i]))
        .attr("cy", y(averages[i]/points.length*4))
        .attr("r", 10)
        .attr("class","average")
        .attr("title","Average of error of colour estimate: " + (Math.round(averages[i]/points.length*4*1000)/10) + "% (percentage points)")
        .on("mouseover", function() {
          d3.select(this)
            .classed("active", true )
        })
      .on("mouseout",  function() {
          d3.select(this)
            .classed("active", false)
          });
      st = stimuli(realvalues[i]);
      svg.append('circle')
        .attr("cx", x(realvalues[i]))
        .attr("cy", y(0.5))
        .attr("r",st[0])
        .attr("stroke-width",st[1])
        .attr("class","stimuli")
        .attr("title","Real percentage of colour: " + (Math.round(realvalues[i]*1000)/10) + "%")
        .on("mouseover", function() {
          d3.select(this)
            .classed("active", true )
        })
      .on("mouseout",  function() {
          d3.select(this)
            .classed("active", false)
          });
  }


});




</script>
<p>Estimates of <strong>percentage of colour in the 4 circles above</strong>  (i.e., number of black pixels vs. number of black and white pixels). Experiment on 45 university students.</p>
<p>The values on x-axis are slightly randomly moved, so the overlapted points may be visible.</p>
</p>(<em>One group was asked about the percentage of black, the other about white - no significant difference</em>)</p>

	<script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-8592359-13', 'ocks.org');
      ga('send', 'pageview');

    </script>
</body>

ex1.csv

name,S,A,D,F,group,white
Person-1,5,15,50,95,3,0
Person-2,5,30,80,98,3,0
Person-3,2,20,50,90,3,0
Person-4,1,10,50,98,3,0
Person-5,12,24,78,95,3,0
Person-6,5,10,65,98,3,0
Person-7,1,12,65,97,3,0
Person-8,5,20,68.5,94,3,0
Person-9,10,20,50,90,3,0
Person-10,10,20,50,90,3,0
Person-11,5,15,70,95,3,0
Person-12,0.5,10,50,97,3,0
Person-13,2,12,50,98,3,0
Person-14,2,10,60,96,3,0
Person-15,2,15,30,90,3,0
Person-16,8,50,60,95,3,0
Person-17,5,15,50,90,3,0
Person-18,4,25,65,96,3,0
Person-19,2.5,20,65,95,1,0
Person-20,1,15,50,90,1,0
Person-21,10,20,50,95,1,0
Person-22,5,25,60,90,1,0
Person-23,7,10,75,95,1,0
Person-24,5,10,60,95,1,0
Person-25,10,30,65,90,1,0
Person-26,6,30,75,92,1,0
Person-27,5,15,55,95,2,1
Person-28,5,35,70,98,2,1
Person-29,5.1,15,42.7,90.4,2,1
Person-30,5,30,60,95,2,1
Person-31,5,25,50,95,2,1
Person-32,10,40,60,95,2,1
Person-33,4,30,55,95,2,1
Person-34,10,30,40,90,2,1
Person-35,5,10,60,93,2,1
Person-36,5,20,60,96,2,1
Person-37,8,25,60,92,2,1
Person-38,7,25,60,97,2,1
Person-39,8,15,65,95,2,1
Person-40,10,25,40,85,2,1
Person-41,10,25,50,90,2,1
Person-42,3,25,60,95,2,1
Person-43,3,25,55,95,2,1
Person-44,5,30,50,95,2,1
Person-45,7,35,55,90,2,1