Skip to content

Instantly share code, notes, and snippets.

@zaynaib

zaynaib/bar_notworking.js

Created July 29, 2020 22:45
Show Gist options
  • Save zaynaib/ccf64423e1f1eacef2508f7b29664a19 to your computer and use it in GitHub Desktop.
Save zaynaib/ccf64423e1f1eacef2508f7b29664a19 to your computer and use it in GitHub Desktop.
Download ZIP
Broken example of bar
Raw
bar_notworking.js
const barRect = wrapper.append("g")
.selectAll('rect')
.data(types)
.join('rect')
// xScale takes the type, returns the left/right location
.attr("x", d => xScale(d))
// yScale gets the count from the object
.attr("y", d => yScale(byType[d].length))
.attr("width", xScale.bandwidth())
// height has to be the distance from bar top to chart bottom
.attr("height", d=> dimensions.boundedHeight - yScale(byType[d].length))
.attr("fill","teal")
.append("text")
.attr("x", d => xScale(d))
// yScale gets the count from the object
.attr("y", d => yScale(byType[d].length-5))
.text("hello")
Raw
workingExample.js
const barRect = wrapper.append("g")
.selectAll('rect')
.data(types)
.join('rect')
// xScale takes the type, returns the left/right location
.attr("x", d => xScale(d))
// yScale gets the count from the object
.attr("y", d => yScale(byType[d].length))
.attr("width", xScale.bandwidth())
// height has to be the distance from bar top to chart bottom
.attr("height", d=> dimensions.boundedHeight - yScale(byType[d].length))
.attr("fill","teal")
wrapper.append("g").selectAll("text")
.data(types)
.join("text")
.attr("x", d=>xScale(d))
.attr("y", d => yScale(byType[d].length))
.text(d => byType[d].length)
.attr('fill','purple')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment