6 ms·
A tour of the world in d3.js
- maxadim 14y agoA very impressive demo. Almost equally impressive is the fact that this can be done in less than 100 lines of (relatively readable) Javacsript.
- teamonkey 14y agoReadable, yes, but also hard to understand.
- pretoriusB 14y agoIf you learn 5-10 basic notions of D3, like ranges, domains, interpolations, joins, etc, it will be quite easy to understand.
- jskopek 14y agoThere'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
- neya 14y agoThis 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).
- sbarre 14y agoUnfortunately 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.
- neya 14y agoHTML 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.
- pretoriusB 14y agoActually, 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.
- Groxx 14y agoRuns 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?
- neya 14y agoTo 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.
- Groxx 14y agoDid 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.
- neya 14y agoIf 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.
- danso 14y agoUh...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
- neya 14y agoNo, 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.
- zackzackzack 14y agoCould you please provide an example of flash that replicates the above example? I'd love to see the code and compare the two.
- r4vik 14y agoIt 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/ http://html.adobe.com/edge/animate/
- amalter 14y agoRunning 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.
- calebhc 14y ago@neya Yes, I would like to see an example as well of you doing this in Flash with less lines of code.
- tingletech 14y agoI thought d3 used SVG, not HTML5
- johncoogan 14y agoD3 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).
- JuDue 14y agoDidn'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.
- bryogenic 14y agoNow all it needs is the Animaniacs to sing along with it [http://www.youtube.com/watch?v=IDtdQ8bTvRc http://www.youtube.com/watch?v=IDtdQ8bTvRc]
- Groxx 14y agoIs 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.
- r4vik 14y agoYou're right, Jason has fixed it as you can see here: http://bl.ocks.org/4183701 http://bl.ocks.org/4183701
- mbostock 14y agoJason 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.
- sneak 14y agoThe framerate is abysmal on an iPad3.
- turtlebits 14y agoDid you not know there is an iPad4? I think you need to upgrade :)
- elisehein 14y agoUnrelated, 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..
- mbostock 14y agoThis 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.
- kyro 14y agoJesus, Russia.
- tunetosuraj 14y agoI didn't know France was in Europe AND South America. Weird world tour.
- 2468ben 14y agoIt 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.