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;
}

-
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)
// }