Skip to content

Instantly share code, notes, and snippets.

@macloo

macloo/d3_simple_bar.html

Created July 31, 2019 21:45
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/c380d25d3b6d63d6be019cf308172042 to your computer and use it in GitHub Desktop.
Save macloo/c380d25d3b6d63d6be019cf308172042 to your computer and use it in GitHub Desktop.
Download ZIP
From FCC D3 lessons, No. 8: Update the Height of an Element Dynamically
Raw
d3_simple_bar.html
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
/* extra style */
margin-right: 5px;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line - the * 10 is extra
.style("height", (d) => d * 10);
// Add your code above this line
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment