A tour of the world in d3.js | Hacker News Reader

A tour of the world in d3.js

bl.ocks.org

116 pointsr4vik50 comments

Now all it needs is the Animaniacs to sing along with it [http://www.youtube.com/watch?v=IDtdQ8bTvRc]

it can be arranged: http://bl.ocks.org/4185745

Cute, now synchronize it with the song ;)

A very impressive demo. Almost equally impressive is the fact that this can be done in less than 100 lines of (relatively readable) Javacsript.

Readable, yes, but also hard to understand.

If you learn 5-10 basic notions of D3, like ranges, domains, interpolations, joins, etc, it will be quite easy to understand.

There's a risk of turning it into too much of a gimmick, but I'd love if travel sites started doing things like this. Showing you a flythrough of where you'll be going as they pull up trip prices, for example

Unrelated, but does anyone have an idea why all of the countries appear in alphabetical order but then suddenly Spain jumps up in the middle of all the E-s? The UK follows soon after. All I could think of was Spain=Espana, but England definitely isn't the same as the UK..

This is the order they are defined in the source data (Natural Earth - Admin 0 countries), and it appears to be sorted by ISO 3166-1 alpha-3 code. Spain is ESP, United Kingdom is GB1.

Thanks for D3, learning it now and it is awesome!

Just in case, Spain in spanish is España.

Is it just me, or is there something odd about the projection? I think it's a little too flat... it feels weird.

That aside, very neat. Yet more motivation to learn d3.

You're right, Jason has fixed it as you can see here: http://bl.ocks.org/4183701

Jason didn't change the projection; Jason used a better interpolator (following great arcs rather than linear interpolation of angles as I was doing). The projection looks flat because it's an orthographic projection rather than a perspective projection.

This is a classic example of where Flash excels over the over-hyped HTML 5. The demo is very very sluggish and laggy on my Laptop (Chrome, WIN 8, C2D 2.2GHZ, 4mb Cache, 4Gigs RAM). If the author had designed the same thing in Flash,

1) He could have done it with less lines of code.

2) He could have done it with smoother animations and could have added more interactivity.

I'm not bashing the author, just suggesting a viable alternative.

Unfortunately, the unwanted HTML5 hype is just killing the platform. And the platform (I personally believe) is in the wrong hands, because they haven't marketed it well (IMO).

Unfortunately Flash has it's own downsides, namely that it doesn't work on mobile.

I'd rather have a few more lines of code and more openness and portability.

HTML 5 has a long way to go, not all features are supported across all platforms and even the single-most simplest animation or interactivity will require a lot of lines of code to function properly, let alone the extra lines of code you would end up coding to make it work across all browsers.

Actually, the "single-most simplest animation or interactivity" (plus things far more advanced that that) can be achieved with like 1-2 lines of javascript, and sometimes not even one line, using declarative css transitions and such.

Runs quickly here, doesn't need to be compiled, source can easily be viewed and edited (while it's running, depending on your browser), and style-able with CSS.

Flash does one of those, and for the same reasons as HTML5 solutions, its speed depends heavily on the code backing the drawing and how much data is displayed. Why do I want Flash again?

To make animations like these on Flash, it's just a breeze, period. I own an Adobe creative suite in which Flash is available. The bundled Flash IDE (which was originally popularly called as Flash) is a lot lot better than say, writing hundreds of complex lines of mathematical lines to create just a 3d rotation or tween.

Did you look at the source below the globe? That entire thing is 73 very short lines of code, plus a plain HTML wrapper and some super-simple CSS.

If you consider 73 to be short, then I wonder what you would think of 10-15 lines of code. Not to exaggerate, but you can actually achieve this with 0 lines of code in Flash using just Movie clips.

Uh...this is jus a basic demo. I'm betting this is far easier to work into an interactive mash up with data than Flash's movieclips

No, wrong. I assume you haven't used the Flash platform. A movie clip is like a library that can be replicated and instances of which, as many as you want can be created. Similar to creating a variable and calling it how many ever times you want it. So, in an interactive mesh-up movie clips will help you stay well organized with fewer lines of code, comparatively.

Nope, I programmed in AS for awhile though I left before Flex became well implemented.

