puntos

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_98":-5,"_50":16,"_99":-5,"_100":101,"_102":103},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":59,"_72":73,"_74":75,"_76":-7,"_77":43,"_78":41,"_79":-5,"_80":81,"_82":16,"_83":84,"_85":84,"_86":-7,"_87":-7,"_56":88,"_58":89,"_90":-5,"_91":55,"_92":93,"_94":95,"_96":-5,"_97":-5},"vizContent",{"_40":59,"_60":61},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":39,"_54":55,"_56":57,"_58":57},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/202236dde7fc98550567bfa4687d431c3ced870fdcd1459597f28ed5fa62b2d1.png","sourceType","gist","originalUrl","https://gist.github.com/aaizemberg/8403408","author","aaizemberg","id","gist-user-aaizemberg","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791743441346,"updatedAt","gist-8403408","files",{"_62":63,"_64":65},"f1",{"_66":70,"_68":71},"f2",{"_66":67,"_68":69},"name","puntos.js","text","var puntos = [], width = 600, height = 400, MouseDown, MouseUp, MouseXY;\n\nd3.select(\"svg\")\n .on(\"click\", function() {\n console.log(\"click\");\n });\n\nvar svg = d3.select(\"body\").append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .on(\"click\", click)\n .on(\"mousedown\", md)\n .on(\"mouseup\", mu)\n .on(\"mousemove\", mm)\n .attr(\"style\", \"background-color: rgb(220,220,220);\");\n\nfunction draw() {\n svg.selectAll(\"circle\")\n .data(puntos)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", function(d) { return d[0]; })\n .attr(\"cy\", function(d) { return d[1]; })\n .attr(\"r\", radio.value); \n}\n\nfunction click() {\n // console.log(d3.mouse(this));\n puntos.push(d3.mouse(this));\n draw();\n}\n\nfunction md() {\n MouseDown = d3.mouse(this);\n}\n\nfunction mu() {\n MouseUp = d3.mouse(this);\n}\n\nfunction mm() {\n MouseXY = d3.mouse(this);\n}\n\nd3.select('#up').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"cy\", 10 );\n});\n\nd3.select('#down').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"cy\", height-10 );\n});\n\nd3.select('#left').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"cx\", 10 );\n});\n\nd3.select('#right').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"cx\", width-10 );\n});\n\n// antes eliminaba a todos los puntos\n// ahora los voy sacando de a uno\n\n/*\nd3.select('#remove').on('click', function() {\n puntos = [];\n svg.selectAll(\"circle\")\n .data(puntos)\n .exit()\n .remove(); \n});\n*/\n\nfunction removeOnePoint() {\n puntos.pop();\n svg.selectAll(\"circle\")\n .data(puntos)\n .exit()\n .remove();\n}\n\nd3.select('#remove').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"r\", 0)\n .each(\"end\", removeOnePoint); // llamo a removeOnePoint cada vez que termina la transición\n // http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/\n});\n\nd3.select('#red').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"fill\", \"red\"); \n});\n\nd3.select('#green').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"fill\", \"green\"); \n});\n\nd3.select('#blue').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"fill\", \"blue\"); \n});\n\nd3.select('#black').on('click', function() {\n svg.selectAll(\"circle\")\n .transition()\n .delay(function(d, i) { return Math.log(i+1)*100; })\n .attr(\"fill\", \"black\"); \n});\n\nd3.select('#radio').on('change', function() {\n svg.selectAll(\"circle\").attr(\"r\", radio.value); \n});\n","index.html","\n\n\n\n\npuntos\n\n\n \n \n \n \n
\n\n \n
\n\n \n \n \n \n
\n \n radio: 5 25
\n\n \n\n\n","slug","8403408","title","puntos","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","wDXjYFlayPwVrlWi78A_1","startCommitId","forkedFrom","forkedFromVisibility",1389631126000,1389714606000,"publishedAt","isPublished","draftStatus","published","lifecycleStatus","active","trashedAt","purgeAfter","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]