javascript

• 

  How to Animate Transitions Between Multiple Charts

  Animated transitioning between chart types can add depth to your data display. Find out how to achieve this effect using JavaScript and D3.js.
• Members Only
  

  How to Make an Interactive Choropleth Map

  When presented with a static graphic, it can be useful to see specific values after you see overall patterns. This tutorial shows you how to add simple interactions to a choropleth map so you can get specifics for regions.

• xkcd-style charts in R, JavaScript, and Python

  October 19, 2012 to Software by Nathan Yau

  

  The ports and packages to make your charts look like the came out of the web comic xkcd are coming out in rapid fashion. Dan Foreman-Mackey stylized charts in JavaScript using D3, Mark Bulling did the same in R, and Jake Vanderplas described how he did in Python. Still waiting for a Gangnam theme.

• Make cool images with emergent algorithm

  September 17, 2012 to Data Art by Nathan Yau

  

  I'm not sure what I'd do with Ablaze.js, a JavaScript library by Patrick Gunderson, but the results are sexy. Play around with the app here. [via @jeffclark]
• 

  How to Make an Interactive Network Visualization

  Interactive network visualizations make it easy to rearrange, filter, and explore your connected data. Learn how to make one using D3 and JavaScript.
• Members Only
  

  Interactive Time Series Chart with Filters

  Time series charts can easily turn to spaghetti when you have multiple categories. By highlighting the ones of interest, you can direct focus and allow comparisons.

• Live Coding Implemented

  March 19, 2012 to Coding by Nathan Yau

  

  Remember Bret Victor's live coding talk from last month? He presented an example where he would edit code on one side, and the corresponding visual would automatically update on the other side. It was instant feedback that could help in learning code. Gabriel Florit implemented the idea with D3, and it's called water. Edit on the right and the diagram updates on the left. Try clicking on a number and then holding down the Alt key (or option on the Mac) for slider goodness.

  Also, check out Daniel Hooper's interactive JavaScript editor, CodeBook. It's the same idea but a slightly different implementation.

  [via Waxy]

• Wind motion patterns animated

  February 29, 2012 to Mapping by Nathan Yau

  

  Nicolas Garcia Belmonte, author of the JavaScript InfoVis Toolkit, mapped 72 hours of weather data from 1,200 stations across the country.

  Gathering the data from the National Weather Service was pretty interesting, I didn’t know USA had so many weather stations! The visualization shows wind direction encoded in line angles, wind speed encoded in line lengths and disk radius, and temperature encoded in hue.

  Press play, and watch it glow. You can also easily switch between symbols: discs with lines, lines only, or filled circles.

  [Nicolas Garcia Belmonte via @janwillemtulp]
• Members Only
  

  Build Interactive Time Series Charts with Filters

  When you have several time series over many categories, it can be useful to show them separately rather than put it all in one graph. This is one way to do it interactively with categorical filters.

• Data-Driven Documents for visualization in the browser

  March 9, 2011 to Software by Nathan Yau

  

  As we know, browsers keep getting better, and it grows easier every day to visualize data native in the browser, when you used to have to use Flash. In the early goings, the JavaScript visualization libraries felt clunky to their Flash counterparts, but the roles are changing. There's Protovis, Polymaps, and Processing.js that help you make full use of modern browsers' functionality.

  Mike Bostock, who had a big hand in those first two, recently made Data-Driven Documents, or D3 for short, available to play with.
  Continue Reading