emschuch/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Based on the LA Times article on water usage per type of food. Students guessed values given a value for a single food on either a bar or bubble chart.

  
## food_data.csv

          
            group
            type
            stdev
            mean
            real

            
              bar
              artichokes
              4.17358093
              9.29
              5.92

            
              bar
              beef
              4.756282395
              105.2
              106.28

            
              bar
              carrots
              0.518973345
              1.26
              0.93

            
              bar
              chicken
              5.349974039
              21.2
              16.61

            
              bar
              grapefruit juice
              2.249345584
              4.48
              2.27

            
              bar
              strawberries
              1.238457822
              2.16
              1.24

            
              bar
              wheat bread
              3.581573211
              17.31
              14.44

            
              circle
              artichokes
              5.979130372
              18
              5.92

            
              circle
              beef
              4.176654695
              98.22222222
              106.28

            
              circle
              carrots
              2.891558595
              4.388888889
              0.93

            
              circle
              chicken
              9.553940432
              27.44444444
              16.61

            
              circle
              grapefruit juice
              4.493822921
              9.222222222
              2.27

            
              circle
              strawberries
              4.075673087
              6.111111111
              1.24

            
              circle
              wheat bread
              8.91627725
              30.66666667
              14.44

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

<style type="text/css">

    body {
        font-family: arial;

    }

/*    svg {
        border: 1px solid #f0f;
    }*/
    h2 {
        padding-left: 130px;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #dedede;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 12px;
        text-transform: uppercase;
    }

    .chart-container {
        margin: 0 auto;
        max-width: 700px;
    }

    .g-circle {
        stroke: tomato;
    }

    .g-bar {
        stroke: dodgerblue;
    }

    .g-food-type line {
        stroke-width: 10px;
        opacity: 0.7;
    }

    .g-mean {
        stroke: black;
    }

</style>

<body>
    <div class='chart-container'>
        <h2>Accuracy of Water Usage Guesses</h2>
        <h4></h4>
    </div>


</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script>

    var margin = {'top': 0, 'right': 0, 'bottom': 30, 'left': 130};

    var width = 700 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    var types;

    var xscale = d3.scale.linear();

    var yscale = d3.scale.ordinal()
        .rangeBands([height, 0], 0.2);

    var svg = d3.select('.chart-container')
        .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('food_data.csv', ready);

    function ready (error, water) {

        water.forEach(function (d) {
            d.mean = +d.mean;
            d.real = +d.real;
            d.stdev = +d.stdev;
        })

        var data = d3.nest()
            .key(function(d) { return d.type; })
            .entries(water);

        data.sort(function (a, b) {
                return a.values[0].real - b.values[0].real;
            });

        types = d3.map(data, function (d) { return d.key; }).keys();

        xscale.range([0, width])
            .domain([0, d3.max(water, function (d) { return d.mean + d.stdev; }) + 10]);

        yscale.domain(types);

        var xaxis = d3.svg.axis()
            .scale(xscale)
            .orient('bottom')
            .ticks(6)
            .tickSize(-height)
            .tickPadding(10);

        var yaxis = d3.svg.axis()
            .scale(yscale)
            .orient('left')
            .tickSize(-width)
            .tickPadding(10);

        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xaxis);

        svg.append('g')
            .attr('class', 'axis')
            // .attr('transform', 'translate(' + width + ',0)')
            .call(yaxis);

        var foodType = svg.selectAll('.g-food-type')
            .data(data)
          .enter().append('g')
            .attr('class', 'g-food-type')
            .attr('transform', function (d) {
                return 'translate(0,' + (yscale(d.key) + yscale.rangeBand()/2) + ')';
            });

        foodType.append('line')
            .attr('class', function (d) { return 'g-' + d.values[0].group; })
            .attr('x1', function (d) {
                return xscale(d.values[0].mean - d.values[0].stdev);
            })
            .attr('x2', function (d) {
                return xscale(d.values[0].mean + d.values[0].stdev);
            })
            .attr('transform', 'translate(0, -10)');

        foodType.append('line')
            .attr('class', function (d) { return 'g-' + d.values[1].group; })
            .attr('x1', function (d) {
                return xscale(d.values[1].mean - d.values[1].stdev);
            })
            .attr('x2', function (d) {
                return xscale(d.values[1].mean + d.values[1].stdev);
            })
            .attr('transform', 'translate(0, 10)');

        foodType.append('line')
            .attr('class', 'g-mean')
            .attr('x1', function (d) {
                return xscale(d.values[1].real);
            })
            .attr('x2', function (d) {
                return xscale(d.values[1].real);
            })
            .attr('y1', 20)
            .attr('y2', -20)
            .style('stroke-width', 2);

        foodType.append('text')
            .attr('class', 'labels')
            .attr('transform', function (d) {
                return 'translate(' + (xscale(d.values[0].mean - d.values[0].stdev) -5) + ',-5)';
            })
            .text(function (d) {
                return d.values[0].group + 's';
            })
            .style('text-anchor', 'end')
            .style('opacity', function (d) {
                if (d.key === 'beef') {
                    return 1;
                } else {
                    return 0;
                }
            });

        foodType.append('text')
            .attr('class', 'labels')
            .attr('transform', function (d) {
                return 'translate(' + (xscale(d.values[1].mean - d.values[1].stdev) -5) + ',15)';
            })
            .text(function (d) {
                return d.values[1].group + 's';
            })
            .style('text-anchor', 'end')
            .style('opacity', function (d) {
                if (d.key === 'beef') {
                    return 1;
                } else {
                    return 0;
                }
            });


        // console.log(data);

    }

