// write answer here
// write your answer here
bardata = [
{xPos: 10, yPos: 50, width: 30, height: 50, color: 'blue'},
{xPos: 45, yPos: 20, width: 30, height: 80, color: 'red'},
{xPos: 80, yPos: 70, width: 30, height: 30, color: 'yellow'}
]
// write your answer here
bars = [
{name: 'a', value: 5, color: 'blue'},
{name: 'b', value: 8, color: 'red'},
{name: 'c', value: 3, color: 'yellow'}
]
width = 300
height = 100
x = d3.scaleBand()
.domain(bars.map(d => d.name))
.range([0, width])
.padding(0.2)
y = d3.scaleLinear()
.domain([0, d3.max(bars, d => d.value)])
.range([0, height])
{
const svg = d3.create('svg').attr("width", width).attr("height", height);
svg.selectAll('rect')
.data(bars)
.join('rect')
.attr('fill', d => d.color)
.attr('x', d => ) // EDIT THIS LINE
.attr('y', d => ) // EDIT THIS LINE
.attr('width', ) // EDIT THIS LINE
.attr('height', ); // EDIT THIS LINE
return svg.node();
}
d3 = require("d3@7")
import {solution} from "@nyuvis/d3-introduction"
import {chart as scaleDiagram} from "@uw-info474/animated-scale-diagram"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
