MarkdownHTMLSVGTransitionsArrays and ObjectsFunctionsFor LoopsMapAntCell and Grid ClassesCanvas TutorialRandom WalkersCanvas TemplateTreesHalloween AnimationRoulette WheelAnts at the PicnicImages for PracticeImage Processing PracticeCounting ObjectsPractice TemplateImages for PracticeRandom Walker PaintersImages for Exam Problem 2
Classes
{
const svg = d3.select(html`<svg width = 300 height = 300 style = "border:1px black solid"></svg>`)
yield svg.node()
const circle = new Circle(svg,10,10)
}
class Circle{
constructor(element,x,y){
this.element = element
this.x = x
this.y = y
this.px = this.xScale(this.x)
this.py = this.yScale(this.y)
this.r = 10
this.fill = "steelblue"
this.stroke = "black"
this.element.append("circle")
.attr("cx",this.px)
.attr("cy",this.py)
.attr("r",this.r)
.attr("fill",this.fill)
.attr("stroke",this.stroke)
}
xScale(x){
return d3.scaleLinear().domain([-10,10]).range([0,300])(x)
}
yScale(y){
return d3.scaleLinear().domain([-10,10]).range([300,0])(y)
}
}
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.
