🌐 Public

Learning D3.js

By Eric Wang

Introduction

Do you want to learn D3.js?

3 D3 workshop

Hello! These are my slides from a D3 workshop I gave at VIZBI 2012 on March 5. Over the course of three hours, we covered a large swath of introductory material. If you're interested in learning D3, you might find these slides helpful as a guided tour.

5 Getting to "Hello world" with d3

Back when I started learning programming, it was always fairly simple to achieve the canonical first step of accomplishments, that is, to get the system to announce that you are ready to do more by displaying "hello world" on the screen. In most systems then, there was a command prompt somewhere that would usually do that when you would type,

9 Selections in d3 - the long story

This past week, Scott Murray and I presented a tutorial at Strata on d3 (of all things!) First things first, you probably want to get Scott's book on the subject when it's out. I should be translating it into French eventually. You're also welcome to the slides and examples of the tutorial which can be found on https://github.com/alignedleft/strata-d3-tutorial. That include

10 Thinking with Joins

Say you're making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no primitive for creating multiple DOM elements. Wait, Sure, there's the Here append method, which you can use to create a single element. svg refers to a single-element selection containing

11 d3: scales, and color.

In protovis, scales were super-useful in just about everything. That much hasn't changed in d3, even though d3.scale is a bit different from pv.Scale. (do note that d3.scale is in lowercase for starters). Scales: the main ideaSimply put: scales transform a number in a certain interval (called the domain) into a number in another interval (called the range). For instance,

12 Working with Transitions

D3's selection.transition method makes it easy to animate transitions when changing the DOM. For example, to change the text color to red instantaneously, you can select the body element and set the color style: d3.select("body").style("color", "red");To instead animate the change over time, derive a transition: d3.select("body").transition().style("color", "red");This ease-of-use comes from D3's transition interface mirroring the selection interface: nearly everything you

13 Path Transitions

When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3's built-in path interpolators, however, you may see some surprising behavior: Why the distracting wiggle? There are multiple valid interpretations when interpolating

15 Towards Reusable Charts

I'd like to propose a convention for encapsulating reusable charts in D3. Wait for it... function chart() { // generate chart here } You could infer the dimensions from the containing element, but most charts require some configuration.A function; the standard unit of code reuse! #ConfigurationI jest; not any function will do. In truth we need a configurable function, since

16 Getting beyond hello world with d3

About a year ago I proposed a very simple template to start working with d3. But is that the way I actually work? Of course not. Because, though you and I know that displaying hello world in d3 is not exactly trivial, this is not a highly marketable skill either. That said, I just can't afford to start each of

18 Speeding Up D3.js: A Checklist

D3.js is a bit like the C of visualization frameworks. Programmers are often surprised to learn that D3.js doesn't include high-level charting functions (e.g. plot(), bar(), or line()). Most of the work is left to the programmer, and there are few surprises in the output SVG. It might seem that D3.js code is almost optimized-by-default - it draws what you

20 Building Responsive Visualizations with D3.js

In recent years D3.js has built a significant following: it's now the de facto standard for web-based data visualization. Given that an important consideration when designing or building anything for the web is how it'll behave on different devices, we're going to look at some basic techniques that can make D3.js visualizations more responsive. There's an interesting twist when it

21 Responsive Charts with D3

A confession: I'm starting to hate choropleth maps. When it comes to comes to comparing U.S. states, especially where there's no obvious geographic pattern, a map is often the wrong choice. So, following my posts on responsive maps and legends, let's make a bar chart, and let's make it responsive: Bar charts aren't especially sexy. Our brains, however, are wired

Added by Eric Wang: “Great book for D3

22 D3 Tips and Tricks

D3.js can help you make data beautiful.D3 Tips and Tricks is a book written to help those who may be unfamiliar with JavaScript or web page creation get started turning information into visualization. Data is the new medium of choice for telling a story or presenting compelling information on the Internet and d3.js is an extraordinary framework for presentation of

張維倫

Freshman

  • 0 Playlists
  • 0 Followers

betsongeorge

Freshman

  • 5 Playlists
  • 0 Followers

Kyaw Zay Yar Maung

I have friendly character.

  • 0 Playlists
  • 0 Followers

Pacster Mt

Overkommando at raidho.mx

  • 8 Playlists
  • 476 Followers

inestestes

Freshman

  • 0 Playlists
  • 0 Followers

Дамир Аралбаев

Freshman

  • 0 Playlists
  • 0 Followers

Danny Giebe

Front-End Developer and UI Designer

  • 4 Playlists
  • 281 Followers

carlos.ruiz

Freshman

  • 0 Playlists
  • 0 Followers

mwsmws

Freshman

  • 0 Playlists
  • 0 Followers

glomikuz

Freshman

  • 0 Playlists
  • 0 Followers

Steven Stadler

Vegan, Coding, Ruby, Apple, Linux, Science, Bioinformatics, SNES, Zerg... thats what I like!

  • 0 Playlists
  • 0 Followers

Maxim Orlovsky

Project Manager, Front-end Developer and Designer

  • 0 Playlists
  • 0 Followers

Flora Edwards

Freshman

  • 0 Playlists
  • 0 Followers

Beanez

Freshman

  • 0 Playlists
  • 0 Followers

Erik Craft

Freshman

  • 0 Playlists
  • 0 Followers

Giorgos Dimousis

Freshman

  • 0 Playlists
  • 0 Followers

Rodrigo Araújo

Hello! :)

  • 0 Playlists
  • 0 Followers

abdallah alshaer

big ambition and crazy dream

  • 0 Playlists
  • 0 Followers

kellymccann91

Freshman

  • 0 Playlists
  • 0 Followers

Jeffrey Berry

Foodie, college student and data science noob

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?