Getting Started with D3.js

D3.js (Data Driven Documents) was created by Mike Bostock at the New York Times to help him create more interactive visualisations using web technologies. If you've ever wanted to create, silky smooth interactive graphs and charts, D3 is for you.

D3 takes advantages of base technologies, namely JavaScript, HTML, CSS3, Canvas and SVG, especially SVG.

As you can probably tell by its name, D3 is heavily data oriented. Its aim is to make it easier for us to visualise data on the web, whether that is through HTML tables or SVG.

D3 is very fast and flexible and provides several helper methods for dealing with the DOM.

To get inspired, you need look no further than the stunning examples that people have created using this amazing library:

There's so many! Here's a few of my favourites:

Collision Detection looks like it could make a start of a cool game.


Random trees anyone?


Super-smooth panning and zooming?


Oh and let's not forget the fantastic global wind chart.

So it's not all graphs and charts! Although there are plenty of good examples of those too:

And not that much code!

The best way to learn is to get stuck in, so lets look at creating a simple chart:

D3 Demo: 5-div bar chartSo what's going on here?

d3.select("body").selectAll("div")   
  .data(dataset)

means select all the divs in the body of the document and apply the dataset to them.

.enter() .append("div")

if the divs don't exist append them.

Next we apply our styling to the bars by giving them a class name:

.attr("class", "bar")

and finally we apply the data to the bar's height:

.style("height", function(d) {  
  var barHeight = d * 5;   return barHeight + "px";
});

d (this could be any variable name) represents the value from the dataset and these are iterated through one by one.

Whatever we return is assigned to the height of that particular bar.

Play about with the example a bit and you should get a feel for how the essence of D3 works.

Ok so that's all well and good, but we're just using HTML/CSS to draw charts which is OK, but you may want to play about with the power of SVG which at the end of the day, lends itself to this sort of application.

A note on SVG

SVG (Scaleable Vector Graphics) actually substantially pre-dates HTML5 and is a separate specification. At first glance the output of SVG may look like Canvas but it is a very different beast.

SVG is not pixel based, rather it is vector based and hence scaleable. (You can zoom in as much as you like without seeing the pixels). Another difference is that it is XML based and like HTML has its own Document Object Model (DOM). Because it has a DOM it means we can listen to events on certain elements, this means SVG is so much more powerful than say Canvas, in that we can easily react to users clicking on elements!

SVG has its own set of attributes that can be applied to objects, let's look at how we can use D3 together with SVG.

D3 Demo: Scatterplot

This time we have a dataset containing co-ordinates represented as pairs arrays within an array in this case.

We create the SVG element and give it a width and height and this time as SVG has circle elements, we create circles and apply the data to the cx and cy attributes (center x and center y).

You can imagine that it wouldn't be too difficult to include another piece of data representing radius.

So it's fantastic to be able to create such visual representations of data, but occasionally we have to describe what elements of these charts using text and that's where labels come in.

Labels

In this example we draw a bar chart with SVG and colour the bars dependent on the data.

D3 Demo: Making a bar chart with value labels!Next we create the labels using the SVG text element. We set an attribute called text-anchor to middle. Yeah SVG is a little different to HTML, we add some style and we're good to go. Note: the origin of an SVG context is the top,left and that is why we have to subtract the height when we plot the y dimension. We can also add labels in two dimensions: D3 Demo: Making a scatterplot with SVG

So now you can draw some basic charts using D3.js - but there's so much more to learn - scales, axis, animation and interaction - to name a few topics.

