Interactive Data Visualization for the Web Copyright © 2013 Scott Murray Printed in the United States of America. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles ( For more information, contact our corporate/institutional sales department: 800-998-9938 or <corporate@oreilly.com>. Nutshell Handbook, the Nutshell Handbook logo, the cover image, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
D3.js Zooming and panning a collapsible tree diagram Home · mbostock/d3 Wiki xml - SQL Server SELECT to JSON function The world’s top 50 billionaires: A demographic breakdown. Top 50 Billionaire Breakdown If you asked anyone to picture the wealthiest person in the world at any given time, you could bet on some common denominators: probably a man; probably somehow attached to the words “multinational” or “conglomerate”; probably on a yacht off a private island. With Slate’s Top 50 Billionaire Breakdown, we attempt to visualize the richest of the rich by paring them into demographic categories: age, location, industry, source of wealth, education, and religious affiliation. Some of the sortings are heartening: There are more self-made men than born-rich kids in the top 50, and the self-made billionaires’ total wealth is bigger. Some are less so: The entire African continent has the same number of billionaires as Canada (one each), and there isn’t a single woman in the top 50 who’s self-made. Correction, Nov. 18, 2013: The interactive originally mislabeled the Koch brothers as Jewish.
d3.legend example d3.legend d3.legend is a quick hack to add a legend to a d3 chart. Simply add a g and .call(d3.legend). Any elements that have a title set in the "data-legend" attribute will be included when d3.legend is called. Each title will appear only once (even when multiple items define the same data-legend) as the process uses a set based on a existing names, not an array of all items. Color By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Order The order of items in the legend will be sorted using the top of the bounding box for each included item. Padding Padding will be determined by attribute "data-style-padding" on the legend element. Size Size of the box is determined by font size, as items are placed using "em" and the frame around the items is based on the bounding box. This Example This example takes an existing Gist and adds a legend by defining data-legend for each series and calling d3.legend on a "g" element.
Parallel Sets Titanic Survivors Explanation For each dimension (Survived, Sex, Age and Class), a horizontal bar is shown for each of its possible categories. The width of the bar denotes the absolute number of matches for that category. Starting with the first dimension (Survived), each of its categories is connected to a number of categories in the next dimension, showing how that category is subdivided. This subdividing is repeated recursively, producing a tree of “ribbons”. In fact, you can imagine Parallel Sets as being an icicle plot, with icicles of the same category being “bundled” together. Drag the dimensions and categories to reorder them. Women and Children First? We can see at a glance that the relative proportion of surviving women is far greater than that of the men. As for children, it becomes clearer when we drag the Age dimension up: around half the children survived. Do It Yourself The code is available as a reusable D3.js chart: d3.parsets. Alternatives Implementation Notes Discuss on HN!
Small Multiples with Details on Demand - Jim Vallandingham Small multiples are a great way to show changes in data. By lining up multiple visualizations, they effectively allow for direct comparisons to be made with little effort. This is in contrast to potential alternatives such as video or animation, which force the observer to remember previous shots of the visualization to perform the same comparisons. But some times the small in small multiples can be limiting. It can be difficult to cram in relevant annotations, scales or other data that should be in your data visualization to help explain your point. You want to use small multiples because Tufte says they’re the best , but you also don’t want your visualization to end up on Junk Charts because you splattered clutter everywhere. A Manifest Solution Recently, Michael Porath provided an interesting graphic that I think includes an elegant solution to address the needs of the small but detailed visualization. C02 Emitted Over the Years Ready to learn how to create one on your own?