Use JavaScript in VS Code

JavaScript
1

So I’ve made it through a decent number of the FreeCodeCamp lessons. I’m now slowly transitioning towards learning to code in a widely used text editor. For now I’ve chosen Microsoft Visual Studio Code. I’m trying to transfer the code for the Bar Chart project from the Data Visualization Certification. My HTML and CSS work fine, but my JS file isn’t showing up on the webpage. I’ve included a copy and paste of my HTML, CSS and JS below. If this is too messy, please feel free to suggest a cleaner way to show you my code in VS Code.

HTML:

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    
    <div id = "mainCont">
        <div id = "lowerCont">
            <div id = "title">U.S. Gross Domestic Product</div>
            <div id = "barChart"></div>
        </div>
    </div>


</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou');

html {
  background-color: #B7EDF7;
}

.bar:hover {
  fill: white;
}

#mainCont {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#lowerCont {
  width: 950px;
  height: 70vh;
  background-color: white;
  border-radius: 0.8%;
  padding-left: 50px;
}

#tooltip {
  font-family: ZCOOL QingKe HuangYou;
}

#title {
  font-family: ZCOOL QingKe HuangYou;
  font-size: 32px;
  padding-top: 15px;
  text-align: center;
}

JS:

let h = 418;
let w = 900;
let padding = 15;
let barW = w / 275;

let svg = d3.select("#barChart")
  .append("svg")
  .attr("height", h)
  .attr("width", w);

let json = d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json").then(function(data) {
    
  //Determing time for the x- and y-axis scales.
  
  let time = data.data.map(function(x) {
    return new Date(x[0]);   
  })
  //console.log(time);
  
  //Extending the most recent date by 12 months so that the data is displayed better.
  let maxT = new Date(d3.max(time));
  maxT.setMonth(maxT.getMonth() + 12);
  //console.log(maxT);
  
  //creating the scale for the x-axis
  
  let xScale = d3.scaleTime()  
    .domain([d3.min(time), maxT])
    .range([0, w - 50]);
  
  //creating the x-axis
  
  let xAxis = d3.axisBottom(xScale);
  
  svg.append("g")
    .attr("transform", "translate(40, 398)")
    .attr("id", "x-axis")
    .call(xAxis);
  
  //y-axis scale
  
  //this is rounding the GDP to hundreds, makes the y-axis cleaner
  let gdpRound = data.data.map(function(x) {
    return Math.ceil((x[1] / 100) * 100);
  });
  //console.log(gdpRound);
  
  let yScale = d3.scaleLinear()
    .domain([0, d3.max(gdpRound) + 1000])
    .range([h - 20, 0]);
  
  //creating y-axis
  
  let yAxis = d3.axisLeft(yScale);
  
  svg.append("g")
    .attr("transform", "translate(40, 0)")
    .attr("id", "y-axis")
    .call(yAxis);
    
  //tooltip
  
  let tooltip = d3.tip()
  .attr("id", "tooltip")
  .offset([-10, 0])
  .attr("data-date", (d, i) => {
    return data.data[i][0];
  })
  .html(function(d, i) {
      return "<strong>GDP</strong>: $" + (d * (gdpMax / d3.max(gScaled))).toLocaleString() + " Billion" + "<br>" + "<strong>Date</strong>: " + data.data[i][0]
  });

  svg.call(tooltip);
  
  //creating bars
  
  let gdp = data.data.map(function(x) {
    return x[1];
  })
  
  let gdpMax = d3.max(gdp);
  let gdpMin = d3.min(gdp);
  console.log(gdpMax);
  
  let gScale = d3.scaleLinear()
    .domain([0, gdpMax])
    .range([0, h - 20]);
  
  let gScaled = gdp.map(function(x) {
    return gScale(x);
  })
  console.log(gScaled);
  
  svg.selectAll("rect")
    .data(gScaled)
    .enter()
    .append("rect")
    .attr("data-date", function(d, i) {
      return data.data[i][0]
  })
    .attr("data-gdp", function(d, i) {
      return data.data[i][1]
  })
    .attr("class", "bar")
    .attr("x", function(d, i) {
      return xScale(time[i])
  })
    .attr("y", function(d, i) {
      return h - d
  })
    .attr("width", barW)
    .attr("height", (d) => d)
    .attr("transform", "translate(40, -20)")
    .attr("fill", "#CE6906")
    .on("mouseover", tooltip.show)
    .on("mouseout", tooltip.hide);
  
})
3

Thanks very much for your help on formatting the post. I’ll update the HTML code as well.