anndo.js

var dataitems = [];

$(document).ready(function () {
    loadData();
    wireButtonClickEvents()
    filterData();
});

// Loads the CSV file
function loadData() {

  // load the demographics.csv file
  d3.csv("data/candy-data.csv", function (d){
    dataitems = d;
    visualizeData(sortData(dataitems, SORTING));
    // Filters???

  });
}

// ---------- FILTERING ----------
// function collectFilters () {
//
//   // Set up filters
//   var filters = [];
//
//   // If this filter is checked, add it to the array
//   d3.selectAll(".myCheckbox").each(function (d) {
//     cb = d3.select(this);
//     if(cb.property("checked")){
//       filters.push(cb.property("value"));
//     }
//   });
//
//   return filters;
// }

function filterData(){
    d3.selectAll(".myCheckbox").on("change", function (d) {
      cb = d3.select(this);
      // If the box is checked,
      if(cb.property("checked")){
        // filter the data using that criteria
        var filteredData = dataitems.filter(function(d){
          if(d[cb.property("value")]==1){
            return d;
          }
        });
        // Clear the chart
        $("#chart").empty();
        // Visualize the bar chart again
        visualizeData(sortData(filteredData, SORTING));
      }
    });
}

// ---------- SORTING ----------

// Sorting buttons
var SORTING = "winpercent";

function wireButtonClickEvents() {
    // SORTING
    d3.selectAll("#sorting .button").on("click", function () {
        SORTING = d3.select(this).attr("data-val");
        d3.select("#sorting .current").classed("current", false);
        d3.select(this).classed("current", true);
        $("#chart").empty();
        visualizeData(sortData(dataitems, SORTING));
    });
}

function sortData(data, option){

  switch (option) {
    case "winpercent": data.sort(function(a, b){return b.winpercent - a.winpercent}); break;
    case "price": data.sort((a, b) => b.pricepercent - a.pricepercent); break;
    case "sugar-content": data.sort((a, b) => b.sugarpercent - a.sugarpercent); break;
  }

  return data;
}

// ---------- BAR CHART ----------
function visualizeData(dataitems) {

  // set up margin/width/height
  var margin = { top: 100, right: 100, bottom: 200, left: 100 },
      width = 1200 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  // x
  var x = d3.scaleBand()
        .domain(dataitems.map(function (d) { return d.competitorname; }))
        .range([0, width])
        .padding(0.1);

  // y
  var y = d3.scaleLinear()
        .domain([0, d3.max(dataitems, function (d) {
          switch (SORTING) {
            case "winpercent": return d.winpercent; break;
            case "price": return d.pricepercent; break;
            case "sugar-content": return d.sugarpercent; break;
          }
        })])
        .range([height, 0]);

  // add svg
  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 + ")");

  // add the x Axis
  svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
        .style("text-anchor", "end")
        .transition()
        .delay((d, i) => i * 20)
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-50)");

  // add the y Axis
  svg.append("g")
        .call(d3.axisLeft(y));
}