[DATA] Budget 2013 : 291 milliards, mais pour financer quoi ? | Voila le travail. Voici le premier budget du nouveau Président Hollande. Emploi, travail, économie, mais aussi éducation, défense, sécurité, logement... Ce graphique représente la répartition des grandes politiques publiques 2013, décidée par la gauche. La taille de chaque rectangle est proportionnelle au montant des crédits alloués. Survolez chaque case avec votre souris pour avoir plus d'infos. Utilisez le clic gauche et le clic droit (Ctrl + clic pour les Mac) pour naviguer dans l'infographie. Cliquez ici pour revenir en arrièreCrédit : Jean AbbiateciSources : Lois de Finances 2009, 2010, 2011, 2012 et le projet de Loi de Finances 2013.
Intro to Data Visualization. Intro to D3.js This class is an introduction to Data-Driven Documents, a javascript library for web visualization by Mike Bostock. Visual Example Gallery Mike Bostock mbostock's bl.ocks Class Outline What is D3? A basic to intermediate understanding of HTML and JavaScript is required to get the most out of this class. Class structure 0:00-0:15 Introduction0:15-0:30 Learning resources0:15-0:45 Concepts for web visualization0:45-1:30 Coding Exercise1:30-2:00 Discussion Stuff I've done with d3 Various examples on Expose Data and bl.ocks.org.
Average Prices Julia Set Parallel Coordinates Also check out the library I'm working on. Render Queue Motion Charts D3.js puts a lot of effort into working with data-driven transitions. Check out this video by Hans Rosling on data storytelling with statistical graphics. Dot Enter Mixtapes and Tributary Want to learn D3 in 30 minutes? Basic Charts These charts provide examples of creating a basic chart with an external data file in CSV and TSV formats.
Examples Color d3.v3. Bl.ocks.org - jasondavies. Loading; one moment please… Bl.ocks.org - jarobertson. Bl.ocks.org - GerHobbelt.
D3 Without SVG - Jim Vallandingham. Typically, when creating interactive visualizations with d3.js, you are building your graphics up in SVG. While much of the D3 library is platform-independent, and there is even a small example using just html in the D3 tutorials, SVG is the typically used for all but the simplest D3 experiments. Recently, the New York Times published an interactive visualization on the electorial map for the up-coming American presidential election. It features a bubble chart inspired interactive ‘game’ in which users can make their own predictions about which way undecided states will swing to see how the election might turn out.
I think its a great piece. One detail that isn’t immediately apparent until you start looking at the code is that the entire visualization is built with no SVG. This means that the entire visualization works great in both modern browsers and old ones that don’t support SVG like IE8 (I tested it and its just a little less smooth then in Chrome, but otherwise fine).
Move Overview. Vis. D3: Tutorial - Scale graph | Ivan Teoh. First Protovis, now D3. Both are works from Mike Bostock. Both are data visualization JavaScript libraries. This tutorial we’re going to create a basic dot graph with scalable y-axis. It is adapted from one of the examples in D3, dot.html. Step 1: Default html First of all, we create a default html that contains a div for input button and another for the graph. 176-step1.html <! Step 2: Random data 176-step2.js Step 3: Maximum value of y-axis For this tutorial, only y axis values are random. 176-step3.js var data = randomData();var newMaxY = d3.max(data, function(d) {return d.y;}); Step 4: Ceil value Sometime, the maximum value doesn’t suitable for domain range in scale axis. 176-step4.js function reDomain(maxValue) { var dy = Math.pow(10, Math.round(Math.log(maxValue) / Math.log(10)) - 1); return Math.ceil(maxValue / dy) * dy;} var newCeilY = reDomain(newMaxY); Step 5: SVG container Now, we determine the size of the graph, which are w and h for width and height. 176-step5.js Step 6: Rulers.
Home - Jim Vallandingham.
d3 update data and update graph. Piechart. Map. Bl.ocks.org - mbostock. Force-directed. Treemap. D3.js - Data-Driven Documents.