(These examples based on Scott Murray's excellent AlignedLeft Tutorials).

Further Reading

D3 Tutorials
Made with D3.js
Climbing the d3.js Visualisation Stack
Getting beyond hello world with d3
Creating Animations and Transitions With D3
Learn how to make Data Visualizations with D3.js
Simple Map D3
Selections in d3 – the long story
D3 plus - Data visualization made easy
Chord Diagrams in D3

This blog post has been written by Mark Boas

Mark makes, writes about and promotes new and open web technologies. Co-founder of Happyworm - a small web agency and makers of the jPlayer media framework, he enjoys pushing the limits of the browser using HTML5 and JavaScript. Though a generalist at heart, Mark spends much of his time playing with web based media and real-time communications and is actively involved in helping news organisations world-wide as part of the Knight-Mozilla OpenNews initiative. A lover of all things audio, his passion often drives his work and is currently enjoying the challenge of taking audio ‘somewhere new’ with his Hyperaudio experiments. You can follow Mark on Twitter.

Animate yourself with PicMood

PicMood coverTired of the same old avatar?

Changing your profile picture on Facebook is one of the best ways to let your friends know how you are really feeling.

Instead of using yet-another-boring-selfie, how about creating a comic strip version of yourself, dress it up, write a caption and place it on a custom background? That's exactly what PicMood is for!

PicMood lets you quickly create an expressive and funny profile picture and you can use it from any smartphone or tablet, whether it's an iPhone, Android, Windows or any other device with an up-to-date browser just like all the apps that you can find on AppsFuel.

pick your character

After first picking whether you want your character to be male or female, tap the screen to cycle through a series of facial expressions and moods.

Are you surprised, skeptical, disgusted, happy or ... ? Then tap the hair to try on different coiffures.

petYou can even choose to have a pet by your side! Are you a cat person or a dog lover?

These little creatures will add more character to your profile pic. Tap on the pet to change his mood.

captionWrite a caption to describe how you're feeling. Be creative. Surprise your friends – or just make them laugh.

background photoTo add a more personal touch to your avatar, choose one of the cartoon backgrounds, or use a picture from your smartphone.

You can even apply special filters to change the look and feel of the background. Even a background can have a mood...

Your finished PicMood avatarIf there is anything that you don't like about your PicMood avatar, don't worry, you can always go back and change your character.

When you're happy with your cool new cartoon avatar, publish it to Facebook and amaze your friends. They will then be inspired to try to top your avatar with one of their own, and before long your whole network of friends will have PicMood avatars, too.

PicMood is just one of a series of great HTML5 mobile apps created especially for AppsFuel, designed for people like you who want to get the most out of their smartphone. Check out EasyReader (save articles to read later in a mobile-friendly format), Bust the Dust (the only game that makes cleaning house fun) and Memento (an elegant and easy to use to-do list manager).

Get organized with AppsFuel

AppsFuel Organizer

AppsFuel Organizer

I am thrilled to introduce our completely redesigned AppsFuel Organizer, the HTML5 mobile app launcher and discovery tool for Android and Windows Phone devices. And it's available for free on Google Play  and Windowsphone.com right now!

AppsFuel Organizer is a native mobile app for Android and Windows phones that makes it easy for users to install mobile web apps to the homescreen of their smartphones and to organize their web apps for quick launching.

Our team did everything possible to simplify the user experience, making it simple to install* your favorite HTML5 apps.

AppsFuel in the Google Play store

The AppsFuel Organizer has a search function and makes adding the icon/shortcut of the mobile web app to the homescreen of the device simple as 1-2-3. So, if you've got an Android or Windows Phone smartphone or tablet, do yourself a favor and get the AppsFuel Organizer right now.

The Android app has this feature set:
• a list of your installed apps, titled “my sites”
• all the apps in the AppsFuel marketplace by category
• most popular global web apps by category (making it a great apps discovery tool), and
• your mobile browser's history.

And if you want to get the rest of your life organized, try Coolendar!

— Emanuele


* The "installed" icon on your homescreen is just a bookmark or shortcut to the URL of the latest version of the app. That's the best part of using HTML5 mobile apps — you never have to update the app.

Everything You Need to Know About playbackRate

bullet
Photo courtesy of Timecode Lab

With all the fuss about the UI changes in recently released iOS7, you'd be forgiven for missing an interesting little feature that promises to change the way we think about video play-back. On the iPhone 5s at least, you can capture video at 120 frames per second which makes for a smooth slow motion experience when played back at 60 fps.

Take, for example, Burberry using slow motion to promote a fashion show, this 15 second long instagram Video received 20,000 instagram 'hearts' in one day.

I'm sure that there are much better applications than fashion shows, but it's indicative nonentheless.

What's it Good For?

So what interest is all this to makers of web based applications? Well the good news is, that we have a rough diamond in a little touted web audio and video method, known as playbackRate. PlaybackRate — as you can probably imagine — allows you to adjust the speed at which web video and audio is played at. This can be useful for a number of reasons - let's take the example of podcasts. Imagine you have a 50 minute commute, but your favourite podcast lasts an hour. Up the play-back rate slightly and you can probably squeeze it in - you may not even notice the difference in pace. Due to the algorithms used the pitch is maintained and only the rate is adjusted, so within certain reasonable limits it actually sounds pretty good!

As part of a the Hyperaudio project, I've been playing about with playbackRate to allow transcribers to adjust play-back speed when using our media transcription tools. In this post I'll explore support and write about the limits of its implementations in various browsers and how we can still use it for fun and profit.

Interesting aside: at the time of writing an equivalent of playbackRate doesn't appear to be implemented in current versions of Adobe's Flash Plugin, which means fallbacks for older browsers are unlikely. Perhaps more interestingly, services like YouTube who currently default to Flash will need to switch to HTML5 to support playbackRate.

How it Works

PlaybackRate holds a number which represents a multiple of the original media speed. For example 0.5 represents half speed and 2 represents double speed. Note, currently negative values are not allowed, this in theory would play things backwards, in practice this is difficult for browsers to handle and is not yet implemented. For those interested the reason it isn't implemented (at least in video) is that popular video codecs use a system of keyframes and use differences from those keyframes to calculate successive frames. I asked Mozilla's Chris Pearce — who works on implementing video in the browser — what it would take to play video backwards. His response:

"(...) in order to play backwards, basically the player needs to decode every frame since the previous keyframe in the timeline and the next keyframe, and run through that sequence in reverse order while playing, and repeat this process.

A single 1080p video frame takes up 1920x1080x4=8294400 bytes (about 8 megabytes). For 30fps video with keyframes every two seconds you're going to need to cache 480MB of video data. If this video data is stored in GPU memory, then you've swallowed most or all of the dedicated GPU memory on most hardware, so you'll cause performance problems."

So it looks like that option is out, at least for a while.

Compatibility

Results from our testing shows support looks something like this:

Chrome 20+
Firefox 20+
IE 9+
Safari 6+
Opera 15+
Mobile Chrome (Android)
Mobile Firefox 24+
IE Mobile
Mobile Safari 6+ (iOS)
Opera Mobile

As you can see there's mixed coverage but all modern browsers seem to coming up to speed.

There are a few caveats, so let's take a look at the issues and how we can work around them.

For all browsers that support playbackRate the audio will cut out at certain rates. It's probably wise then to limit your use of playbackRate to a certain range, currently this appears to be between 0.5 (half speed) and 4 (quadruple speed). Worryingly, the audio in Chrome (and Opera) may become corrupt if you move much beyond these limits and then back again. (WARNING turn down volume and remove earphones when testing).*

*This appears to be fixed in more recent versions.

Quick Example

Here's an example to try:

JS Bin

(Try it out on JS Bin)

You may notice that Safari, although coping with audio slightly better than Chrome, copes less well with variable rate video playback. Firefox seems to work OK on all fronts.

defaultPlaybackRate and ratechange

In addition to playbackRate we also have defaultPlaybackRate which — unsurprisingly — lets us set the default play-back rate, which effectively means the rate at which that the media resets to, in the case that we change something like the source, or in some browsers (IE9/10) if an ended event is generated. We would usually set defaultPlaybackRate before playing the media while playbackRate allows us to change it during video play-back.

We also have a new event called ratechange which fires every time the playbackRate changes. Note however that while Firefox will fire this event when the media source is switched, (regardless of whether the rate changes) Chrome/Opera and Internet Explorer will not.

We have a different situation with iOS(7) where the playbackRate only appears to have any effect when the media is paused, it has no effect while the media is playing.

Internet Explorer 9+ appears to reset the playBackRate to the default when the media ends. IE9 appears to behave the same as IE10 with playback at different speeds working well.

Limitations

In general we found that most browsers stop playing audio below a playbackRate of 0.5 and above 4. Video will continue to play silently however. So it's recommended for most applications that you limit the range to between 0.5 and 4, which in practice is good enough for most applications.

Another thing to note is that the duration value for any piece of media does not change in response to playbackRate changes, similarly currentTime. So if we think back to the Podcast commute case, we cannot adjust the rate to fit a specific time easily, without providing the user with a calculated duration (or time remaining).

Here's a more comprehensive example which includes defaultPlaybackRate and ratechange.

Conclusion

So as we can see playbackRate can be used on most browsers, but you should tread carefully for now. For your convenience we've abstracted the differences and support playbackRate in the latest version of jPlayer.

To sum up:

  1. Do not expect defaultplayBackRate to work consistently between browsers.
  2. Do restrict playbackRate values to between 0.5 and 4 (inclusively).
  3. Be aware that the ratechange event may fire when the source is changed, (regardless of whether the rate changes).

Note also that, media isn't easy to test. On areweplayingyet.com the test only checks if the playbackRate value is set but that's not enough to see if that value is used and hence to ascertain if playbackRate is actually implemented.

Thanks to my colleague Mark Panaghiston for much of the research conducted for this article.

This article has been written by Mark Boas

Mark makes, writes about and promotes new and open web technologies. Co-founder of Happyworm - a small web agency and makers of the jPlayer media framework, he enjoys pushing the limits of the browser using HTML5 and JavaScript. Mark spends much of his time playing with web based media and real-time communications and is actively involved in helping news organisations world-wide as part of the Knight-Mozilla OpenNews initiative. A lover of all things audio, his passion often drives his work and is currently enjoying the challenge of taking audio ‘somewhere new’ with his Hyperaudio experiments. You can follow Mark on Twitter.

Building your HTML5 mobile apps business

Publish, Distribute and MonetizeIf you're a smart and well-read developer like most of my readers, you have undoubtedly heard the criticism about how much harder it is to monetize a mobile web app than a native OS app. You will have read the studies showing the greater propensity to buy apps and the ease of payment on Apple's iTunes store or in Google's Play. I am not going to try to debunk those numbers, they're well-researched and verified.

But I started AppsFuel in order to make another dream come true — give my fellow web developers the tools and the marketplace they need to build a real business based on the open web standards that we love and want to support. And we're getting really close!

These are the same standards that are responsible for having reached over 2.5 billion Internet users this year. And Internet access is rapidly shifting to mobile devices. The percentage of mobile Internet access globally hit 15% this year and is growing 150% per year. It's time to join forces in order to bring the same level of sophisticated native app experiences and simpler monetization tools to the HTML5 mobile app ecosystem.

Here's what AppsFuel is bringing to the party:

  • a beautifully redesigned developer/publisher site, complete with intuitive dashboard and exhaustive documentation to manage your presence in the marketplace.
  • an automated “app-like” installation flow for your HTML5 mobile app on all smart mobile devices.
  • two easy-to-go-live monetization APIs — a 1-click payment solution for paid apps based on carrier billing and an mobile-specific advertising solution.

And if that's not enough, you also will get increased distribution in the form of free traffic and increased visibility for your brand or service.

AppsFuel, of course, can't turn every app into a success story. That's up to you and your team. But what we can do, and what we take very seriously, is to provide you with the tools, the platform and support that you need to be among the first mobile web app success stories!

Now is probably a good time to click through, sign up and take your HTML5 mobile app strategy up to the next level.

— Emanuele

 

Post Navigation

About Us | Contact Us | Developer | Terms of Use | Privacy Policy

Copyright © 2013 Dada Entertainment, LLC. All rights reserved.