scotthmurray/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bringing home the vegetables</title>
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <style type="text/css">

  	body {
				margin: 0;
				background-color: lightGray;
				font-family: Georgia, Times, serif;
			}

		#container {
			width: 800px;
			margin-left: auto;
			margin-right: auto;
			background-color: #FFF;
			margin-top: 50px;
      box-shadow: 3px 3px 5px 6px #bbb;
		}

		h2 {
			text-align: center;
      font-size: 20px;
      font-weight: bold;
      padding-top: 15px;
		}

	}

  </style>

</head>
<body>
  <div id="container">
    <h2>Bringing home the vegetables</h2>
    <section id="chart"></section>
  </div>

  <script type="text/javascript">

  	var w = 800;
  	var h = 600;
  	var padding = [50, 50, 50, 100];


  	d3.csv("shopping2.csv", function(data) {

      //array with fruits and vegetables
      var vegetables = ["apples", "oranges", "pears", "tomatoes", "cucumbers", "potatoes"];

      //reorganise the data into array of objects
      var dataset = [];

      for (var j = 0; j < vegetables.length; j++) {

        dataset[j] = [];

          for (var i = 1; i < data.length; i++) {

          // console.log(vegetables[0]);
          // console.log(data[i]["apples"]);
          // console.log(data[i][vegetables[j]]);
          // console.log(data[i].apples);

          dataset[j][i-1] = {

            x: i,
            y: +data[i][vegetables[j]]

          };

        }


      }
      // console.log(data);
      // console.log(dataset);

      //stack things

      var stack = d3.layout.stack();
      stack(dataset);


      //scales
      var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset[0].length))
        .rangeRoundBands([0+padding[0], w-padding[2]], 0.1);

      var yScale = d3.scale.linear()
        .domain([0,
          d3.max(dataset, function(d) {
            return d3.max(d, function(d) {
              return d.y0 +d.y;
            })
          })
        ])
        .range([0+padding[1], h-padding[3]]);


      // colour scale
      var colours = d3.scale.category10();


      // add the SVG
      var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      // Add a group for each row of data
      var groups = svg.selectAll("g")
        .data(dataset)
        .enter()
        .append("g")
        .style("fill", function(d, i) {
          return colours(i);
        });

      // add rects for each data value
      groups.selectAll("rect")
        .data(function(d) { return d; })
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return xScale(i);
        })
        .attr("width", xScale.rangeBand())
        .attr("y", function(d) {
          return yScale(d.y0);
        })
        .attr("height", function(d) {
          return yScale(d.y);
        })
        .on("mouseover", function() { tooltip.style("display", null); })
        .on("mouseout", function() { tooltip.style("display", "none"); })
        .on("mousemove", function(d, i) {
          var xPosition = d3.mouse(this)[0] - 15;
          var yPosition = d3.mouse(this)[1] - 25;
          tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
          tooltip.select("text").text(vegetables[d.x] + ": " + d.y);
        });

      // Create tooltip, initial display is hidden
      var tooltip = svg.append("g")
        .attr("class", "tooltip")
        .style("display", "none");

      tooltip.append("rect")
        .attr("width", 100)
        .attr("height", 20)
        .attr("fill", "white")
        .style("opacity", 0.5);

      tooltip.append("text")
        .attr("x", 50)
        .attr("dy", "1.2em")
        .style("text-anchor", "middle")
        .attr("font-size", "12px")
        .attr("font-weight", "regular");


    });


  </script>

</body>
</html>

## shopping2.csv

          
            day
            daycode
            apples
            oranges
            pears
            tomatoes
            cucumbers
            potatoes

            
              kind
              
              fruit
              fruit
              fruit
              veg
              veg
              veg

            
              monday
              1
              5
              6
              5
              5
              1
              5

            
              tuesday
              2
              3
              7
              4
              3
              6
              5

            
              wednesday
              3
              0
              1
              4
              0
              5
              1

            
              thursday
              4
              1
              2
              5
              6
              6
              7

            
              friday
              5
              4
              4
              3
              5
              5
              6
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Bringing home the vegetables</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: lightGray;
	font-family: Georgia, Times, serif;
	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	margin-top: 50px;
	box-shadow: 3px 3px 5px 6px #bbb;
	}

	h2 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
	}

	}

	</style>

	</head>
	<body>
	<div id="container">
	<h2>Bringing home the vegetables</h2>
	<section id="chart"></section>
	</div>

	<script type="text/javascript">

	var w = 800;
	var h = 600;
	var padding = [50, 50, 50, 100];


	d3.csv("shopping2.csv", function(data) {

	//array with fruits and vegetables
	var vegetables = ["apples", "oranges", "pears", "tomatoes", "cucumbers", "potatoes"];

	//reorganise the data into array of objects
	var dataset = [];

	for (var j = 0; j < vegetables.length; j++) {

	dataset[j] = [];

	for (var i = 1; i < data.length; i++) {

	// console.log(vegetables[0]);
	// console.log(data[i]["apples"]);
	// console.log(data[i][vegetables[j]]);
	// console.log(data[i].apples);

	dataset[j][i-1] = {

	x: i,
	y: +data[i][vegetables[j]]

	};

	}



	}
	// console.log(data);
	// console.log(dataset);

	//stack things

	var stack = d3.layout.stack();
	stack(dataset);


	//scales
	var xScale = d3.scale.ordinal()
	.domain(d3.range(dataset[0].length))
	.rangeRoundBands([0+padding[0], w-padding[2]], 0.1);

	var yScale = d3.scale.linear()
	.domain([0,
	d3.max(dataset, function(d) {
	return d3.max(d, function(d) {
	return d.y0 +d.y;
	})
	})
	])
	.range([0+padding[1], h-padding[3]]);


	// colour scale
	var colours = d3.scale.category10();


	// add the SVG
	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	// Add a group for each row of data
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.style("fill", function(d, i) {
	return colours(i);
	});

	// add rects for each data value
	groups.selectAll("rect")
	.data(function(d) { return d; })
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return xScale(i);
	})
	.attr("width", xScale.rangeBand())
	.attr("y", function(d) {
	return yScale(d.y0);
	})
	.attr("height", function(d) {
	return yScale(d.y);
	})
	.on("mouseover", function() { tooltip.style("display", null); })
	.on("mouseout", function() { tooltip.style("display", "none"); })
	.on("mousemove", function(d, i) {
	var xPosition = d3.mouse(this)[0] - 15;
	var yPosition = d3.mouse(this)[1] - 25;
	tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
	tooltip.select("text").text(vegetables[d.x] + ": " + d.y);
	});

	// Create tooltip, initial display is hidden
	var tooltip = svg.append("g")
	.attr("class", "tooltip")
	.style("display", "none");

	tooltip.append("rect")
	.attr("width", 100)
	.attr("height", 20)
	.attr("fill", "white")
	.style("opacity", 0.5);

	tooltip.append("text")
	.attr("x", 50)
	.attr("dy", "1.2em")
	.style("text-anchor", "middle")
	.attr("font-size", "12px")
	.attr("font-weight", "regular");



	});






	</script>

	</body>
	</html>
day	daycode	apples	oranges	pears	tomatoes	cucumbers	potatoes
kind		fruit	fruit	fruit	veg	veg	veg
monday	1	5	6	5	5	1	5
tuesday	2	3	7	4	3	6	5
wednesday	3	0	1	4	0	5	1
thursday	4	1	2	5	6	6	7
friday	5	4	4	3	5	5	6