Published (unlisted)
Insert cell
Insert cell
Added in fork
Insert cell
Added in fork
Insert cell
Added in fork
Insert cell
Added in fork
Insert cell
Added in fork
Insert cell
Changed in fork
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;
+
//global constants can be in their own cells let dataIndex=1;
+
// let's have this cell contain all the html elements that it will use // as well as the code that acts on it const bouton = html`<button id="monBouton">Change data</button>`;
// 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 !!!
+
const div = html`<div>`; div.appendChild(bouton);
-
var svgDoc = d3.select(DOM.svg(width, height));
+
const 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))
+
// .data(eval("dataArray"+dataIndex)) .data(dataArray1)
.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")
+
d3.select(bouton)
.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)
+
// dataIndex = dataIndex + i.pow(2*dataIndex-2) dataIndex = (dataIndex === 1) ? 2 : 1;
//rejoin data
-
var circle = svgDoc.select("g").selectAll("circle") .data(eval("dataArray"+dataIndex));
+
const circle = svgDoc.select("g").selectAll("circle") // .data(eval("dataArray"+dataIndex)); .data((dataIndex === 1) ? dataArray1 : dataArray2);
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);
+
const spacing = lineLength/(eval("dataArray"+dataIndex).length);
return xBuffer+(i*spacing) }
-
return svgDoc.node();
+
div.appendChild(svgDoc.node()); return div;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Changed in fork
-
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) }
+
// 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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell