Stuck: Data Vis Project - Visualize Data with a Bar Chart

Stuck: Data Vis Project - Visualize Data with a Bar Chart
0

#1

Hi,

I’m slowly working my way thru the Visualize Data with a Bar Chart project.

I can’t figure out how to get the bars to spread across the x-axis properly. All bars are currently stacked on each other. The x-axis represents dates.

Here is my project: https://codepen.io/tpmc123/pen/OoZEgJ/

Here is my current code for creating my xScale:

    let xMin = d3.min(dataArray, e => Date.parse(e[0]));
    console.log('xMin = ' + xMin);
    let xMax = d3.max(dataArray, e => Date.parse(e[0]));
    console.log('xMax = ' + xMax);
    const xScale = d3.scaleTime()
                     .domain([xMin, xMax])
                     .range(0, w);

And here’s my current code for displaying the bars:

svg.selectAll("rect")
       .data(dataArray)
       .enter()
       .append("rect")
       //.attr("x", (d,i) => xScale(Date.parse(d[0])))
       .attr("x", function(d, i) {
          //console.log('----')
          //console.log(Date.parse(d[0]))
          return Date.parse(d[0])
       })
       .attr("y", (d, i) => yScale(h - d[1]))
       .attr("width", w / dataArray.length)
       .attr("height", (d,i) => d[1])
       .attr("fill", "red")

I know I’ll have other issues once this is resolved, and I’m only focused on this issue for now. Can you help me get the bars to spread across the x-axis properly? I’m stuck!

THX!


#2

Figured it out. Simply forgot to add brackets to range():

const xScale = d3.scaleLinear()
                     .domain([xMin, xMax])
                     .range([0, w]);  // forgot brackets here