D3 Width and Height Variables

I’ve been trying to set up a template for the D3 projects, but I’m afraid I’m missing something basic. The book I’m reading says that I just need the CDN for D3 and then this short clip in my javascript. It did have a typo as far as no space between the var and the height and width, I’ve tried changing them to let. But the <svg><svg/> is still the same default size of 300x150 px. What am I missing?
I added an h1 to the main as an experiment and that seems to be working and it’s getting the fill red, also an experiment, and while it’s showing up in the DOM it’s not actually changing the color.

Introduction to the Data Visualization with D3 Challenges at freeCodeCamp.com

live demo,


console.log('this works');

var WIDTH = 800;
var HEIGHT = 600;

  .style("fill", "red")
  .style('width', WIDTH)
  .style('height', HEIGHT);

  .text("Very important item");


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>

    <!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
    <!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@500&display=swap" rel="stylesheet">  -->

    <meta property="og:description" content="Template for the Data Visualization with D3 Challenges at freeCodeCamp.com"/>
    <!-- <meta property="og:image" content="	https://sastudio.org/images/WelcomeToSaStudio.png" /> -->
    <!-- <meta property="og:image" content="https://CRUDgames.com/images/CRUDgamesCOM.png" /> -->
    <!-- <meta property="og:image" content="https://CRUDgames.com/images/CRUDgamesCOM.png" /> -->
    <!-- <meta property="og:image" content="https://CRUDgames.com/images/CRUDgamesCOM.png" /> -->
    <meta property="og:image:height" content="630" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:locale" content="en_US" />
    <!-- <meta property="og:locale" content="en_GB" /> -->
    <meta property="og:title" content="fccD3" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://turtlewolfe.github.io/fccD3/" />
<!-- Header Showcase -->
<container class="d-flex flex-column min-vh-100">
  <main class="flex-fill">

<!-- Footer -->
<footer id="main-footer" class="footer mt-auto py-3 bg-dark">
  <!-- <div class="container"> -->
    <span class="text-muted">dev.TurtleWolfe@gmail.com.</span>
      <a href="https://scripthammer.com/" target="_blank">
        ScriptHammer.com &copy; 2012<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script>
  <!-- </div> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="./javaScript/javaScript.js"></script>


I’m not quite sure what are you asking.
But looking at the live demo, your svg is showing the right size of 800x800
fill property is for svg only, not for h1. For text, you can use color property.
The svg have fill of red but since your svg is empty, so it didn’t show anything yet.

apparently FireFox has issues with ‘resizing’ SVG elements. It’ll draw them OK as just an SVG, but if you use any code to resize them it doesn’t get the update. I found a thread on Stack Over Flow about it and the work around people have used.


1 Like