| license: gpl-3.0 |
A D3 demonstration of SVG and Canvas intermingling. Blue circles are plotted in SVG, black circles in canvas. One force to rule them all. The plot is zoomable and pannable.
Inspired by M. Bostock's Canvas / SVG zoom comparison series and collision detection examples [1] [2] .
| Copyright (c) 2013 Ross Kirsling | |
| Permission is hereby granted, free of charge, to any person obtaining | |
| a copy of this software and associated documentation files (the | |
| "Software"), to deal in the Software without restriction, including | |
| without limitation the rights to use, copy, modify, merge, publish, | |
| distribute, sublicense, and/or sell copies of the Software, and to | |
| permit persons to whom the Software is furnished to do so, subject to | |
| the following conditions: |
Click to add nodes! Nodes near the cursor will be linked to the new node. Clicking an existing node will remove it.
This is an extension of this example, adding the capability of removing nodes by clicking them. This means that dragging is no longer supported.
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-selection"],e):e(t.d3=t.d3||{},t.d3)}(this,function(t,e){"use strict";var n,o,r,i,d,u,p,a;n="undefined"==typeof SVGForeignObjectElement?"tspans":"foreignobject",o=function(t){var n,o;return o="function"==typeof t,"object"!=typeof t||t.nodeType?!!(t instanceof e.selection||t.nodeType||o||n)||(console.error("invalid bounds specified for text wrapping"),!1):!(!t.height||!t.width)||(console.error("text wrapping bounds must specify height and width"),!1)},r=function(t){var e,n,o,r;for(e=["height","width"],"function"==typeof t?n=t():t.nodeType?n=t.getBoundingClientRect():"object"==typeof t&&(n=t),o=Object.create(null),r=0;r<e.length;r++)o[e[r]]=n[e[r]];return o},i=function(t){var e;return"function"==typeof t?e=t():"number"==typeof t?e=t:"undefined"==typeof t&&(e=0),"number"==typeof e?e:void console.error("padding could not be converted into a number")},d= |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| var spData = null; | |
| function doData(json) { | |
| spData = json.feed.entry; | |
| } | |
This is the third step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of occupations. The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things
To not stray too far from D3.js I used the excellent tutorials on canvas and d3 from Irene Ros & Yannick Assogba which you can find here and here. I managed to get the circle packing working. However, when you zoom it is very jittery.
I wrote a more extensive tutorial around what I learned while doing this project in my blog Learnings from a D3.js addict on starting with Canvas in which this can be seen as step 3. See the previous, [non-zoomable version here](http://bl.ocks.org/
This is the fourth step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of occupations. The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things
Thanks to a version of the circle packing that does away with the D3.js data binding made by Stephan Smola I was able to make a few adjustments to make the zooming more linear from point A to B. Next step, add the bar charts...
I wrote a more extensive tutorial around what I learned while doing this project in my blog Learnings from a D3.js addict on starting with Canvas in which this can be seen as step 4. See the previous, more jittery zoomable version here in which the c
| //creates new point | |
| function P(x, y, color){ | |
| var rv | |
| if (x.map){ | |
| rv = {x: x[0], y: x[1], color: 'black'} | |
| } else{ | |
| rv = {x: x, y: y, color: color || 'black'} | |
| } | |
| rv.toString = function(){ return rv.x + ',' + rv.y } | |
| rv.type = 'point' |
