CODEWITHSUNDEEP
javascriptsvgd3.js
Andrew Nguyen
Andrew Nguyen

Reputation: 1436

Charts not showing up in D3

Where I'm at

Tackling an assignment, I changed one of my data variables var csvData, but now only one of my charts is showing up in D3. Previously all four and a legend were showing up.

scripts.js (Updated with food prices data, still not showing up)

$(function() {
  $("#placeholder").remove();
  var margin = {top: 60, right: 20, bottom: 30, left: 40},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

  // X is the horizontal axis
  var x0 = d3.scale.ordinal() // ordinal for non quantitative scales, like names, categories
  .rangeRoundBands([0, width], .1); // Width of each individual bar?

  var x1 = d3.scale.ordinal();

  var y = d3.scale.linear()
  .range([height, 0]);

  // Bar chart colors
  var color = d3.scale.ordinal()
  .range(["#001F4C", "#003D99", "#005CE6", "#0066FF", "#3385FF", "#80B2FF", "#CCE0FF", "#E6F0FF", "#E6EBFA"]);

  var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

  var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left") // Where the Y axis goes, you'll want it on the left
  .ticks(8)
  .tickValues([0, 1, 2, 3, 4, 5, 6]);

  var svg = d3.select("body").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 + ")");

  // Bar chart data
  var csvData = [
  {"Store":"Co-op","Broccoli":2.69,"Cauliflower":3.69,"Celery":1.89,"Strawberries":4.49,"Oranges":1.69,"Tomatoes":3.49,"Lemons":0.99, "Lettuce":3.99, "Cucumber":2},
  {"Store":"Safeway","Broccoli":2.97,"Cauliflower":3.98,"Celery":1.77,"Strawberries":5.96,"Oranges":0.97,"Tomatoes":2.97,"Lemons":0.77, "Lettuce":4.97, "Cucumber":1.97},
  {"Store":"Sobeys","Broccoli":3.49,"Cauliflower":3.99,"Celery":1.29,"Strawberries":3.99,"Oranges":1.99,"Tomatoes":4.99,"Lemons":1.29, "Lettuce":3.49, "Cucumber":1.99},
  {"Store":"Superstore","Broccoli":2.69,"Cauliflower":2.49,"Celery":1.09,"Strawberries":2.99,"Oranges":0.99,"Tomatoes":3.99,"Lemons":0.99, "Lettuce":4.99, "Cucumber":2.49},
  ];

  var data = csvData;
  var foodNames = d3.keys(data[0]).filter(function(key) { return key !== "Store"; });

  data.forEach(function(d) {
    d.food = foodNames.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.Store; }));
  x1.domain(foodNames).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.food, function(d) { return d.value; }); })]);

  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)") // Rotates the label on the Y axis
  .attr("y", 8) // Label spacing from Y axis
  .attr("dy", ".71em") // Label spacing from Y axis
  .style("text-anchor", "end") // Anchor the label to the end of the Y axis
  .text("Price (in dollars)"); // Changes the text on the Y or vertical axis

  var store = svg.selectAll(".store") // Selects all of the data in column labelled store
  .data(data)
  .enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x0(d.Store) + ",0)"; });

  store.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("class", "stick")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
  .data(foodNames.slice().reverse())
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 22.5 + ")"; }); // Determines spacing between items in legend

  legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });
});

Upvotes: 0

Views: 162

Answers (1)

saikiran.vsk
saikiran.vsk

Reputation: 1796

