Mike Bostock Please find my recent work on Observable. Past Work April 28, 2017A Better Way to Code December 9, 2016Command-Line Cartography March 9, 2016What Makes Software Good? December 28, 2015Introducing d3-scale December 3, 2015Introducing d3-shape November 23, 2015Let’s Make a (D3) Plugin December 27, 2014Mapping Every Path to the N.F.L. December 20, 2014How Each Team Can Make the N.F.L. November 5, 2014The Most Detailed Maps You’ll See From the Midterm Elections November 3, 2014How To Scroll September 19, 2014‘Stop-and-Frisk’ Is All but Gone From New York July 26, 2014Mapping the Spread of Drought Across the U.S. June 26, 2014Visualizing Algorithms June 15, 2014Three Little Circles May 22, 2014Is It Better to Rent or Buy? May 6, 2014Let’s Make a Bubble Map April 22, 2014Who Will Win The Senate? March 7, 2014Let’s Make a Block Feburary 14, 2014Front Row to Fashion Week February 14, 2014Sochi 2014: Interactive Stories January 11, 2014Taking the Battle to the States November 5, 2013Let’s Make a Bar Chart #Examples
Stephen Boak — Easy as (a) Pie Through my work at Boundary I’ve started playing with the D3 visualization library, trying to build some interesting visualizations for our real-time network monitoring dashboard. I’ve really been enjoying D3 and Mike Bostock, the creator, has been extremely helpful to me and lots of others in the d3-js Google Group. Since the library is new, I hope the series of experiments I post here can be helpful in spreading some knowledge and awareness of the library. What You’re Building My first experiment is an animated pie chart meant to visualize a breakdown of incoming network traffic by port. Here is the completed pie chart: I’ve also posted the complete source code on JSFiddle. Building the Visualization For the sake of brevity I’ll skip over some of the details, but feel free to contact me with any questions. There are a couple of D3 helper functions that I use. The second is a function to return a color value from an ordinal scale of 20 preset colors: Improvements
Working with data in protovis For the past year or so I have been dabbling with protovis. I don’t have a heavy CS background but protovis is supposedly easy to pick up for people like me, who are vaguely aware that computers can make calculations but who need to check the manual for the most mundane programming instructions. I found was while it’s reasonnably easy to modify the most basic examples to make stuff happen, it is much harder to understand or adapt the more complex ones, let alone to create a fairly complex visualization. The stumbling block for me was the use of the method data. So I started documenting my struggle with data, first for my own use, and eventually realized I could share what I learned. I split this tutorial in 5 parts. And as a bonus, I have also deconstructed several interesting (but not immediately accessible) examples from the gallery: To make the best use of this material, it would be helpful to know a bit about protovis. The protovis documentation.
Creating a brush region programatically For auto-redraw such that the focus of a 1D brush matches the graphed domain, you need to do as follows: (1) Apply the brush scale to the graphed domain (i.e., the brush extent) --> store in var brushExtent; (units: pixels) (2) Within the brush element (class='brush'), select the <rect> with class='extent'. (3) If the brush is horizontal (i.e., for the x-axis), set the 'x' attribute to the first value in brushExtent. This moves the start position of the focus <rect> to match the graphed domain. (4) Next, set the 'width' attribute of the extent to brushExtent[1] - brushExtent[0]. (*) The extent should now programmatically match the graphed domain. I use this procedure as part of a resize function. - mostra testo citato - On Tuesday, March 26, 2013 9:52:38 PM UTC, andrew payne wrote: Hi Mike,I'm trying to programmatically set a brush region at the initialization stage. Setting the brush extent programmatically does not trigger automatic redraw and does not dispatch any events.
Jim Vallandingham Sentence Drawings Stefanie Posavec is known for her manually curated and hand drawn visualizations that illuminate variations of structure and form in great works of literature. In this remix, automation is used in place of thoughtful analysis to recreate a selection of her First Chapters, in which a layout technique she calls "sentence drawings" is used to display the first chapters of classic books. Implemented in D3. Automatic Sentence Drawings Track Tag Love An experiment that allows users to explore their most-listened to songs, and the tags associated with these songs. User names are faked - but the rest of the data is real. Visualization includes a force-directed layout with tag nodes suspended in a circular orientation. Song nodes are drawn towards the tags they are associated with. Track Tag Love Dallas Neighborhood Comparison Tool This piece provides both scatter plot and interactive map, allowing the user to zoom in on one of over 500 neighborhoods in the metro area. Feltronifier
How to invoke "click" event programmaticaly in d3 Jim Vallandingham Update: I moved the code to its own github repo - to make it easier to consume and maintain. Update #2 I’ve rewritten this tutorial in straight JavaScript. So if you aren’t that in to CoffeeScript, check the new one out! Recently, the New York Times featured a bubble chart of the proposed budget for 2013 by Shan Carter . It features some nice, organic, animations, and smooth transitions that add a lot of visual appeal to the graphic. As FlowingData commenters point out , the use of bubbles may or may not be the best way to display this dataset. In this post, we attempt to tease out some of the details of how this graphic works. #Simple Animated Bubble Chart In order to better understand the budget visualization, I’ve created a similar bubble chart that displays information about what education-based donations the Gates Foundation has made. You can see the full visualization here And the visualization code is on github The data for this visualization comes from the Washington Posts DataPost .
Raphaël—JavaScript Library Flare | Data Visualization for the Web