Comparing Drag & Click to Drag & Click

Comparing

“Drag & Click” (fork)

“Drag & Click” (parent)

Mike Bostock

Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.

Workspace

Published unlisted

Edited

May 6, 2020

Fork of Visualising polynomial roots

viewof coeffs = {

let value = [1,1];

const button = html`<button>New polynomial`;

Object.defineProperty(button, "value", {get() { return value; }});

button.onclick = () => value = value.map(d => math.round(100 * math.random()) / 10);

return button;

}

coeffs

Changed in fork

chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .attr("stroke-width", 2);
  
+  const drag = d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);

  const z0 = math.complex(1,1);

  const circles = computePoints(z0);
  
  var lineGenerator = d3.line();
  var points = [
    [width/2, height],
    [width/2, 0],
    [width/2, height/2],
    [width / 2 + height/2, height/2],
    [width/2 - height/2, height/2]
  ];
  
  var pathData = lineGenerator(points);
   svg.append("path")
    .attr('d', pathData)
    .attr("fill","none")
    .attr("stroke","black")
    .attr("stroke-width",2)
  
  svg.selectAll("circle.z")
     .data([z2p(z0)])
     .join("circle")
      .attr("circle", "z")
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", radius)
      .attr("fill", (d, i) => d3.schemeCategory10[i % 10])
      .call(drag)
      .on("click", clicked);
      
  svg.selectAll("circle.poly")
    .data(circles)
    .join("circle")
      .attr("class", "poly")
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", radius)
      .attr("fill", (d, i) => d3.schemeCategory10[(i + 1) % 10])
      //.call(drag)
      //.on("click", clicked);
-
  
+

  function dragstarted(d) {
    d3.select(this).attr("stroke", "black");
  }

  function dragged(d) {
    d3.select(this).raise().attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    const zz = p2z(d3.event.x, d3.event.y)
    updatePoints(zz);
  }

  function dragended(d) {
    //d3.select(this).attr("stroke", null);
    const zz = p2z(d3.event.x, d3.event.y)
    updatePoints(zz)
    /*console.log(zz)
    d3.select("svg")
    .selectAll("circle.poly")
    .data(computePoints(zz))
    .join()
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", radius)
    .attr("fill", (d, i) => d3.schemeCategory10[i % 10])*/
  }

  function updatePoints(zz) {
    svg
      .selectAll("circle.poly")
      .data(computePoints(zz))
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      //.attr("r", radius)
      //.attr("fill", (d, i) => d3.schemeCategory10[(i+i) % 10])
  }

  updatePoints(z0);

  function clicked(d, i) {
    if (d3.event.defaultPrevented) return; // dragged

    d3.select(this).transition()
        .attr("fill", "black")
        .attr("r", radius * 2)
      .transition()
        .attr("r", radius)
        .attr("fill", d3.schemeCategory10[i % 10]);
  }

  return svg.node();
}

Removed in fork

drag = {

  function dragstarted(d) {
    d3.select(this).attr("stroke", "black");
  }

  function dragged(d) {
    d3.select(this).raise().attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    const zz = p2z(d3.event.x, d3.event.y)
    updatePoints(zz);
  }

  function dragended(d) {
    //d3.select(this).attr("stroke", null);
    const zz = p2z(d3.event.x, d3.event.y)
    updatePoints(zz)
    /*console.log(zz)
    d3.select("svg")
    .selectAll("circle.poly")
    .data(computePoints(zz))
    .join()
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", radius)
    .attr("fill", (d, i) => d3.schemeCategory10[i % 10])*/
  }

  return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);
}

height = 600

radius = 12

d3 = require("d3@5")

function computePoints(z)

{

const vectorsums = computeVectorSums(z);

//return coeffs.map((d,i) => (getPoint(math.multiply(d , math.pow(z, i)))));

return vectorsums.map(d=> z2p(d));

}

import { math } from "@ddspog/useful-libs"

extent = 10

function z2p(z)

{

const px = width / 2 + z.re * height / 2 / extent

const py = height / 2 - z.im * height / 2 / extent

return {x : px, y : py}

}

function p2z(px,py)

{

const zz = math.complex(

(px - width / 2) / (height / 2 / extent),

-(py - height / 2) / (height / 2 / extent)

)

return zz;

}

function computeVectorSums(z)

{

var sums = [];

var tot = z

coeffs.forEach((c,i) => {

sums[i] = math.sum(tot, math.multiply(c , math.pow(z, i+2)))

tot = sums[i];

})

return sums

}

Removed in fork

function updatePoints(zz)
{
d3.select("svg")
    .selectAll("circle.poly")
    .data(computePoints(zz))
    .join()
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    //.attr("r", radius)
    //.attr("fill", (d, i) => d3.schemeCategory10[(i+i) % 10])
}