will-s-t/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;
		}

    .button {
      width: 100px;
      background-color: #CCC;
      text-align: center;
      padding: 3px;
      margin: 7px;
      float: left;
    }

    #buttonBar {
      width: 400px;
      margin-right: auto;
      margin-left: auto;
    }

    .vegLabel {
      text-align: right;
    }

	}

  </style>

</head>
<body>
  <div id="container">

    <h2>Bringing home the vegetables</h2>

    <div id="buttonBar">
      <div class="button" id="totals">
        <p>totals</p>
      </div>
      <div class="button" id="fvv">
        <p>fruit vs veg</p>
      </div>
      <div class="button" id="individual">
        <p>individual</p>
      </div>
    </div>


    <section id="chart"></section>
  </div>

  <script type="text/javascript">

  	var w = 800;
  	var h = 800;
  	var padding = [50, 150, 300, 150]; //Top, right, bottom, left

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

      //array with fruits and vegetables
      var vegetables = ["apples", "oranges", "pears", "tomatoes", "cucumbers", "potatoes"];
      var days = ["monday", "tuesday", "wednesday", "thursday", "friday"];


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


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

        dataset[i] = [];

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

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

          dataset[i][j] = {

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

          };

        }

      }

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

      //stack things

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


      //add in some coordinates for non-stacked chart


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

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

          // console.log(data[i].kind);

          if(data[i].kind == "veg") {
            // console.log(dataset[i][j].y0);
            dataset[i][j].yFVV = dataset[i][j].y0 - dataset[2][j].y0 - dataset[2][j].y + 18;
          } else {
            dataset[i][j].yFVV = dataset[i][j].y0;
          }

          dataset[i][j].yUnstacked = i*((h-padding[0])/data.length)+40;


        }

      }


      // console.log(dataset);


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

      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, h-padding[2]-padding[0]]);

      // axes

      var xAxis = d3.svg.axis()
              .scale(xScale)
              .tickFormat(function(i) {
                return days[i];
              })
              .orient("bottom");


      // colour scale
      var colours = d3.scale.category10();
      var coloursArray = ["#b51a20", "#fd7e09", "#d7cf2f", "#fb492d", "#649043", "#e8ad61"]


      // 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 coloursArray[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) {
          // console.log(d.y0);
          return h - yScale(d.y0) - yScale(d.y)-250;

        })
        .attr("height", function(d) {
          // console.log(d.y);
          // console.log(yScale(d.y));
          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");

       // actions for clicking on buttons
      d3.select("#totals")
        .on("click", function() {
          // console.log("clicked totals");
          groups.selectAll("rect")
            .transition()
            .attr("y", function(d) {
              return h - yScale(d.y0) - yScale(d.y)-250;
            });
          groups.select("text")
            .transition()
            .attr("y", function(d) {
              return h - yScale(d[0].y0) - yScale(d[0].y)/2 - 250;
            });

          // change y position of y axis - doesn't seem to work :(
          d3.select("#x axis")
            .transition()
            .attr("transform", "translate(0," + (h - 220) + ")")

        });


      d3.select("#fvv")
        .on("click", function() {
          // console.log("clicked fvv");
          groups.selectAll("rect")
            .transition()
            .attr("y", function(d, i) {
              // console.log(d);
              return h - yScale(d.yFVV) - yScale(d.y) - 100;
            });
          groups.select("text")
            .transition()
            .attr("y", function(d) {
              return h - yScale(d[0].yFVV) - yScale(d[0].y)/2 - 100;
            });
        });

      d3.select("#individual")
        .on("click", function() {
          // console.log("clicked individual");
          groups.selectAll("rect")
            .transition()
            .attr("y", function(d, i) {
              // console.log(d);
              return h - d.yUnstacked - yScale(d.y);
            });
          groups.select("text")
            .transition()
            .attr("y", function(d) {
              return h - d[0].yUnstacked - yScale(d[0].y)/2;
            });
        });

      // veg labels

      groups.append("text")
        .attr("class", "vegLabel")
        .attr("x", 30)
        .attr("y", function(dataset, i) {
          // console.log(dataset);
          // console.log(dataset[0]);
          return h - yScale(dataset[0].y0) - yScale(dataset[0].y)/2 - 250;
          // return 10;
        })
        .text(function(d, i) {
          return vegetables[i];
        });

      // day labels

      svg.append("g")
          .attr("id", "x axis")
          .attr("transform", "translate(0," + (h - 35) + ")")
          .call(xAxis);


    });


  </script>

</body>
</html>

