here to learn
html`
<button onclick="changeColor('red')">RED</button>
<button onclick="changeColor('blue')">BLUE</button>
<button onclick="changeColor('yellow')">YELLOW</button>
`
function changeColor(color){
d3.selectAll("circle")
.transition()
.duration(2000)
.style("fill", color)
}
viewof color_chart = {
var svg = d3.select(DOM.svg(1000, 130));
var data = [40, 120, 200];
var circles = svg
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('opacity', 1)
.attr('cx', d => d)
.attr('cy', 60)
.attr('r', 10);
// change circles' fill color and radius
circles.attr("fill", "gray");
circles.attr("r", 30);
// Note that by putting the changeColor function inside this cell,
// we can select from svg directly, instead of potentially selecting
// all circles in the notebook.
function changeColor(color) {
svg
.selectAll("circle")
.transition()
.duration(2000)
.style("fill", color);
}
// export the changeColor function in the SVG's .value property
svg.node().value = { changeColor };
return svg.node();
}
color_chart
{
const form = html`<form onsubmit="return false;">
<button name=red>RED</button>
<button name=blue>BLUE</button>
<button name=yellow>YELLOW</button>
</form>`;
// each of these buttons calls the function in the value of the color_chart cell
form.red.onclick = () => {
color_chart.changeColor('#FF2400');
};
form.blue.onclick = () => {
color_chart.changeColor('#000084');
};
form.yellow.onclick = () => {
color_chart.changeColor('#FECC02');
};
return form;
}
md `I'm still not sure I can succinctly describe what viewof does, but this example did help to show how we can pseudo replicate a global function and apply it to a control...?`
d3 = require("d3@6")
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.