$(function() {
  $("#placeholder").remove();
  var margin = {top: 60, right: 20, bottom: 30, left: 40},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

  // X is the horizontal axis
  var x0 = d3.scale.ordinal() // ordinal for non quantitative scales, like names, categories
  .rangeRoundBands([0, width], .1); // Width of each individual bar?

  var x1 = d3.scale.ordinal();

  var y = d3.scale.linear()
  .range([height, 0]);

// These are the colors
  var color = d3.scale.ordinal()
  // .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  .range(["#001F4C", "#003D99", "#005CE6", "#0066FF", "#3385FF", "#80B2FF", "#CCE0FF", "#E6F0FF", "#E6EBFA"]);

  var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

  var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left") // Where the Y axis goes, you'll want it on the left
  // .tickFormat(d3.format(".1s"));
  .ticks(8)
  .tickValues([0, 1, 2, 3, 4, 5, 6]);

  var svg = d3.select("body").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 + ")");

  // Bar chart data
  var csvData = [
  {"Store":"Co-op","Broccoli":2.69,"Cauliflower":3.69,"Celery":1.89,"Strawberries":4.49,"Oranges":1.69,"Tomatoes":3.49,"Lemons":0.99, "Lettuce":0.01, "Cucumber":2},
  {"Store":"Safeway","Broccoli":2.97,"Cauliflower":3.98,"Celery":1.77,"Strawberries":5.96,"Oranges":0.97,"Tomatoes":2.97,"Lemons":0.77, "Lettuce":4.97, "Cucumber":1.97},
  {"Store":"Sobeys","Broccoli":3.49,"Cauliflower":3.99,"Celery":1.29,"Strawberries":3.99,"Oranges":1.99,"Tomatoes":4.99,"Lemons":1.29, "Lettuce":3.49, "Cucumber":1.99},
  {"Store":"Superstore","Broccoli":2.69,"Cauliflower":2.49,"Celery":1.09,"Strawberries":2.99,"Oranges":0.99,"Tomatoes":3.99,"Lemons":0.99, "Lettuce":4.99, "Cucumber":2.49},
  ];

  // Food Prices
  // var csvData = [
  // {"Store":"Sobey","Broccoli":2.69,"Cauliflower":3.69,"Celery":$1.89,"Strawberries":$4.49,"Oranges":"1.69,"Tomatoes":$3.49,"Lemons":$0.99,"Lettuce":$0.00,"Cucumber":2.00},
  // {"Store":"Superstore","Broccoli":2.97,"Cauliflower":3.98,"Celery":1.77,"Strawberries":5.96,"Oranges":0.97,"Tomatoes":2.97,"Lemons":0.77,"Lettuce":4.97,"Cucumber":1.97},
  // {"Store":"Safeway","Broccoli":3.49,"Cauliflower":3.99,"Celery":1.29,"Strawberries":3.99,"Oranges":1.99,"Tomatoes":4.99,"Lemons":1.29,"Lettuce":3.49,"Cucumber":1.99},
  // {"Store":"Coop","Broccoli":2.69,"Cauliflower":"2.49","Celery":"1.09","Strawberries":"2.99","Oranges":"0.99","Tomatoes":"3.99","Lemons":"0.99","Lettuce":"4.99","Cucumber":"2.49"}
  // ];

  // AgeNames = FoodNames
  // States = Stores

  var data = csvData;
  // var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
  var foodNames = d3.keys(data[0]).filter(function(key) { return key !== "Store"; });

  data.forEach(function(d) {
    d.ages = foodNames.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.Store; }));
  x1.domain(foodNames).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)") // Rotates the label on the Y axis
  .attr("y", 8) // Label spacing from Y axis
  .attr("dy", ".71em") // Label spacing from Y axis
  .style("text-anchor", "end") // Anchor the label to the end of the Y axis
  .text("Price (in dollars)"); // Changes the text on the Y or vertical axis

  var store = svg.selectAll(".store") // Selects all of the data in column labelled store
  .data(data)
  .enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" +
    x0(d.Store) 
  + ",0)"; });

  store.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("class", "stick")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
  .data(
    foodNames.slice().reverse()
  )
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 22.5 + ")"; });
  // Number (20) determines spacing between items in legend

  legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

We have seen two mistakes in two areas, those are 1) transform attribute value setting x0(d.store) store is undefined it must be x0(d.Store)

and 2) ageNames is not at all declared, commented and using it in 

var legend = svg.selectAll(".legend")
  .data(ageNames.slice().reverse() )

change it to

var legend = svg.selectAll(".legend")
  .data( foodNames.slice().reverse() )

Hope you got, or else ask for more...

Upvotes: 2

Related Questions