Skip to content

Instantly share code, notes, and snippets.

@macloo

macloo/d3_first_svg.html

Last active July 31, 2019 22:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save macloo/bc950d2209e2c9025a6051b246f6c802 to your computer and use it in GitHub Desktop.
Save macloo/bc950d2209e2c9025a6051b246f6c802 to your computer and use it in GitHub Desktop.
Download ZIP
D3 lesson from FCC No. 10: Learn About SVG in D3 and No. 11: Display Shapes with SVG
Raw
d3_first_svg.html
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
.append("svg")
.attr("width", w)
.attr("height", h);
// Add your code above this line
</script>
</body>
Raw
d3_no_11.js
// add a rectangle to the SVG - rect has 4 attributes, w, h, x, y
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code below this line
.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment