The force graph is constrained within the box. Click [here] (http://www.puzzlr.org/bounding-box-force-directed-graph/) for an explanation of this effect.
This is done through the tick function's constraints - one of two simple ways you could do it. The other is through custom forces.
| <div id="errors" style=" | |
| background: #c00; | |
| color: #fff; | |
| display: none; | |
| margin: -20px -20px 20px; | |
| padding: 20px; | |
| white-space: pre-wrap; | |
| "></div> | |
| <div id="root"></div> | |
| <script> |
Example of using version 4 of d3.js to drag circles around the screen. Want to learn this? Read this.
This is an simple example of adding zoom to your graph.
Click here to read a more detailed explanation on how zoom works.
| -0.8171386568117702 -0.2959722029276907 0.035525489171865585 -0.11475660612204155 -0.14733362371162165 -2.4981375795253706 0.12523907902300802 -1.6744632228464886 | |
| -0.8171386568117702 -0.2959722029276907 -0.01006292576293056 -0.1184148181435739 -0.15025661004988405 -2.4981375795253706 0.12523907902300802 -1.6744632228464886 | |
| -0.8171386568117702 -0.2959722029276907 -0.01006292576293056 -0.11475660612204155 -0.14733362371162165 -2.4981375795253706 0.12523907902300802 -1.6744632228464886 | |
| -0.8171386568117702 -0.2959722029276907 0.02640780618490636 -0.11475660612204155 -0.14733362371162165 -2.401680941117145 0.12523907902300802 -1.6744632228464886 | |
| -0.8171386568117702 -0.2959722029276907 0.04737847705491259 -0.11475660612204155 -0.14733362371162165 -2.401680941117145 0.12523907902300802 -1.6744632228464886 | |
| -0.8171386568117702 -0.2959722029276907 0.037349025769257437 -0.10500137406462197 -0.13953899347625529 -2.2087676643006935 0.12523907902300802 -1.6744632228464886 | |
| -0.8171386568117702 -0.2959722029276907 0.037349025 |
| id_no origin_t country region source latitude longitude mb Ms depth yield_1 yield_u purpose name type date_long year _Year _Month _Week _Day _Dayofweek _Dayofyear _Quarter _Is_month_end _Is_month_start _Is_quarter_end _Is_quarter_start _Is_year_end _Is_year_start _Elapsed hour type_cat mb_I Ms_I x y z cluster_label | |
| 45001 123000.0 USA ALAMOGORDO DOE 32.54 -105.57 0.0 0.0 -0.1 21.0 21.0 WR TRINITY TOWER 19450716 1945 1945 7 29 16 0 197 3 False False False False False False -771984000 12 ATMOSPHERIC 0 0 4.4668956 12.5813675 2.6080666 20 | |
| 45002 231500.0 USA HIROSHIMA DOE 34.23 132.27 0.0 0.0 -0.6 15.0 15.0 COMBAT LITTLEBOY AIRDROP 19450805 1945 1945 8 31 5 6 217 3 False False False False False False -770256000 23 ATMOSPHERIC 0 0 4.415407 12.520925 2.6735268 20 | |
| 45003 15800.0 USA NAGASAKI DOE 32.45 129.52 0.0 0.0 -0.6 21.0 21.0 COMBAT FATMAN AIRDROP 19450809 1945 1945 8 32 9 3 221 3 False False False False False False -769910400 15 ATMOSPHERIC 0 0 4.4433594 12.551545 2.6417017 20 | |
| 46001 220100.0 USA BIKINI DOE 11.35 |
This graph combines force directed graphs, zooming and dragging, and the explanation behind the graph is available here.
This is an example of how to change the attributes of a SVG element through a HTML input. It is not fully bug tested - near the edges of the graph, the rectangle can get "stuck".
See http://www.puzzlr.org/ for more d3 related fun!
This was made as an example of how to add elements to a SVG container upon mouse-click. Click in the rectangle and see what happens!
See http://www.puzzlr.org/?p=46 for a more detailed explanation and walkthrough of the code.