D3 Bar Chart Program Not Finding d3.json Call

JavaScript
1

My program is not finding d3.json(“url”, function). I got the information from geeksforgeeks.com.

The code is below:

<body>
	<h1 id="title">
	</h1>
  <div class="bar-chart">
  </div>
  <script src=". /script.js ">
  </script>
</body>

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bar {
	fill: green;
}

.bar:hover {
	fill: lightblue;
}

.bar-chart {
	position: relative;
}

#tooltip {
  position: absolute;
  width: 160px;
  height: 60px;
  padding: 0.5em;
  font: 1rem;
  border-radius: 4px;
  pointer-events:none;
  color: black;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

import d3 from "https://esm.sh/d3";

let json = [];

const w = 800;
const h = 500;
const pad = 50;
const title = document.getElementById("title");

d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", json => {


const { source_name } = name;

alert(d[0] + " " + d[1] + "\n" + name);
window.exit();

title.innerText = name;

const dataset = json["data"];
const dSetLength = dataset.length;

const mxDate = d3.max(data-set, d => d[0]);
const mnDate = d3.min(data-set, d => d[0]);

const xScale = d3
  .scaleTime()
  .domain([new Date(mnDate), new Date(mxDate)])
  .range(pad, w - pad);

const mxGDP = d3
  .max(dataset, d => d1);

const yScale = d3
  .scaleLinear()
  .domain([0, mxGDP])
  .range(h - pad, pad);

const svg = d3
  .select(".bar-chart")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

const tooltip = d3
	.select(".bar-chart")
	.append("div")
	.attr("id", "tooltip")
	.style("opacity", 0);

svg
	.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("data-date", (d, i) => d[0])
	.attr("data-gdp", (d, i) => d[1])
	.attr("x", (d) => xScale(new Date(d[0])))
	.attr("y", (d) => yScale(d[1]))
	.attr("width", width / dSetLength)
	.attr("height", (d, i) => h - pad - yScale(d[1]))
	.on("mouseover", (d, i) => {
		tooltip
      .transition()
      . duration(200)
		  .style("opacity", 0.9)
			.html(`Quarter: ${d[0]}<br>GDP: ${d[1]}`)
			.attr("data-date", d[0])
			.attr("data-gdp", d[1])
       .style("left", (w - pad) + 5 + "px")
       .style("top", (yScale(d[1] - pad) - 50 + "px"))
	     .on("mouseout", () => {
	       	tooltip
             .transition()
             .duration(200)
             .style("opacity", 0);
	      });

	const xAxis = d3
    .axisBottom(xScale)
    .ticks(5);

	svg
		.append("g")
		.attr("id", "x-axis")
		.attr("transform", `translate(0, ${h - pad})`)
		.call(xAxis);

	const yAxis = d3.axisLeft(yScale);

	svg
		.append("g")
		.attr("id", "y-axis")
		.attr("transform", `translate(${pad}, 0)`)
		.call(yAxis)

  const legend = () => {
	  svg
		  .append("text")
		  .attr("transform", "rotate(-90)")
		  .attr("x", -240)
	   	.attr("y", 80)
	   	.text(`GDP: $`);
	})

Thank you for your help.

3

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

4

Yes, but it only passed 5 of the steps. The x axis oddly is on the top instead of the bottom with a year scale starting at 1970 and the bars don’t appear.