Data viz bar chart challenge not working in CodePen

Hi guys I have finally finished first data visualisation challenge that works but only in browser. When I place code into CodePen it stops on second test and say I do not have g group with id but I do. Can someone help me with this issue?
Here is code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .container {
        background: #fed120;
      }
      div.tooltip {
        position: absolute;
        text-align: center;

        padding: 20px;
        font: 12px sans-serif;
        line-height: 1;
        font-weight: bold;
        padding: 5px;
        background: rgba(0, 0, 0, 0.8);
        color: rgb(171, 171, 171);
        border-radius: 2px;
      }
      div.tooltip span {
        color: #fed120;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <h1 id="title">CHART</h1>
      <div class="mainHolder"></div>
    </div>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script>
      d3.json(
        "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
        function(resData) {
          const dataArray = resData;
          // console.log(dataArray);
          console.log(resData);
          const data = dataArray.data;
          const w = 600;
          const h = (w * 4) / 5;

          const margin = { top: 20, right: 20, bottom: 40, left: 60 };
          const chartWidth = w - margin.right - margin.left;
          const chartHeight = h - margin.top - margin.bottom;
          const barWidth = chartWidth / data.length;
          console.log(barWidth);

          // const value_X = d => d[0];
          // const value_Y = d => d[1];

          const maxDate = new Date(dataArray.to_date);
          const minDate = new Date(dataArray.from_date);

          // 1. --------------------- add SCALES
          const xScale = d3
            .scaleLinear()
            .range([0, chartWidth])
            .domain([minDate, maxDate]);

          const yScale = d3
            .scaleLinear()
            .range([0, chartHeight])
            .domain([d3.max(data, value_Y), 0]);
          // console.log(yScale.domain());

          // 2. --------------------- add AXIS
          const xAxis = d3
            .axisBottom()
            .scale(xScale)
            .tickFormat(d3.timeFormat("%Y"))
            .ticks(10);

          const yAxis = d3
            .axisLeft()
            .scale(yScale)
            .ticks(20);

          // 3. --------------------- create MAIN HOLDER SVG
          const svg = d3
            .select(".mainHolder")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

          // 4. --------------------- append inner group (chart) for chart inside of svg
          const chart = svg
            .append("g")
            .attr("width", chartWidth)
            .attr("height", chartHeight)
            .attr("transform", `translate(${margin.left},${margin.top})`);

          // 5. --------------------- append axis onto inner group (chart)
          chart.append("g").call(yAxis);
          chart
            .append("g")
            .call(xAxis)
            .attr("id", "x-axis")
            .attr("class", "tick")
            .attr("transform", `translate(0, ${chartHeight})`);

          // 6. --------------------- Tooltip
          var toolTip = d3
            .select("body")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

          // add basic BAR style
          const bar = chart
            .selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .style("fill", function(d, i) {
              return i % 2 ? "#e14588" : "#ef81ed";
            })
            .attr("id", "bar")
            .attr("width", barWidth)
            .attr("height", d => chartHeight - yScale(d[1]))
            .attr("x", (d, i) => barWidth * i)
            .attr("y", d => yScale(d[1]))
            .on("mouseover", function(d) {
              d3.select(this).style("fill", "#fed120");
              toolTip
                .transition()
                .duration(200)
                .style("opacity", 0.9);
              toolTip
                .html(
                  `US-GDP (bn)<br>
                <span>${d[0]}</span><br>
                <span>$${d[1]}</span>`
                )
                .style("left", d3.event.pageX + "px")
                .style("top", d3.event.pageY - 60 + "px");
            })

            .on("mouseout", function(d, i) {
              const oldFill = i % 2 ? "#e14588" : "#ef81ed";
              d3.select(this).style("fill", oldFill);
              toolTip
                .transition()
                .duration(500)
                .style("opacity", 0);
            });
        }
      );
    </script>
  </body>
</html>

Thanks upfront for any suggestion
Stan

I’ve not gotten into D3 yet but this caught my eye:

chart.append("g").call(yAxis);
          chart
            .append("g")
            .call(xAxis)
            .attr("id", "x-axis")
            .attr("class", "tick")
            .attr("transform", `translate(0, ${chartHeight})`);

Looks like you give the x-axis .attr but I don’t see where you did the same for the y-axis.
-J

oh,I have forget to update code I have tried to add id attribute, but even when I add .attr('id', 'y-axis') after chart.append("g").call(yAxis) nothing changed. ;( I have even start from scratch in Codepen, still same result.

I have find solution. Problem was in version of D3. Codepen will offer (by its own CDN search) only latest version(5.9.7), after copying link to d3 v.4 from my project into Codepen JS source all is working. I have also switched to ‘Chrome’ as recommended just in case, usually I’m in “Mozilla”

1 Like