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
Flare | Data Visualization for the Web
Européennes : c’est quand même fou tout ce qui s’est passé avec le vote blanc
Tribune La loi sur la reconnaissance du vote blanc était appliquée pour la première fois lors de ce scrutin européen. Résultat ? La mise à disposition de deux chiffres distincts (2,78% de vote blanc ; 1,26% de vote nul). Rien d’autre. En effet, le vote blanc, bien que décompté, n’en reste pas moins non comptabilisé dans les suffrages exprimés. Le législateur s’est improvisé cuisinier. Ceux qui voulaient voter blanc avaient alors trois solutions. Fabriquer soi-même son bulletin Un bulletin blanc n’est pas qu’une simple feuille vierge. Grotesque et inapplicable pour les personnes en charge du dépouillement : comment penser qu’ils ont mesuré chacun des bulletins dépouillés ? Mettre une enveloppe vide dans l’urne Vous avez bien lu, il ne s’agit pas d’une blague. Appuyer sur la touche « Vote blanc » via une machine à voter Enième ambiguïté : les machines à voter laissent la possibilité à l’électeur d’appuyer sur une touche « Vote blanc ». Bonus : la liste Citoyens du vote blanc
T N T — The Network Thinkers
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.
d3_tutorial/
Intro Data-Driven Documents, or D3 for short, is a new visualization library to build visualizations in SVG. But in my opinion, it's also the best javascript multipurpose SVG library when it comes to animation, interaction and above all for binding data to graphics. The community is very responsive, source code is very clean and the API is well written. Simple example Let's start with a simple D3 example. D3 simple example: <! SVG circle with hovering: This is the SVG generated by the code from the above example: Why not just write this SVG fragment directly? Add, remove and modify multiple elements from an existing DOM Dynamically add attributes and styles according to a function Animate attributes and styles Bind data to automatically add elements when needed Benefits from a lot of helper functions Select, append, bind event D3, like JQuery and other javascript frameworks, simplify the selection of an element in the DOM but also in the SVG DOM. D3 uses a declarative style of programming.
FLOK Society, la société pour la connaissance libre et ouverte.
FLOK est l’acronyme de Free/Libre Open Knowledge Society, la société pour la connaissance libre et ouverte. Parmi les actions prévues, il y a la mise en place d’un réseau mondial de chercheurs sur la transition, emmené par Michel Bauwens dont le point d’orgue devrait être une grande conférence internationale organisée sous peu (Jérémie Zimmerman et Bernard Stiegler sont par exemple dans la boucle, parmi les Français). Nous avons voulu en savoir plus en traduisant cette interview de quelques-uns des ses acteurs. Remarque : Les vieux lecteurs du Framablog se souviendront peut-être de cette vibrante allocution de président Correa en faveur du logiciel libre (2007 déjà). Comment la société FLOK apporte une approche des biens communs à l’économie de l’Équateur Bethany Horne - 22 octobre 2013 - Shareable.net (Traduction : lamessen, baba, lamessen, baba, Asta, Penguin) Bethany Horne : Qu’est-ce qui a inspiré le projet de société FLOK ? Ce fut le point de départ du FLOK. Voir l’article original
Raphaël—JavaScript Library
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 . 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 **Warning Coffeescript** The example is written in [CoffeeScript]( as I find it much easier to read and write than javascript. #D3’s Force Layout #nodes #gravity #alpha
D3 Tutorials
<div id="js_warning"><strong>JavaScript is turned off, so this page won’t be very interactive.</strong> Switch JavaScript back on in your web browser for the full experience.</div> These tutorials have been expanded into a book, Interactive Data Visualization for the Web, published by O’Reilly in March 2013. Purchase the ebook and print editions from O’Reilly. A free, online version includes interactive examples.
