background preloader



Related:  Datavisualisation

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. Data Visualizatiion libraries based on D3.js D3.js is the latest incarnation of a javascript data visualization library originally called Protovis by Michael Bostock. This collection of interactive charting tools is open source and has inspired several additional libraries based on its powerful core components – several of which are listed below. For those of you new to the magic of D3, check out this introductory workshop by Mr. Bostock himself.

OpenStreetMap Where is this? Reverse Directions Welcome to OpenStreetMap! OpenStreetMap is a map of the world, created by people like you and free to use under an open license. Hosting is supported by UCL, Bytemark Hosting, and other partners. 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 More 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.

How to Find the Right Chart Type for your Numeric Data 22 Feb 2016 Charts help you visualize numeric data in a graphical format but the problem is there are just too many types of charts to choose from. This diagram will help you pick the right chart for your data type. 100 Tools Chart selection 1. ChartChooser from Juice Analytics2. Charts suggestions from Andrew Abela3. Graph Selection Matrix from Perceptual Edge4. 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

rCharts rCharts is an R package to create, customize and publish interactive javascript visualizations from R using a familiar lattice style plotting interface. Installation You can install rCharts from github using the devtools package require(devtools)install_github('rCharts', 'ramnathv') Features Rickshaw: A JavaScript toolkit for creating interactive time-series graphs Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo →

Textures.js Textures are useful for theselective perception of different categories View on Github Getting started d3: scales, and color. In protovis, scales were super-useful in just about everything. That much hasn’t changed in d3, even though d3.scale is a bit different from pv.Scale. (do note that d3.scale is in lowercase for starters).

Thinking with Joins Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no primitive for creating multiple DOM elements. Wait, WAT? Sure, there’s the append method, which you can use to create a single element.