This graph combines force directed graphs, zooming and dragging, and the explanation behind the graph is available here.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
height: 1000 | |
scrolling: true |
This is an simple example of adding zoom to your graph.
Click here to read a more detailed explanation on how zoom works.
Example of zoom and drag in d3 v4.
This example has a modified drag function so that when you zoom in, you're still able to drag the circles to the correct mouse location. Here's an example of the drag problem.
It's not an easy way to do this task. Read this for an easier and better way, as well as an explanation of this code.
The big black rectangle captures mouse events, but sits behind the yellow circles.
Notice how you're able to zoom and pan while the mouse is over the black rectangle. It doesn't work when you're over the circle since its on top of the rectangle.
NewerOlder