Published
Edited
Jan 24, 2019
5 stars
Insert cell
Insert cell
svgDoc = {
var dataArray1 = [30,35,45,55,70];
var dataArray2 = [50,55,45,35,20,25,25,40];

//globals
var dataIndex=1;
var xBuffer=50;
var yBuffer=150;
var lineLength=400;

// Trying stuff to get the button working
// added to debug button issue. I want to add a parent element so I can place the button a sibling of the svg element
// var main = d3.select(html`<div></div>`)
//create main svg element
// var svg = d3.select(DOM.svg(width, height));
// var svgDoc = main.node().appendChild(svg.node()); // hard !!!
var svgDoc = d3.select(DOM.svg(width, height));

// the title
svgDoc.append("text")
.attr("x",xBuffer+(lineLength/2))
.attr("y",50)
.text("dataset"+dataIndex)
.style("text-anchor","middle");

//create axis line
svgDoc.append("line")
.attr("x1",xBuffer)
.attr("y1",yBuffer)
.attr("x2",xBuffer+lineLength) // x1 again ???
.attr("y2",yBuffer)
.style("stroke","#ddd")
.style("shape-rendering","crispEdges");

// first cut
//create basic circles
svgDoc.append("g").selectAll("circle")
.data(eval("dataArray"+dataIndex))
.enter()
.append("circle")
.attr("cx", place_circle)
.attr("cy",yBuffer)
.attr("r",function(d,i){return d})
.style("fill","orange") // style from css
.style("stroke", "orange")
.style("fill-opacity",'0.5');

// second cut
//button to swap over datasets
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)

//rejoin data
var circle = svgDoc.select("g").selectAll("circle")
.data(eval("dataArray"+dataIndex));

circle.exit().remove(); //remove unneeded circles
circle.enter().append("circle")
.attr("r",0);//create any new circles needed

//update all circles to new positions
circle.transition()
.duration(500)
.attr("cx", place_circle)
.attr("cy",yBuffer)
.attr("r",function(d,i){return d});

svgDoc.select("text").text("dataset"+dataIndex);

};//end click function
function place_circle(d,i){
var spacing = lineLength/(eval("dataArray"+dataIndex).length);
return xBuffer+(i*spacing)
}
return svgDoc.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
monBouton = {
var bouton = html`<button id="monBouton">Change data</button>`
// viewof bouton = button({value: "change data"})
var parent = svgDoc.parentNode;
return parent.insertBefore(bouton, svgDoc)
}
Insert cell
// access the button back
d3.select("#monBouton").node()
Insert cell
Insert cell
import {button} from "@jashkenas/inputs"
Insert cell
DOM
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
var foo = 2
if (foo==1) {
foo=2;
} else {
foo=1;
}
return foo
}
Insert cell
{
var foo = 2
foo = (foo == 1)
? 2
: 1
return foo
}
Insert cell
{
var foo = 2
foo = (foo == 1) ? 2 : 1
return foo
}
Insert cell
{
var foo = 2
return foo + i.pow(2*foo-2).re
}
Insert cell
Insert cell
Insert cell

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.
Learn more