## shopping3.csv

          
            item
            kind
            monday
            tuesday
            wednesday
            thursday
            friday

            
              apples
              fruit
              5
              3
              0
              1
              4

            
              oranges
              fruit
              6
              7
              1
              2
              4

            
              pears
              fruit
              5
              4
              4
              5
              3

            
              tomatoes
              veg
              5
              3
              0
              6
              5

            
              cucumbers
              veg
              1
              6
              5
              6
              5

            
              potatoes
              veg
              5
              5
              1
              7
              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;
	}

	.button {
	width: 100px;
	background-color: #CCC;
	text-align: center;
	padding: 3px;
	margin: 7px;
	float: left;
	}

	#buttonBar {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	}

	.vegLabel {
	text-align: right;
	}

	}

	</style>

	</head>
	<body>
	<div id="container">

	<h2>Bringing home the vegetables</h2>

	<div id="buttonBar">
	<div class="button" id="totals">
	<p>totals</p>
	</div>
	<div class="button" id="fvv">
	<p>fruit vs veg</p>
	</div>
	<div class="button" id="individual">
	<p>individual</p>
	</div>
	</div>



	<section id="chart"></section>
	</div>

	<script type="text/javascript">

	var w = 800;
	var h = 800;
	var padding = [50, 150, 300, 150]; //Top, right, bottom, left

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

	//array with fruits and vegetables
	var vegetables = ["apples", "oranges", "pears", "tomatoes", "cucumbers", "potatoes"];
	var days = ["monday", "tuesday", "wednesday", "thursday", "friday"];


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


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

	dataset[i] = [];

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

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

	dataset[i][j] = {

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

	};

	}

	}

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

	//stack things

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



	//add in some coordinates for non-stacked chart


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

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

	// console.log(data[i].kind);

	if(data[i].kind == "veg") {
	// console.log(dataset[i][j].y0);
	dataset[i][j].yFVV = dataset[i][j].y0 - dataset[2][j].y0 - dataset[2][j].y + 18;
	} else {
	dataset[i][j].yFVV = dataset[i][j].y0;
	}

	dataset[i][j].yUnstacked = i*((h-padding[0])/data.length)+40;


	}

	}


	// console.log(dataset);


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

	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, h-padding[2]-padding[0]]);

	// axes

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.tickFormat(function(i) {
	return days[i];
	})
	.orient("bottom");


	// colour scale
	var colours = d3.scale.category10();
	var coloursArray = ["#b51a20", "#fd7e09", "#d7cf2f", "#fb492d", "#649043", "#e8ad61"]


	// 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 coloursArray[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) {
	// console.log(d.y0);
	return h - yScale(d.y0) - yScale(d.y)-250;

	})
	.attr("height", function(d) {
	// console.log(d.y);
	// console.log(yScale(d.y));
	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");

	// actions for clicking on buttons
	d3.select("#totals")
	.on("click", function() {
	// console.log("clicked totals");
	groups.selectAll("rect")
	.transition()
	.attr("y", function(d) {
	return h - yScale(d.y0) - yScale(d.y)-250;
	});
	groups.select("text")
	.transition()
	.attr("y", function(d) {
	return h - yScale(d[0].y0) - yScale(d[0].y)/2 - 250;
	});

	// change y position of y axis - doesn't seem to work :(
	d3.select("#x axis")
	.transition()
	.attr("transform", "translate(0," + (h - 220) + ")")

	});


	d3.select("#fvv")
	.on("click", function() {
	// console.log("clicked fvv");
	groups.selectAll("rect")
	.transition()
	.attr("y", function(d, i) {
	// console.log(d);
	return h - yScale(d.yFVV) - yScale(d.y) - 100;
	});
	groups.select("text")
	.transition()
	.attr("y", function(d) {
	return h - yScale(d[0].yFVV) - yScale(d[0].y)/2 - 100;
	});
	});

	d3.select("#individual")
	.on("click", function() {
	// console.log("clicked individual");
	groups.selectAll("rect")
	.transition()
	.attr("y", function(d, i) {
	// console.log(d);
	return h - d.yUnstacked - yScale(d.y);
	});
	groups.select("text")
	.transition()
	.attr("y", function(d) {
	return h - d[0].yUnstacked - yScale(d[0].y)/2;
	});
	});

	// veg labels

	groups.append("text")
	.attr("class", "vegLabel")
	.attr("x", 30)
	.attr("y", function(dataset, i) {
	// console.log(dataset);
	// console.log(dataset[0]);
	return h - yScale(dataset[0].y0) - yScale(dataset[0].y)/2 - 250;
	// return 10;
	})
	.text(function(d, i) {
	return vegetables[i];
	});

	// day labels

	svg.append("g")
	.attr("id", "x axis")
	.attr("transform", "translate(0," + (h - 35) + ")")
	.call(xAxis);


	});






	</script>

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