md`
## B part
`
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
//scales
var xScale = d3.scaleBand().domain(["A","B","C","D","F"]).range([30,570])
var yScale = d3.scaleLinear().domain([0,55]).range([270,30])
//axes
var xAxis = svg.append("g").attr("transform",`translate(0,270)`)
d3.axisBottom(xScale)(xAxis)
var yAxis = svg.append("g").attr("transform",`translate(30,0)`)
d3.axisLeft(yScale)(yAxis)
//button
var clickButton = svg.append("rect")
.attr("stroke","black")
.attr("fill","lightblue")
.attr("x",480)
.attr("y",30)
.attr("width",75)
.attr("height",35)
.on("click",function(){
var target = d3.select(this)
var fillColor = target.attr("fill")
if (fillColor == "lightblue"){target.attr("fill","pink")
}
else{target.attr("fill","lightblue")
}
var scaleSize = 0.1
if (fillColor == "lightblue"){blueSize = 1}
else{blueSize = 0.1}
})
//groups
var pinkGroup = svg.append("g").attr("transform",`scale(${blueSize})`)
var blueGroup = svg.append("g").attr("transform",`scale(${redSize})`)
//bars
for(let i = 0;i < grades.length;i++){
pinkGroup.append("rect")
.attr("stroke","black")
.attr("fill","pink")
.attr("x",xScale(grades[i].letter))
.attr("y",yScale(grades[i].total))
.attr("width",xScale.bandwidth())
.attr("height",yScale(0)-yScale(grades[i].total))
}
for(let i = 0; i < grades2.length;i++){
blueGroup.append("rect")
.attr("stroke","black")
.attr("fill","lightblue")
.attr("x",xScale(grades2[i].letter))
.attr("y",yScale(grades2[i].total))
.attr("width",xScale.bandwidth())
.attr("height",yScale(0)-yScale(grades2[i].total))
}
yield svg.node()
}
md`
## B+ part
`
grades2 = [{letter:"A",total:20},{letter:"B",total:10},{letter:"C",total:40},{letter:"D",total:30},{letter:"F",total:10},]
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.
