<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="index.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
    <div id="content" margin-left="auto" margin-right="auto">
    <h1 align="center">
Which of the following motivated you to adopt a Veg*n diet?    </h1>
      <h2 align="center">Based on responses from Faunalytics' <a href="https://faunalytics.org/a-summary-of-faunalytics-study-of-current-and-former-vegetarians-and-vegans/">Study of Current and Former Vegetarians and Vegans</a>.</h2>
    <svg id="canvas" height="500" width="960"></svg>
    
    </div>
    </body>
.axis {
  font-size:14px;
  text-color: #FFFFFF;
  font-weight: bold;
  text-align: justify;
  text-transform: uppercase;}

  .tooltip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }
  
//Define Height, Width, and Margins
//This is useful for when we start adding padding when we draw the g element
//Right margin made wider to account for the Bar Chart's legend

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

//Tooltips
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .attr("opacity" , 0);

//Define Canvas SVG
var svg = d3.select("#canvas")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + "," + margin.right + ")");

var x = d3.scaleBand()
    .rangeRound([0,width])
    .paddingInner(0.2)
    .align(.2);

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

var colors = d3
    .scaleOrdinal()
    .range(["#F4E8C1","#A0C1B9","#70A0AF","#706993"])
    ;

//Define/populate data array
var data = [
    {
        issue: "protection",
        vegetarian: "69.9",
        vegan: "62.3",
        formerVeg: "26.9",
        formerVegan: "27.1"
      },
        {
        issue: "environment",
        vegetarian: "58.4",
        vegan: "60.4",
        formerVeg: "22.9",
        formerVegan: "23.3"
      },
        {
        issue: "cost",
        vegetarian: "17.5",
        vegan: "32.1",
        formerVeg: "16.9",
        formerVegan: "10.9"
      },
        {
        issue: "health",
        vegetarian: "66.3",
        vegan: "79.2",
        formerVeg: "56.9",
        formerVegan: "63.6"
      },
        {
        issue: "religion",
        vegetarian: "19.3",
        vegan: "32.1",
        formerVeg: "9.2",
        formerVegan: "14.0"
      },
          {
        issue: "social",
        vegetarian: "27.1",
        vegan: "35.8",
        formerVeg: "11.1",
        formerVegan: "14.7"
      },
            {
        issue: "trend",
        vegetarian: "3.6",
        vegan: "17.0",
        formerVeg: "7.4",
        formerVegan: "10.1"
      },
              {
        issue: "disgust",
        vegetarian: "60.8",
        vegan: "67.9",
        formerVeg: "26.1",
        formerVegan: "30.2"
      }
    ]

console.log("Data:", data);
var keys = ["vegetarian","vegan","formerVeg","formerVegan"];
var issues = ["protection","environment","cost","health","religion","social","trend","disgust"];
              
//x domain is all issues
x.domain(issues);
//y domain is 0-100 because data represents percentages
y.domain([0,300]);

//Match colors to group keys
colors.domain(keys);


//Stack data by group
var stacks = d3.stack()
    .keys(keys);

//Creates and array of values to generate the "height" of each group's stack per issue
var dataStacked = stacks(data);
console.log(dataStacked);

//Draw objects  
svg.selectAll("g")
  .data(dataStacked)
  .enter().append("g")
    .attr("class","group")
    .attr("fill", function(d){ return colors(d.key);})
  .selectAll("rect")
//Data is each "bars" line of data in the dataStacked array
    .data(function(d){ return d;})
  .enter().append("rect")
  .attr("x", function(d){return x(d.data.issue)})
  .attr("y", function(d){ return y(d[1])})
  .attr("height",function(d) {return y(d[0]) - y(d[1])})
  .attr("width", x.bandwidth())
 .on("mouseover", 
      tooltip.transition()
        .duration(200)
        .style("opacity", 0.9))
 .on("mousemove", function(d) { 
        tooltip
        .style("left" , (d3.event.pageX+10)+"px")
        .style("top" , (d3.event.pageY+25)+"px")
        .html(d.data.group + "this is a tooltip")
        }	)			
 .on("mouseout", tooltip.transition()
        .duration(200)
        .style("opacity", 0));
  
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate (0," + height +")")
  .call(d3.axisBottom(x));


    // Create the legend g's
  // Note the data join
  // Note the transform translate based on the selection element index
  var legend = svg.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  // Create rectangles for each legend g
  // Pass rect index to Z color ordinal scale
  legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", 
           colors);

  // Create text for each legend g
  // Use the data that it inherits to create the SVG text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });


 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.