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.
I may have too much information showing all the HTML, but I thought maybe there was something else causing a conflict or overriding it…
Introduction to the Data Visualization with D3 Challenges at freeCodeCamp.com
javaScript.js
console.log('this works');
console.log(d3);
var WIDTH = 800;
var HEIGHT = 600;
d3.select('svg')
.style("fill", "red")
.style('width', WIDTH)
.style('height', HEIGHT);
d3.select("main")
.append("h1")
.text("Very important item");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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/" />
<title>turtlewolfe.github.io/fccD3/</title>
</head>
<body>
<!-- Header Showcase -->
<container class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
<svg></svg>
</main>
<!-- 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>
<div>by:
<a href="https://scripthammer.com/" target="_blank">
ScriptHammer.com © 2012<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script>
</a>
</div>
<!-- </div> -->
</footer>
</contain>
<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>
</body>
</html>
