Published
Edited
Feb 2, 2022
UPDATE chart
data = [1,2,3,4,5]
height = 200
// svg = d3.create("svg")
// .attr("width", width)
// .attr("height", height)
// .attr("fill", 'black')
chart = new MyChart(data)
gb = chart.render()
class MyChart {
_height = 200
constructor(data) {
this._data = data
this._svg = d3.create("svg")
.attr("width", width)
.attr("height", this._height)
}
data(_) {
return arguments.length ? (this._data = _, this) : this._data;
}
removeData() {
this._data.shift()
console.log(this._data)
}
render() {
this._svg
.selectAll("circle")
.data(this._data)
.join(
enter => enter.append("circle")
.attr("cx", d => d * 30)
.attr("cy", this._height / 2)
.attr("r", d => d)
.attr("fill", "hsl(216deg 100% 13%)"),
update => update
.attr("fill", "gray"),
exit => exit
.attr("fill", "red")
);
// .join("circle")
// .attr("cx", d => d * 30)
// .attr("cy", this._height / 2)
// .attr("r", d => d)
// .attr("fill", "hsl(216deg 100% 13%)");
return this._svg.node();
}
}
dd = setTimeout(() => {
console.log('aaaaaaaaaaa')
chart.data([2,3]).render()
},5000)
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.
