

Show HN: Weekend project, D3.js Globe of Recent Earthquakes - sakai
http://boydgreenfield.com/quakes

======
mercuryrising
Really nice.

It doesn't always auto play, and clicking play/pause doesn't make it work
(happened twice to me in five refreshes on Chrome).

When it said "Highlight an earthquake..." I was nervous I would have to follow
those little circles with my mouse while trying to read the information, but
it works well!

The earth quake zones just popping into view looks a little goofy. Is there
any way to fade them in, or have them start as a line and transform into a
circle (going through an ellipse). That might make it look a little cleaner on
entry/exit.

Great work!

~~~
sakai
Thanks! Yeah... I'm trying to fix that bug (related again to JSONP), but
wanted to post it here in the meantime. And planning to move from circles ->
svg:paths with the next D3.js release (they've rewritten / fixed the
geographic clipping functions).

~~~
andrewcooke
just clipping the circles with the outer ring might help. when i did this -
<http://www.acooke.org/arms.html> \- i tried to make the ellipses the correct
shape, but it's non-trivial for extended ellipses on a curved surface
(although yours are small so perhaps that's not an issue). anyway, the big
breakthrough in making it look natural was to simply clip at the edge of the
globe.

------
nosignal
This looks beautiful, but it doesn't release my mouse click on Chrome; i.e.
when I click on the globe to click & drag, the rotation of the globe keeps
following my mouse, and I can't click the "play" button.

Nice project though, as a geo guy who's been meaning to play with D3, it's
inspiring.

~~~
sakai
Yeah... that's a bug that I haven't been able to squash yet.

Particularly with high latency, it will sometimes fail to load the JSONP from
the USGS. Because JSONP is a <script> and I'm not properly catching the thrown
error that causes D3 to bug out. I'm trying to get USGS to let me use CORS
with the JSON files so I don't have to deal with the callback function of
JSONP.

Oh - and refreshing the page should fix that! Thanks, and glad you like it.

~~~
mentat
Also if you flip it upside down (drag over a pole) the side to side turns
backwards.

~~~
sakai
Indeed. It's actually updating the origin of the map projection with the
animation, so it will always be spinning eastwards. That's why the globe will
rotate clockwise if you center over the North Pole.

All of this can be changed in the JS parameters easily enough, however.

------
jklio
I know it's based off D3.js but is the rest of the code open source?

I'd like to use it for a project and credit you. The most advanced I've found
open so far is just a base rotating D3.js globe
(<http://bl.ocks.org/d/1246403/>).

~~~
sakai
It can / will be. I just have a really messy commit log as I was editing files
from Github manually from another machine (not a good strategy...).

Email me at boyd.greenfield at gmail and I'll get you the source if you'd like
to chat about it. Otherwise I'll get to opening it up and adding an (open)
license shortly.

------
lucasf
It's really cool. Care to explain why do you have
<http://mbostock.github.com/d3/d3.v2.min.js> in header that has only one line
- links to actual d3 at <http://d3js.org/d3.v2.min.js>? Am I missing some
reasoning behind this? It doesn't seem very reasonable. Adds two unnecesary
hops to two different domains? If you dont want to host d3 why not just
reference it directly in header from d3js.org?

Edit: Oh, and how you distort svg to make it look spherical while dragging?
This is very cool.

~~~
sakai
I hadn't noticed that re-direct. Thanks and fixed.

All of the SVG magic is D3.js and simply modified from this sweet example by
Mike Bostock: <http://mbostock.github.com/d3/talk/20111018/azimuthal.html>

Edit: Oddly, I'm noticing that the title of Mike's page is "Afghanistan",
which is the one country in the GEOJSON I'm using that doesn't render
properly... (it shows empty like a 2nd Caspian Sea)

~~~
Pinatubo
I was just looking at Mike Bostock's example, and there are also some
rendering problems for Afghanistan there.

Maybe it has something to do with Afghanistan being the first country in an
alphabetical list? I'd try putting another country in the first position in
the data table and see if the rendering problem switches locations.

------
brycecammo
Looks great, well done.

One nitpick I have is that earthquakes are no longer measured on the Richter
scale, but rather the Momentum magnitude scale. See
[http://www.usgs.gov/faq/index.php?sid=54684&lang=en&...](http://www.usgs.gov/faq/index.php?sid=54684&lang=en&action=artikel&cat=118&id=1750&artlang=en)

~~~
sakai
Thanks for pointing that out. Updated.

------
lathamcity
The first time I tried it, nothing happened. I clicked on the globe because I
thought maybe you had to drag it, and couldn't un-drag so it kept jiggling
around without doing anything. No red dots came up.

I glanced at the comments to see if anyone said "It's broken" and nobody did,
so I went back and tried hitting the play button but nothing happened, same
result.

Then I read the first comment on here and went back one more time and it
worked; however, this time when it spins and I click on a red dot nothing
happens and I get ' error parsing d="" ' in the console, with the line being
/quakes/:1, which is just the <html> tag.

~~~
sakai
Hmm, sorry you're having trouble with it. The 'error parsing d=""' is an issue
with the SVG parser within your browser, and shouldn't prevent it from
rendering properly. I believe upgrading to the next version of d3.js will
likely fix this.

It's possible that it's not properly loading the data for you, either due to
latency or some browser restrictions. What are you running?

I'd like to debug if possible. I believe D3.js only fully works in Chrome,
Safari, and Firefox (+ maybe Opera?).

~~~
lathamcity
I'm actually building a website in D3JS myself (
<http://uscfstats.com/matches> ) and the SVG and D3 work fine there, and I am
using the latest version of Chrome.

------
biftek
Well done!

I actually had the same idea, but changed it slightly when it came time for
execution because I wanting to use geolocation api's. Never really ended up
finishing it though, turns out theres not much quake activity on the east
coast and I lost intrest. :(

<http://quakes.arrly.co>

------
tlrobinson
Nice. Only suggestion would be intertial rotation. I keep flinging it thinking
it will keep spinning.

~~~
sakai
Haha, yeah that would be fun. Though it might get a bit out of control!

------
andrewcooke
nice, but what's the arc for down the right hand side of the globe?

~~~
sakai
Aesthetics?

~~~
andrewcooke
ah, well, i guess that's valid. i was thinking it must be something to do with
sunrise or time or something... (you can tell how appreciative i am of
aesthetics, in that i prefered the previous usgs site to the recent update)

[edit, since i can't reply directly, and probably shouldn't string out a long
thread anyway: i do agree with your choice, it looks good as it is. i just
assumed it meant something. not sure how you avoid that.]

~~~
sakai
Yeah, I go back and forth on it. It just looks visually unbalanced without
some kind of weight in the globe IMO.

