Skip to content

Instantly share code, notes, and snippets.

@steltenpower

steltenpower/.block

Last active November 28, 2016 23:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save steltenpower/3726a9a1b8e6ce88b22709d958566202 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save steltenpower/3726a9a1b8e6ce88b22709d958566202 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. steltenpower revised this gist Nov 28, 2016. 1 changed file with 5 additions and 7 deletions.
    12 changes: 5 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,12 +38,10 @@
    <script>
    var svg = d3.select("body").append("svg").attr("width",innerWidth).attr("height", innerHeight)
    .on("touchstart",touch).on("touchmove",touch).on("touchend",touch);;
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);
    //var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var state="0base";
    var nodes=[]; // 1 node = elm_incl_cx_cy_id_title, [{relation,destinationId}]

    var circle = svg.selectAll(".node");
    //var nodes=[]; // 1 node = elm_incl_cx_cy_id_title, [{relation,destinationId}]

    function touch() {
    d3.event.preventDefault();
    @@ -61,8 +59,8 @@
    if ((event.target.type=="circle")&&(event.type==touchstart)){
    A=event.target;
    }else A=new Circle(event.x,event.y); // take id of last node, add 1
    state="1Start";
    // create txtA=textfield and give it focus
    state="1start";
    // create txtA=textfield(A.name) and give it focus
    break;
    case "1Start":
    if ((event.target.type=="circle")&&(event.type==touchend)){
    @@ -81,7 +79,7 @@
    case "2go":
    if ((event.target.type=="circle")&&(event.type==touchend)){
    //edges(A,B,txtRel.value); //hide txtRel
    state="namingA";
    state="1start";
    }else{
    if (event.type=touchstart){
    if (event.target.type=="circle") B=new Circle(event.x,event.y); // take id of last node, add 1
  2. steltenpower revised this gist Nov 27, 2016. 1 changed file with 5 additions and 18 deletions.
    23 changes: 5 additions & 18 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -66,38 +66,25 @@
    break;
    case "1Start":
    if ((event.target.type=="circle")&&(event.type==touchend)){
    A.name=txtA.value;
    //hide txtA
    A.name=txtA.value; //and hide txtA
    state="0base";
    }else{
    if (event.type=touchstart){
    if (event.target.type=="circle") B=event.target;
    else B=new Circle(event.x,event.y) // take id of last node, add 1
    nodes[A].edges.push(B,"")
    // add edge (A,B)
    state="2go"
    // create txtR=textfield and give it focus
    }
    }
    break;
    case "2go":
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].edges.replace([B,""],[B,txtRel.value]);
    //hide txtRel
    if ((event.target.type=="circle")&&(event.type==touchend)){
    //edges(A,B,txtRel.value); //hide txtRel
    state="namingA";
    }else{
    if (event.type=touchstart){
    if (event.target.class=="node"){
    B=undefined;
    test=0;
    while (B==undefined){
    if (nodes[test].elm==event.target) B=test; // I think array.find() can make this faster
    test++; // should not go infinite loop
    }
    }else{
    B=nodes.length;
    nodes[B].x=event.x
    nodes[B].y=event.y
    nodes[B].elm=new Circle() // fill parameters
    if (event.target.type=="circle") B=new Circle(event.x,event.y); // take id of last node, add 1
    nodes[A].edges.push(B,"")
    }
    state="2go"
  3. steltenpower revised this gist Nov 27, 2016. 1 changed file with 6 additions and 17 deletions.
    23 changes: 6 additions & 17 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -59,32 +59,21 @@
    switch (state) {
    case "0base":
    if ((event.target.type=="circle")&&(event.type==touchstart)){
    A=event.target.id;
    A=event.target;
    }else A=new Circle(event.x,event.y); // take id of last node, add 1
    state="1Start";
    // create txtA=textfield and give it focus
    break;
    case "1Start":
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].name=txtA.value;
    if ((event.target.type=="circle")&&(event.type==touchend)){
    A.name=txtA.value;
    //hide txtA
    state="0base";
    }else{
    if (event.type=touchstart){
    if (event.target.class=="node"){
    B=undefined;
    test=0;
    while (B==undefined){
    if (nodes[test].elm==event.target) B=test; // I think array.find() can make this faster
    test++; // should not go infinite loop
    }
    }else{
    B=nodes.length;
    nodes[B].x=event.x
    nodes[B].y=event.y
    nodes[B].elm=new Circle() // fill parameters
    nodes[A].edges.push(B,"")
    }
    if (event.target.type=="circle") B=event.target;
    else B=new Circle(event.x,event.y) // take id of last node, add 1
    nodes[A].edges.push(B,"")
    state="2go"
    // create txtR=textfield and give it focus
    }
  4. steltenpower revised this gist Nov 27, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,7 +60,7 @@
    case "0base":
    if ((event.target.type=="circle")&&(event.type==touchstart)){
    A=event.target.id;
    }else A=new Circle(event.x,event.y)
    }else A=new Circle(event.x,event.y); // take id of last node, add 1
    state="1Start";
    // create txtA=textfield and give it focus
    break;
  5. steltenpower revised this gist Nov 27, 2016. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,12 +60,7 @@
    case "0base":
    if ((event.target.type=="circle")&&(event.type==touchstart)){
    A=event.target.id;
    }else{
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    nodes[A].elm=new Circle() // fill parameters and dataset.nodeId=A
    }
    }else A=new Circle(event.x,event.y)
    state="1Start";
    // create txtA=textfield and give it focus
    break;
  6. steltenpower revised this gist Nov 27, 2016. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,6 +31,7 @@
    <text x="20" y="20">steltenpower</text>
    <text x="100" y="100">web</text>
    </g>
    // http://bl.ocks.org/tmcw/4444952
    -->

    <script src="//d3js.org/d3.v3.min.js"></script>
    @@ -57,8 +58,8 @@
    */
    switch (state) {
    case "0base":
    if ((event.target.class=="node")&&(event.type==touchstart)){
    A=event.target.dataset.nodeId;
    if ((event.target.type=="circle")&&(event.type==touchstart)){
    A=event.target.id;
    }else{
    A=nodes.length;
    nodes[A].x=event.x
  7. steltenpower revised this gist Nov 27, 2016. No changes.
  8. steltenpower revised this gist Nov 27, 2016. No changes.
  9. steltenpower revised this gist Nov 27, 2016. 1 changed file with 19 additions and 0 deletions.
    19 changes: 19 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,25 @@

    </style>
    <body>
    <!--
    <g id="edges">
    <g id="outputs_0">
    <path d="M" id="edge_0_1" title="loves"/>
    </g>
    </g>
    <g id="nodes">
    <circle cx="20" cy="20" r="10" id="node_0" title="steltenpower"/>
    <circle cx="100" cy="100" r="10" id="node_1" title="web"/>
    </g>
    <g id="edgeNames">
    <text x="60" y="60">loves</text>
    </g>
    <g id="NodeNames">
    <text x="20" y="20">steltenpower</text>
    <text x="100" y="100">web</text>
    </g>
    -->

    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>
    var svg = d3.select("body").append("svg").attr("width",innerWidth).attr("height", innerHeight)
  10. steltenpower revised this gist Nov 26, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var state="0base";
    var nodes=[]; // 1 node = elm, pos{x,y}, name, [{relation,destinationId}]
    var nodes=[]; // 1 node = elm_incl_cx_cy_id_title, [{relation,destinationId}]

    var circle = svg.selectAll(".node");

  11. steltenpower revised this gist Nov 26, 2016. 1 changed file with 4 additions and 12 deletions.
    16 changes: 4 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,9 +21,9 @@
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var state="0base";
    var nodes=[]; // 1 node = elm, pos{x,y}, name, [{relation,id}]
    var nodes=[]; // 1 node = elm, pos{x,y}, name, [{relation,destinationId}]

    var circle = svg.selectAll("circle.node");
    var circle = svg.selectAll(".node");

    function touch() {
    d3.event.preventDefault();
    @@ -36,23 +36,15 @@
    touch2 (and back up)
    reading nodeNameB
    */
    function NodeMatch(){

    }
    switch (state) {
    case "0base":
    if ((event.target.class=="node")&&(event.type==touchstart)){
    A=undefined;
    test=0;
    while (A==undefined){
    if (nodes[test].elm==event.target) A=test; // I think array.find() can make this faster
    test++; // should not go infinite loop
    }
    A=event.target.dataset.nodeId;
    }else{
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    nodes[A].elm=new Circle() // fill parameters
    nodes[A].elm=new Circle() // fill parameters and dataset.nodeId=A
    }
    state="1Start";
    // create txtA=textfield and give it focus
  12. steltenpower revised this gist Nov 24, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var state="0base";
    var nodes=[]; // 1 node = elm, x, y, name, [{id,relation}]
    var nodes=[]; // 1 node = elm, pos{x,y}, name, [{relation,id}]

    var circle = svg.selectAll("circle.node");

  13. steltenpower revised this gist Nov 24, 2016. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@
    .on("touchstart",touch).on("touchmove",touch).on("touchend",touch);;
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var drawPhase="clear";
    var state="0base";
    var nodes=[]; // 1 node = elm, x, y, name, [{id,relation}]

    var circle = svg.selectAll("circle.node");
    @@ -39,8 +39,8 @@
    function NodeMatch(){

    }
    switch (drawPhase) {
    case "clear":
    switch (state) {
    case "0base":
    if ((event.target.class=="node")&&(event.type==touchstart)){
    A=undefined;
    test=0;
    @@ -54,14 +54,14 @@
    nodes[A].y=event.y
    nodes[A].elm=new Circle() // fill parameters
    }
    drawPhase=namingA;
    state="1Start";
    // create txtA=textfield and give it focus
    break;
    case "namingA":
    case "1Start":
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].name=txtA.value;
    //hide txtA
    drawPhase="clear";
    state="0base";
    }else{
    if (event.type=touchstart){
    if (event.target.class=="node"){
    @@ -78,16 +78,16 @@
    nodes[B].elm=new Circle() // fill parameters
    nodes[A].edges.push(B,"")
    }
    drawPhase="namingRel"
    state="2go"
    // create txtR=textfield and give it focus
    }
    }
    break;
    case "namingRelation":
    case "2go":
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].edges.replace([B,""],[B,txtRel.value]);
    //hide txtRel
    drawPhase="namingA";
    state="namingA";
    }else{
    if (event.type=touchstart){
    if (event.target.class=="node"){
    @@ -104,12 +104,12 @@
    nodes[B].elm=new Circle() // fill parameters
    nodes[A].edges.push(B,"")
    }
    drawPhase="namingRel"
    state="2go"
    // create txtR=textfield and give it focus
    }
    }
    break;
    case "namingB":
    case "3end":
    break;
    default:
    console.log("this code should never be reached");
  14. steltenpower revised this gist Nov 21, 2016. 1 changed file with 24 additions and 3 deletions.
    27 changes: 24 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -64,7 +64,6 @@
    drawPhase="clear";
    }else{
    if (event.type=touchstart){

    if (event.target.class=="node"){
    B=undefined;
    test=0;
    @@ -79,14 +78,36 @@
    nodes[B].elm=new Circle() // fill parameters
    nodes[A].edges.push(B,"")
    }


    drawPhase="namingRel"
    // create txtR=textfield and give it focus
    }
    }
    break;
    case "namingRelation":
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].edges.replace([B,""],[B,txtRel.value]);
    //hide txtRel
    drawPhase="namingA";
    }else{
    if (event.type=touchstart){
    if (event.target.class=="node"){
    B=undefined;
    test=0;
    while (B==undefined){
    if (nodes[test].elm==event.target) B=test; // I think array.find() can make this faster
    test++; // should not go infinite loop
    }
    }else{
    B=nodes.length;
    nodes[B].x=event.x
    nodes[B].y=event.y
    nodes[B].elm=new Circle() // fill parameters
    nodes[A].edges.push(B,"")
    }
    drawPhase="namingRel"
    // create txtR=textfield and give it focus
    }
    }
    break;
    case "namingB":
    break;
  15. steltenpower revised this gist Nov 21, 2016. 1 changed file with 21 additions and 3 deletions.
    24 changes: 21 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,19 +52,37 @@
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    // add a circle elm
    nodes[A].elm=new Circle() // fill parameters
    }
    drawPhase=namingA;
    // create txtA=textfield and give it focus
    break;
    case "namingA":
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].name=txtA.value;
    //remove txtA
    //hide txtA
    drawPhase="clear";
    }else{
    if (event.type=touchstart){
    // so the second finger is down

    if (event.target.class=="node"){
    B=undefined;
    test=0;
    while (B==undefined){
    if (nodes[test].elm==event.target) B=test; // I think array.find() can make this faster
    test++; // should not go infinite loop
    }
    }else{
    B=nodes.length;
    nodes[B].x=event.x
    nodes[B].y=event.y
    nodes[B].elm=new Circle() // fill parameters
    nodes[A].edges.push(B,"")
    }


    drawPhase="namingRel"
    // create txtR=textfield and give it focus
    }
    }
    break;
  16. steltenpower revised this gist Nov 20, 2016. 1 changed file with 12 additions and 4 deletions.
    16 changes: 12 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,8 +41,7 @@
    }
    switch (drawPhase) {
    case "clear":
    if (event.target.class=="node"){
    // make sure to only use touchDown
    if ((event.target.class=="node")&&(event.type==touchstart)){
    A=undefined;
    test=0;
    while (A==undefined){
    @@ -53,12 +52,21 @@
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    // add a circle elm
    }
    drawPhase=namingA;
    // create txtA=textfield and give it focus
    break;
    case "namingA":
    // create a textfield and give it focus
    nodes[A].name=""; // give a reference to a different event handler, keyDown?, to keep adding to this
    if ((event.target.class=="node")&&(event.type==touchend)){
    nodes[A].name=txtA.value;
    //remove txtA
    drawPhase="clear";
    }else{
    if (event.type=touchstart){
    // so the second finger is down
    }
    }
    break;
    case "namingRelation":
    break;
  17. steltenpower revised this gist Nov 20, 2016. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -42,10 +42,11 @@
    switch (drawPhase) {
    case "clear":
    if (event.target.class=="node"){
    // make sure to only use touchDown
    A=undefined;
    test=0;
    while (A==undefined){
    if (nodes[test].elm==event.target) A=test;
    if (nodes[test].elm==event.target) A=test; // I think array.find() can make this faster
    test++; // should not go infinite loop
    }
    }else{
    @@ -56,6 +57,7 @@
    drawPhase=namingA;
    break;
    case "namingA":
    // create a textfield and give it focus
    nodes[A].name=""; // give a reference to a different event handler, keyDown?, to keep adding to this
    break;
    case "namingRelation":
  18. steltenpower revised this gist Nov 20, 2016. 1 changed file with 16 additions and 7 deletions.
    23 changes: 16 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,15 +36,24 @@
    touch2 (and back up)
    reading nodeNameB
    */
    function NodeMatch(){

    }
    switch (drawPhase) {
    case "clear":
    if (event.target.class=="node"){
    A=nodes.indexOf(event.target); // 1 node is meer dan alleen het SVG element, dus aanpassen nog, bijvoorbeeld middels find()
    // for what A nodes[A]==event.target ? if no A exists than {
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    }
    if (event.target.class=="node"){
    A=undefined;
    test=0;
    while (A==undefined){
    if (nodes[test].elm==event.target) A=test;
    test++; // should not go infinite loop
    }
    }else{
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    }
    drawPhase=namingA;
    break;
    case "namingA":
    nodes[A].name=""; // give a reference to a different event handler, keyDown?, to keep adding to this
  19. steltenpower revised this gist Nov 7, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -47,7 +47,7 @@
    }
    break;
    case "namingA":
    nodes[A].name=""; // give a reference to a different event handler to keep adding to this
    nodes[A].name=""; // give a reference to a different event handler, keyDown?, to keep adding to this
    break;
    case "namingRelation":
    break;
  20. steltenpower revised this gist Nov 7, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    switch (drawPhase) {
    case "clear":
    if (event.target.class=="node"){
    A=nodes.indexOf(event.target); // 1 node is meer dan alleen het SVG element, dus aanpassen nog
    A=nodes.indexOf(event.target); // 1 node is meer dan alleen het SVG element, dus aanpassen nog, bijvoorbeeld middels find()
    // for what A nodes[A]==event.target ? if no A exists than {
    A=nodes.length;
    nodes[A].x=event.x
  21. steltenpower revised this gist Nov 7, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,6 +39,7 @@
    switch (drawPhase) {
    case "clear":
    if (event.target.class=="node"){
    A=nodes.indexOf(event.target); // 1 node is meer dan alleen het SVG element, dus aanpassen nog
    // for what A nodes[A]==event.target ? if no A exists than {
    A=nodes.length;
    nodes[A].x=event.x
  22. steltenpower revised this gist Nov 7, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var drawPhase="clear";
    var nodes=[]; // 1 node = name, x, y, [{id,relation}]
    var nodes=[]; // 1 node = elm, x, y, name, [{id,relation}]

    var circle = svg.selectAll("circle.node");

  23. steltenpower revised this gist Nov 6, 2016. 1 changed file with 30 additions and 13 deletions.
    43 changes: 30 additions & 13 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,9 +27,36 @@

    function touch() {
    d3.event.preventDefault();
    if (event.target.class!=="node"){
    // draw damn circle
    }
    /*
    clear
    touch0 (and back up) : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y;
    reading nodeNameA : changing nodes[i].name
    touch1 (and back up) / touch0up==>touch0=touch1; : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y; /
    reading relationName
    touch2 (and back up)
    reading nodeNameB
    */
    switch (drawPhase) {
    case "clear":
    if (event.target.class=="node"){
    // for what A nodes[A]==event.target ? if no A exists than {
    A=nodes.length;
    nodes[A].x=event.x
    nodes[A].y=event.y
    }
    break;
    case "namingA":
    nodes[A].name=""; // give a reference to a different event handler to keep adding to this
    break;
    case "namingRelation":
    break;
    case "namingB":
    break;
    default:
    console.log("this code should never be reached");
    break;
    }

    circle = circle
    .data(d3.touches(svg.node()), function(d) { return d.identifier; });

    @@ -48,14 +75,4 @@
    .on("touchstart",touch).on("touchmove",touch).on("touchend",touch);

    }
    /*
    clear
    touch0 (and back up) : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y;
    reading nodeNameA : changing nodes[i].name
    touch1 (and back up) / touch0up==>touch0=touch1; : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y; /
    reading relationName
    touch2 (and back up)
    reading nodeNameB
    */
    </script>
  24. steltenpower revised this gist Nov 6, 2016. 1 changed file with 14 additions and 27 deletions.
    41 changes: 14 additions & 27 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,32 +16,25 @@
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>
    var mode="clear";
    var nodes=[];
    // 1 node = name, x, y, [{id,name}]
    var svg = d3.select("body").append("svg")
    .attr("width", innerWidth)
    .attr("height", innerHeight);
    var svg = d3.select("body").append("svg").attr("width",innerWidth).attr("height", innerHeight)
    .on("touchstart",touch).on("touchmove",touch).on("touchend",touch);;
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var circle = svg.selectAll("circle.touch");
    d3.select("body")
    .on("touchstart", touch)
    .on("touchmove", touch)
    .on("touchend", touch);
    var drawPhase="clear";
    var nodes=[]; // 1 node = name, x, y, [{id,relation}]

    var circle = svg.selectAll("circle.node");

    function touch() {
    d3.event.preventDefault();
    if (event.target.class!=="node"){
    // draw damn circle
    }
    circle = circle
    .data(d3.touches(svg.node()), function(d) { return d.identifier; });

    circle.exit()
    .attr("class", null)
    .transition()
    .attr("r", 36);

    circle.enter().append("circle")
    .attr("class", "touch")
    .attr("class", "node")
    .attr("r", 36)
    .style("fill", function(d) { return color(d.identifier); })
    .transition()
    @@ -52,20 +45,14 @@
    circle
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; })
    .on("touchstart", touch)
    .on("touchmove", touch)
    .on("touchend", touch);
    .on("touchstart",touch).on("touchmove",touch).on("touchend",touch);

    }
    /*
    nodes=[]
    1 node = name, x, y, [{id,name}]
    clear
    touch0 (and back up) = if eventOnNode get index, otherwise i
    reading nodeNameA
    touch1 (and back up) / touch0up==>touch0=touch1;
    touch0 (and back up) : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y;
    reading nodeNameA : changing nodes[i].name
    touch1 (and back up) / touch0up==>touch0=touch1; : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y; /
    reading relationName
    touch2 (and back up)
    reading nodeNameB
  25. steltenpower revised this gist Nov 5, 2016. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,8 @@
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>
    var mode="clear";
    var nodes=[];
    // 1 node = name, x, y, [{id,name}]
    var svg = d3.select("body").append("svg")
    .attr("width", innerWidth)
    .attr("height", innerHeight);
    @@ -56,9 +58,12 @@

    }
    /*
    nodes=[]
    1 node = name, x, y, [{id,name}]
    clear
    touch0 (and back up)
    touch0 (and back up) = if eventOnNode get index, otherwise i
    reading nodeNameA
    touch1 (and back up) / touch0up==>touch0=touch1;
    reading relationName
  26. steltenpower revised this gist Nov 3, 2016. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,9 +36,8 @@
    circle.exit()
    .attr("class", null)
    .transition()
    .attr("r", 36)
    .remove();

    .attr("r", 36);

    circle.enter().append("circle")
    .attr("class", "touch")
    .attr("r", 36)
  27. steltenpower revised this gist Nov 3, 2016. 1 changed file with 22 additions and 19 deletions.
    41 changes: 22 additions & 19 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,15 +3,8 @@
    <meta name="viewport" content="initial-scale=1,maximum-scale=1">
    <style>

    html,
    body {
    height: 100%;
    }

    body {
    margin: 0;
    }

    html,body {height: 100%;}
    body {margin: 0;}
    svg {
    display: block;
    overflow: hidden;
    @@ -23,35 +16,32 @@
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var mode="clear";
    var svg = d3.select("body").append("svg")
    .attr("width", innerWidth)
    .attr("height", innerHeight);
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var circle = svg.selectAll("circle.touch");

    d3.select("body")
    .on("touchstart", touch)
    .on("touchmove", touch)
    .on("touchend", touch);

    function touch() {
    d3.event.preventDefault();

    circle = circle
    .data(d3.touches(svg.node()), function(d) { return d.identifier; });

    circle.exit()
    .attr("class", null)
    .transition()
    .attr("r", 1e-6)
    .attr("r", 36)
    .remove();

    circle.enter().append("circle")
    .attr("class", "touch")
    .attr("r", 1e-6)
    .attr("r", 36)
    .style("fill", function(d) { return color(d.identifier); })
    .transition()
    .duration(500)
    @@ -60,8 +50,21 @@

    circle
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; });
    .attr("cy", function(d) { return d[1]; })
    .on("touchstart", touch)
    .on("touchmove", touch)
    .on("touchend", touch);

    }
    <!--
    -->
    /*
    clear
    touch0 (and back up)
    reading nodeNameA
    touch1 (and back up) / touch0up==>touch0=touch1;
    reading relationName
    touch2 (and back up)
    reading nodeNameB
    */
    </script>
  28. steltenpower revised this gist Nov 3, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var color = d3.scale.category10();
    var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

    var svg = d3.select("body").append("svg")
    .attr("width", innerWidth)
  29. steltenpower revised this gist Nov 3, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -62,5 +62,6 @@
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; });
    }

    <!--
    -->
    </script>
  30. steltenpower revised this gist Nov 3, 2016. No changes.