Show HN: Weekend project, D3.js Globe of Recent Earthquakes

by sakai • 14 years ago

79 29 14 years ago

nosignal• 14 years ago

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.

sakai12• 14 years ago

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• 14 years ago

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

sakai12• 14 years ago

And -- what kind of geo work do you do?

mercuryrising• 14 years ago

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!

sakai12• 14 years ago

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).

andrewcooke3• 14 years ago

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.

sakai12• 14 years ago

So... that should be fixed by making only a single JSONP request. The downside is that it now may miss a few quakes that are over the 5.5 threshold but USGS has not rated as significant (e.g., some offshore quakes I believe).

Let me know -- and I'd love to hear if anybody has suggestions for better catching JSONP callback-related errors.

andrewcooke3• 14 years ago

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

sakai12• 14 years ago

Aesthetics?

andrewcooke3• 14 years ago

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.]

martinwnet• 14 years ago

I think it would look better if it was sitting in a proper globe holder.

brycecammo• 14 years ago

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&...

sakai12• 14 years ago

Thanks for pointing that out. Updated.

jklio• 14 years ago

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/).

sakai12• 14 years ago

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• 14 years ago

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.

sakai12• 14 years ago

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)

Pinatubo2• 14 years ago

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.

lathamcity3• 14 years ago

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.

sakai12• 14 years ago

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?).

lathamcity3• 14 years ago

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.

lathamcity3• 14 years ago

The error keeps replicating itself as long as the globe is moving.

Pinatubo2• 14 years ago

Some D3.js code I wrote recently worked in Opera, so I think it should be fine there. I never did figure out how to make D3.js work in IE.

tlrobinson• 14 years ago

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

sakai12• 14 years ago

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

biftek• 14 years ago

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

Show HN: Weekend project, D3.js Globe of Recent Earthquakes

Related Stories