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:  TutorialD3jsD3

Vector Calculus: Understanding Divergence Physical Intuition Divergence (div) is “flux density”—the amount of flux entering or leaving a point. Think of it as the rate of flux expansion (positive divergence) or flux contraction (negative divergence). If you measure flux in bananas (and c’mon, who doesn’t?), a positive divergence means your location is a source of bananas. You’ve hit the Donkey Kong jackpot. CodeFlower Source code visualization This experiment visualizes source repositories using an interactive tree. Each disc represents a file, with a radius proportional to the number of lines of code (loc). All rendering is done client-side, in JavaScript. Try hovering on nodes to see the loc number, clicking on directory nodes to fold them, dragging nodes to rearrange the layout, and changing project to see different tree structures.

d3: adding stuff. And, oh, understanding selections From data to graphics d3 and protovis are built around the same principle. Take data, put it into an array, and for each element of data a graphical object can be created, whose properties are derived from the data that was provided. Only d3 and protovis have a slightly different way of adding those graphical elements and getting data. In protovis, you start from a panel, a protovis-specific object, to which you add various marks.

Export animation of a Manipulate autorun sequence? - Mathematica Stack Exchange current community your communities Sign up or log in to customize your list. more stack exchange communities Stack Exchange Climbing the d3.js Visualisation Stack Over the last few months, the d3.js Javascript visualisation library has seen widespread use as the powerhouse behind a wide variety of highly effective interactive data visualisations. From the Sankey diagram we used to visualise horse meat exports in the EU, to Anna Powell Smith’s funnel plots generator, to the New York Times’ 512 Paths to the Whitehouse, d3.js provides a rich framework for developing an increasingly rich panoply of data driven animated graphics. Despite the growing number of books and tutorials that are springing up around the library, such as Data-Driven Documents, Defined on the Data Driven Journalism site, creating even the simplest charts using d3.js out of the box can prove a major challenge to those of us who aren’t fluent in writing Javascript or manipulating the DOM (whatever that means!;-) Further up the abstraction layer, we have more specialised Javascript libraries that provide support for complex or compound chart types:

Stephen Few’s Student Dashboard in d3.js Portfolio Recent Comments Archives October 2015 How SVG Line Animation Works I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works.

Cubism.js Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Shelby Sturgis February 10, 2014 For those of you familiar with Elasticsearch, you know that its an amazing modern, scalable, full-text search engine with Apache Lucene and the inverted index at its core. Useful SVGO[ptimization] Tools One of the steps you need to do when working with SVG is optimizing the SVG code after exporting it from the editor and before embedding in on your web page. For that, several standalone optimization tools exits. The two tools I usually mention in my articles and talks are Peter Collingridge's online editor, and SVGO.

Gallery · mbostock/d3 Wiki Wiki ▸ Gallery Welcome to the D3 gallery! More examples are available on If you want to share an example and don't have your own hosting, consider using Gist and If you want to share or view live examples try or ease()-y as Math.PI This is a presentation I gave at the Eyeo Festival in Minneapolis on June 11, 2014, adapted for the web. The talk was entirely live-coded in the JavaScript console, an experience I’ve tried to recreate here. I recommend viewing this in Chrome, with the developer tools open.

Getting to grips with LaTeX - writing - Andrew Roberts Here are some tutorials I have written for getting up to speed with this excellent document processing system. Funnily enough I wouldn't consider myself an expert, per se, but I'm learning all the time. I recall finding it quite taxing when I started to learn LaTeX, which is why I have started these tutorials. Colors · mbostock/d3 Wiki Wiki ▸ API Reference ▸ Core ▸ Colors Constructing visualizations often involves working with colors. Even though your browser understands a lot about colors, it doesn't offer much help in manipulating colors through JavaScript. So D3 provides representations for various color spaces, including RGB, HSL, LAB and HCL, allowing specification, interpolation, conversion and manipulation (such as making colors brighter or darker). Note: while you can work with colors directly, you might also want to take a look at D3's built-in color interpolation, such as interpolateRgb, interpolateHsl and scales. If you are looking for color palettes, see the ordinal scales reference.