Visualize Data with a Bar Chart-Can't tests to pass

[rrspence]

Hi!

Could someone please help me figure out what i’m doing wrong here?

For some reason I can’t get the tests below to pass but everything else seems to be working…

5. My Chart should have a element for each data point with a corresponding class=“bar” displaying the data

7. The bar elements’ “data-date” properties should match the order of the provided data

8. The bar elements’ “data-gdp” properties should match the order of the provided data

Here’s what I have so far:

//url for dataset 
var url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json';
//initialize dataset variable to hold loaded data 
var dataset;

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 800 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
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 + ")");

//load data 
d3.json(url).then(function(data) { 
  dataset = data.data;
  
//create tooltip
  var tooltip = d3.select('body')
  .append('div')
  .attr('class', 'tooltip')
  .attr('id', 'tooltip')
  .style('opacity', 0);
  
  //create y scale 
  var yMax = d3.max(dataset, function(d) { return d[1]});
  var yMin = d3.min(dataset, function(d) { return d[1]});
  var yScale = d3.scaleLinear()
    .domain([0, yMax])
    .range([height, 0]);
 
  //create y axis 
  var yAxis = d3.axisLeft(yScale);
  svg.append('g')
  .attr('id', 'y-axis')
  .attr('transform', 'translate(0' + margin.right + ')') //translate y axis because of margin 
  .call(yAxis)
  
  //create g elements to hold rects + data
  var bars = svg.selectAll('g')
  .data(dataset)
  .enter().append('g');
  
  bars.append('rect')
  .attr('class', 'bar')
  .attr('x', function(d, i) { return i * (width/dataset.length)})
  .attr('y', function(d) { return yScale(d[1])})
  .attr('width', width/dataset.length)
  .attr('height', function(d) { return height-yScale(d[1]) })
  .attr('fill', 'orange')
  .attr('data-date', function(d) {return d[0]})
  .attr('data-gdp', function(d) {return d[1]})
  //tool tip events added here 
    .on('mouseover', function(d) {
  tooltip
  .transition()
  .duration(200)
  .style('opacity', 0.9)
  tooltip
    .html("Date:<br>" + d[0]
         + "<br>" + "GDP: $" + d[1])
  .style('left', d3.event.pageX + 20 + 'px')
  .style('top', d3.event.pageY + 20 + 'px');
  tooltip.attr('data-date', d[0]);
  })
  .on('mouseout', function(d) {
    tooltip.transition()
    .duration(400)
    .style('opacity', 0)
   
  })
  
  //create scale for x 
var parseTime = d3.timeParse('%Y-%m-%d');
var timeData = dataset.map(function(d) {return parseTime(d[0])});
var maxDate = d3.max(timeData);
var minDate = d3.min(timeData);
var xScale = d3.scaleTime()
  .domain([minDate, maxDate])
  .range([0, width]);
//create x axis  
var xAxis = d3.axisBottom(xScale)
svg.append('g')
  .attr('id', 'x-axis')
.call(xAxis)
  .attr('transform', 'translate(0' + ','+ height + ')')
  .ticks()
  .attr('class', 'ticks') 
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:

freeCodeCamp.org