Show HN: Weekend project, D3.js Globe of Recent Earthquakes | Hacker News Reader

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

boydgreenfield.com

79 pointssakai29 comments

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!

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

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.

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.

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.

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.

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

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.

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

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

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.

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.

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)

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.

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

Thanks for pointing that out. Updated.

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.

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

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.

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

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.

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

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

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

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

Aesthetics?

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

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

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

Reply on news.ycombinator.com