background preloader

Data Visualization Libraries Based on D3.JS - Mike McDearmon

Data Visualization Libraries Based on D3.JS - Mike McDearmon
There are a lot of ways to visualize data on the Web (with more emerging every day), but the flexibility, versatility, and energized development community surrounding D3.js makes it a great option to explore. The following list of D3 plugins, extensions, and applications below is by no means comprehensive, but oughta be enough to keep you busy for a while. If you’re just getting your feet wet with D3.js, here are some great learning resources to get you acclimated:D3 for mere mortals: Great introductory lessons for those starting from scratch.Try D3 Now: Another great resource for learning about core D3 concepts.Data-Driven Documents (paper): An academic article by Mike Bostock with loads of footnotes.Learning D3, Scott Becker: A quick and effective tutorial series to get yourself up and running.Dashing D3: A very thorough tutorial series covering a LOT more than just D3.Interactive Data Visualization for the Web is a fantastic book by Scott Murray. Related:  Datavisualisation

D3js Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai faite sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie. A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG. Manipuler ou créer une div avec d3.js Ajouter et manipuler un rectangle SVG Dessiner plusieurs éléments dans un groupe svg Gérer des données au format JSON et dessiner en fonction de ces données Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class “node”. Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter(). selectAll() data() La methode data() permet de “binder” (attacher) des données à des éléments sélectionnés par la methode selectAll(). enter()

JointJS - the HTML 5 JavaScript diagramming library. Tutorials · mbostock/d3 Wiki Wiki ▸ Tutorials Please feel free to add links to your work!! Tutorials may not be up-to-date with the latest version 4.0 of D3; consider reading them alongside the latest release notes, the 4.0 summary, and the 4.0 changes. Introductions & Core Concepts Specific Techniques D3 v4 Blogs Books Courses D3.js in Motion (Video Course)Curran Kelleher, Manning Publications, September 2017D3 4.x: Mastering Data Visualization Nick Zhu & Matt Dionis, Packt. Talks and Videos Meetups Research Papers D3: Data-Driven DocumentsMichael Bostock, Vadim Ogievetsky, Jeffrey HeerIEEE Trans. Cytoscape.js Creating Animated Bubble Charts 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 . Data Visualization 101: Pie Charts In our Data Visualization 101 series, we cover each chart type to help you sharpen your data visualization skills. Pie charts are one of the oldest and most popular ways to visualize data. This classic chart is the perfect example of the power of data visualization: a simple, easy-to-understand presentation that helps readers instantly identify the parts of a whole. Without further ado, here’s everything you need to know about the pie chart. What It Is The typical pie chart is divided into sections that illustrate a numerical proportion. Where It Came From Scottish engineer William Playfair is generally credited with creating the world’s first pie charts back in 1801. Playfair’s pie chart showed the proportion of land held by the Turkish Empire in Asia, Europe and Africa. Although he invented the form, Playfair never called his invention a “pie chart.” Another series of Playfair’s pie charts in “Chart Representing the Extent, Population & Revenue of the Principal Nations in Europe in 1804.”

frewsxcv/graphosaurus D3.js - Data-Driven Documents Graph Visualization for Neo4j Graph Visualization for Neo4j Goals This article reviews the different tools available for visualizing graph-based data. Prerequisites You should have familiarized yourself with Graph Databases and the Property Graph Model. Developer Working with Data Goals This article reviews the different tools available for visualizing graph-based data. Prerequisites You should have familiarized yourself with Graph Databases and the Property Graph Model. Beginner Overview Graph visualisations are a powerful tool to convey the content of a graph. In all cases, the visualizer request JSON data for all or part of the graph data then dynamically creates an in-memory JavaScript visualization on the client side. Screencast: The Neo4j Browser The default Neo4j Server has a powerful, customizable data visualization tool based on the built-in D3.js library. In the screencast, we demonstrate how to style nodes and relationships in the Neo4j’s Browser visualization, and how to set colors, sizes, and titles. results in:

Comptes des ménages - Revenu disponible des ménages Le revenu net réel disponible des ménages est défini comme la somme de leurs dépenses de consommation finale et de leur épargne, diminuée de la variation de leurs droits nets sur les fonds de pension. Cet indicateur correspond également à la somme des salaires et traitements, du revenu mixte, des revenus nets de la propriété, des transferts courants nets et des prestations sociales autres que les transferts sociaux en nature, moins les impôts sur le revenu et le patrimoine et les cotisations de sécurité sociale payées par les salariés, les travailleurs indépendants et les chômeurs. Le revenu disponible ajusté brut des ménages y ajoute les « revenus » des administrations publiques et des institutions sans but lucratif au service des ménages (ISBLSM) pour refléter les transferts sociaux en nature. Ces transferts reflètent les dépenses des administrations publiques ou des ISBSLM sur les biens et services individuels, tels que la santé et l’éducation, au profit des ménages individuels.

anvaka/graph-drawing-libraries wwsd/ at master · enjalot/wwsd Popoto.js