seed, teach, grow
Published
Edited
Jan 28, 2019
5 stars
Also listed in…
only_d3
chart = {
//globals
let setIndex="set1";
const bouton = html`<button id="monBouton">Change data</button>`
const svgDoc = d3.select(DOM.svg(width, height)); // not the same as html`<svg width=width, height=height></svg>` But .. DOM.svg(width, height) seems very close..
// the title
svgDoc.append("text")
.attr("x", baseLine.xMiddle)
.attr("y",50)
.text("Dataset "+setIndex)
.style("text-anchor","middle");
//create axis line
svgDoc.append("line")
.attr("x1", baseLine.x)
.attr("y1", baseLine.y)
.attr("x2", baseLine.x + baseLine.length)
.attr("y2", baseLine.y)
.style("stroke","#ddd")
.style("shape-rendering","crispEdges");
//create basic circles
svgDoc.append("g").selectAll("circle")
.data(data[setIndex]) // eval("dataArray"+dataIndex)
.enter()
.append("circle")
.attr("cx", place_circle)
.attr("cy", baseLine.y)
.attr("r", (d,i) => d)
.style("fill","orange") // style from css
.style("stroke", "orange")
.style("fill-opacity",'0.5');
// second cut
//button to swap over datasets
d3.select(bouton) // not as same //d3.select("#monBouton")
// d3.select("#monBouton")
.text("Change data")
.on("click", on_click_func);
function on_click_func(){
//select new data by cycling between dataIndex 1 and 2 (see if at end of notebook)
//dataIndex = dataIndex + i.pow(2*dataIndex-2)
setIndex = (setIndex === "set1") ? "set2" : "set1";
//rejoin data
const circle = svgDoc.select("g").selectAll("circle")
.data(data[setIndex]);
circle.exit().remove(); //remove unneeded circles
circle.enter().append("circle")
.attr("cx", place_circle)
.attr("cy", baseLine.y)
.attr("r", (d,i) => d)
.style("fill","orange") // style from css
.style("stroke", "orange")
.style("fill-opacity",'0.5');
// .attr("r", d=>d);//create any new circles needed
//update all circles to new positions
circle.transition()
.duration(500)
.attr("cx", place_circle)
.attr("cy", baseLine.y)
.attr("r", (d,i) => d);
svgDoc.select("text").text("Dataset "+setIndex);
};//end click function
function place_circle(d,i){
const spacing = baseLine.length/(data[setIndex].length);
return baseLine.x+(i*spacing)
}
const div = html`<div></div>`;
div.appendChild(bouton);
div.appendChild(svgDoc.node());
return div
}
DOM
{
var foo = 2
if (foo==1) {
foo=2;
} else {
foo=1;
}
return foo
}
{
var foo = 2
foo = (foo == 1)
? 2
: 1
return foo
}
{
var foo = 2
foo = (foo == 1) ? 2 : 1
return foo
}
{
var foo = 2
return foo + i.pow(2*foo-2).re
}
svg = { return html`<svg width=width, height=height></svg>`}
svg3 = { return DOM.svg(width, height)}
svg2 = { return d3.select(DOM.svg(width, height))}
bouton2 = html`<button id="monBouton2">Change data</button>`
d3.select("#monBouton2")
d3.select(bouton2)
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.
