Help setting up D3 projects

JavaScript
1

I have been completely stumped on how to actually start any D3 projects. The only thing I am able to see is the “hello world” I made to test if the CDN works. Nothing else appears. I have even tried following along to online tutorials to see their setup and see some progress. But, the furthest I was able to get was seeing a purple square in the top left corner (no height differences, no width spacing, just the purple square). I understand what I learned in the lesson portions, but I can’t seem to make the output replicate the lesson’s outputs. I know I am missing some fundamental step, but I cannot see it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Gross Domestic Product</title>
  </head>
  <body>
    <main>
      <script type="module">
        import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

        const main = d3.select("main");
        main.append('h1').text('hello world')

        //     //   const body = d3.select("body");

        // fetch API
        // const url =
        //   "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";
        // const fetchData = fetch(url)
        //   .then((res) => res.json())
        //   .then((data) => {
        //     console.log(data.data);
        //   });

        // const gdpData = data.data;
        const DUMMY_DATA = [
          {
            id: "d1",
            region: "USA",
            value: 12,
          },
          {
            id: "d2",
            region: "France",
            value: 18,
          },
          {
            id: "d3",
            region: "Germany",
            value: 8,
          },
          {
            id: "d4",
            region: "China",
            value: 13,
          },
        ];

        const WIDTH = 500;
        const HEIGHT = 500;

        const x = d3.scaleBand().rangeRound([0, WIDTH]).padding(0.1);
        const y = d3.linearScale().range([HEIGHT, 0]);
        x.domain(DUMMY_DATA.map((d) => d.region));
        y.domain([0, d3.max(DUMMY_DATA, (d) => d.value + 3)]);

        const chartContainer = d3
          .select("svg")
          .attr("width", WIDTH)
          .attr("height", HEIGHT);

        const chart = chartContainer.append("g");

        chart
          .selectAll(".bar")
          .data(DUMMY_DATA)
          .enter()
          .append("rect")
          .classed("bar", true)
          .attr("color", "red")
          .attr("width", x.bandwidth())
          .attr("height", (d) => HEIGHT - y(d.value))
          .attr("x", (d) => x(d.region))
          .attr("y", (d) => y(d.value));


      </script>
      <style>
        body {
          background-color: rgb(57, 63, 69);
        }

        .bar {
          fill: purple;
        }
      </style>
    </main>

    <!-- <script src="script.js" type="javascript/text"></> -->
  </body>
</html>

Also if you would provide me your personal go to way to set up a project like the gdp (using a cdn, installing d3, things alike) I would very much appreciate your insight on that as well

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.