I know about the movie clip system and don't deny what you claim. But now you're moving the goalposts as decoupling the elements from the Flash environment requires you to do more, well, hand coding. To do what you claim -- implement the same features with less code -- would require more handiwork inside the Flash authoring tool, which was never really a fun workflow even when Flash was more ubiquitous.

In any case, lowering the code count by relying on MovieClips, which as you say are basically libraries, hardly seems fair. I'm sure all the code in the OP could be reduced to about five lines, three of them being calls to external code and CSS files.

Flex and Flash are two different things. Flash is a designer-friendly tool, while flex is more programmer-oriented. From what you describe, it looks like you've been doing more coding with the platform than designing.

Dude, you serious? I can build you something similar in just 5 mins with 0 lines of code with easier maintainability and no calls to external CSS or Code.

>which was never really a fun workflow

I am surprised, because it was one of the most powerful features of flash, just like layers were for Photoshop. Maybe it's a personal opinion, but I loved this workflow personally.

5 minutes, go!

Serious? You want to do a screenshare with me, mate? I can do it \m/ :D

So I think you and I are more or less in agreement: to make an animated globe, Flash may require less lines of code for the average developer.

But what I argue is that this D3 implementation, because of its code structure, is easier to build upon with even more data and interactivity. I would bet that whatever it takes you to build in 5 minutes with 0 lines of code, will take up many, many multiple times of work to do even trivial changes. Sure, you'd win in the scenario in which only a simple animated globe is called for, but I don't think that's what most of the OP's audience cars about.

And I wonder if you can even claim to do what you want in such a short time...for the simple matter that doing is in the Flash designer environment requires a lot of point and click (for 180+ MovieClips).

Ok, for 180+ Movie clips, I agree with you :D Btw, you are the author of the bastards book for photography? Wow. I loved your work :) I'll shoot you an email sometime :)

> Not to exaggerate, but you can actually achieve this with 0 lines of code in Flash using just Movie clips.

And this is why your comparison is apples to oranges, at best.

Yeah. Compare clicks on a WYSIWYG and LOC. Makes perfect sense.

Maybe since you're such an advocate for Flash you could post your Flash version of the same widget, and show us all how much better/cleaner/faster/easier-to-code your version is?

Could you please provide an example of flash that replicates the above example? I'd love to see the code and compare the two.

I promise to make one with 0 lines of code by tomorrow. Please send me your e-mail, I'll shoot an email once its ready!

Post it here too please, it'll make for a good conversation.

I'd like to see the source code/flv too, why not submit a post to HN?

It uses about 40% of one CPU here which isn't so bad.

Yes HTML5 isn't a Flash replacement on it's own, but with the right tooling it's getting there: http://html.adobe.com/edge/animate/

Running fine on my 5 year old laptop.. Taking about 10-30% cpu.

The implementation is short enough to paste in this comment. I find d3.js almost magical. About the closest actionscript toolset would be prefuse flare. D3 was designed as a direct descendant and improvement to that generation of toolkits.

@neya Yes, I would like to see an example as well of you doing this in Flash with less lines of code.

I thought d3 used SVG, not HTML5

D3 uses a combination of HTML, SVG and CSS. HTML5 is a broader standard than SVG, so the answer is D3 uses both. HTML5 added SVG as a new feature (replacing generic <object> tags).

Didn't they give up on porting it to mobile?

This runs choppy on my old iPhone, but it doesn't make the page lag.

Flash often kills my browser and brings my entire system to a halt.

Sorry, but it's still buggy as all hell.

I didn't know France was in Europe AND South America. Weird world tour.

It owns French Guiana, so that's why that part of South America's highlighted. Also some of the country names are based on what the country actually calls itself, which is why Spain (Espana) shows up in the E section. Why the alphabetical name and the displayed name are different? That's weird.

Jesus, Russia.

The framerate is abysmal on an iPad3.

Did you not know there is an iPad4? I think you need to upgrade :)

Oh well, might as well donate my iPad 1 to a museum.

I can't order the CDMA model to where I am right now, and I won't be stateside until next month.

I know, it bothers me too.

Reply on news.ycombinator.com