Modification of code by Justin Windle and Nadieh Bremer
Initial code created by Justin using sketch.js which Nadieh changed to d3.js.
I modified code to improve smoothness of animation with the d3 timer and to make it easier to add particles.
Move the mouse to spawn cool particles.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, |
| { | |
| "nodes" : [ | |
| {"x" : 442, "y" : 388}, | |
| {"x" : 436, "y" : 361}, | |
| {"x" : 426, "y" : 339}, | |
| {"x" : 415, "y" : 320}, | |
| {"x" : 394, "y" : 305}, | |
| {"x" : 371, "y" : 296}, | |
| {"x" : 357, "y" : 264}, | |
| {"x" : 336, "y" : 248}, |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #222 | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> |
| The MIT License (MIT) | |
| Copyright (c) 2016 Emilien Dupont | |
| 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: |
Each circle represents a single earthquake of magnitude 5 or more: the larger the radius, the larger the magnitude.
Note the Tohoku earthquake (the largest recorded earthquake in Japan's history) on March 11 2011. As can be seen on the map, the aftershakes from this quake continue for months afterwards.
Japan Earthquake Data: USGS
Japan Map Topojson Data: Minikomi's Block
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #222 | |
| } | |
| .star { | |
| fill: #FFFFFF | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #222 | |
| } | |
| .star { | |
| fill: rgb(255, 255, 255); | |
| stroke: none; |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var svg = d3.select("body") | |
| .append("svg") |