</script>
group	type	stdev	mean	real
bar	artichokes	4.17358093	9.29	5.92
bar	beef	4.756282395	105.2	106.28
bar	carrots	0.518973345	1.26	0.93
bar	chicken	5.349974039	21.2	16.61
bar	grapefruit juice	2.249345584	4.48	2.27
bar	strawberries	1.238457822	2.16	1.24
bar	wheat bread	3.581573211	17.31	14.44
circle	artichokes	5.979130372	18	5.92
circle	beef	4.176654695	98.22222222	106.28
circle	carrots	2.891558595	4.388888889	0.93
circle	chicken	9.553940432	27.44444444	16.61
circle	grapefruit juice	4.493822921	9.222222222	2.27
circle	strawberries	4.075673087	6.111111111	1.24
circle	wheat bread	8.91627725	30.66666667	14.44
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	body {
	font-family: arial;

	}

	/* svg {
	border: 1px solid #f0f;
	}*/
	h2 {
	padding-left: 130px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #dedede;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	}

	.chart-container {
	margin: 0 auto;
	max-width: 700px;
	}

	.g-circle {
	stroke: tomato;
	}

	.g-bar {
	stroke: dodgerblue;
	}

	.g-food-type line {
	stroke-width: 10px;
	opacity: 0.7;
	}

	.g-mean {
	stroke: black;
	}

	</style>

	<body>
	<div class='chart-container'>
	<h2>Accuracy of Water Usage Guesses</h2>
	<h4></h4>
	</div>


	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<script>

	var margin = {'top': 0, 'right': 0, 'bottom': 30, 'left': 130};

	var width = 700 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var types;

	var xscale = d3.scale.linear();

	var yscale = d3.scale.ordinal()
	.rangeBands([height, 0], 0.2);

	var svg = d3.select('.chart-container')
	.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('food_data.csv', ready);

	function ready (error, water) {

	water.forEach(function (d) {
	d.mean = +d.mean;
	d.real = +d.real;
	d.stdev = +d.stdev;
	})

	var data = d3.nest()
	.key(function(d) { return d.type; })
	.entries(water);

	data.sort(function (a, b) {
	return a.values[0].real - b.values[0].real;
	});

	types = d3.map(data, function (d) { return d.key; }).keys();

	xscale.range([0, width])
	.domain([0, d3.max(water, function (d) { return d.mean + d.stdev; }) + 10]);

	yscale.domain(types);

	var xaxis = d3.svg.axis()
	.scale(xscale)
	.orient('bottom')
	.ticks(6)
	.tickSize(-height)
	.tickPadding(10);

	var yaxis = d3.svg.axis()
	.scale(yscale)
	.orient('left')
	.tickSize(-width)
	.tickPadding(10);

	svg.append('g')
	.attr('class', 'axis')
	.attr('transform', 'translate(0,' + height + ')')
	.call(xaxis);

	svg.append('g')
	.attr('class', 'axis')
	// .attr('transform', 'translate(' + width + ',0)')
	.call(yaxis);

	var foodType = svg.selectAll('.g-food-type')
	.data(data)
	.enter().append('g')
	.attr('class', 'g-food-type')
	.attr('transform', function (d) {
	return 'translate(0,' + (yscale(d.key) + yscale.rangeBand()/2) + ')';
	});

	foodType.append('line')
	.attr('class', function (d) { return 'g-' + d.values[0].group; })
	.attr('x1', function (d) {
	return xscale(d.values[0].mean - d.values[0].stdev);
	})
	.attr('x2', function (d) {
	return xscale(d.values[0].mean + d.values[0].stdev);
	})
	.attr('transform', 'translate(0, -10)');

	foodType.append('line')
	.attr('class', function (d) { return 'g-' + d.values[1].group; })
	.attr('x1', function (d) {
	return xscale(d.values[1].mean - d.values[1].stdev);
	})
	.attr('x2', function (d) {
	return xscale(d.values[1].mean + d.values[1].stdev);
	})
	.attr('transform', 'translate(0, 10)');

	foodType.append('line')
	.attr('class', 'g-mean')
	.attr('x1', function (d) {
	return xscale(d.values[1].real);
	})
	.attr('x2', function (d) {
	return xscale(d.values[1].real);
	})
	.attr('y1', 20)
	.attr('y2', -20)
	.style('stroke-width', 2);

	foodType.append('text')
	.attr('class', 'labels')
	.attr('transform', function (d) {
	return 'translate(' + (xscale(d.values[0].mean - d.values[0].stdev) -5) + ',-5)';
	})
	.text(function (d) {
	return d.values[0].group + 's';
	})
	.style('text-anchor', 'end')
	.style('opacity', function (d) {
	if (d.key === 'beef') {
	return 1;
	} else {
	return 0;
	}
	});

	foodType.append('text')
	.attr('class', 'labels')
	.attr('transform', function (d) {
	return 'translate(' + (xscale(d.values[1].mean - d.values[1].stdev) -5) + ',15)';
	})
	.text(function (d) {
	return d.values[1].group + 's';
	})
	.style('text-anchor', 'end')
	.style('opacity', function (d) {
	if (d.key === 'beef') {
	return 1;
	} else {
	return 0;
	}
	});


	// console.log(data);

	}

	</script>