Ask the Question, Visualize the Answer While working through the recent animated pyramid chart tutorial, I came across a chart showing the shrinking surplus of women in Germany by Lisa Charlotte Rost. Taking the difference between men and women populations by age, she highlighted whether there were more men or more women for various age groups over time. It’s the same dataset but focus shifted. I of course had to see it for United States populations. Then I grew curious about other views for the same dataset. Here’s the same data but shown with a difference chart: Textures.js Textures are useful for theselective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .style("fill", t.url()); Lines
Visualizing Outliers Visualizing data that looks like it came straight out of Statistics 101 text book is nice and all — for teaching and learning purposes. You gotta learn to stand before you can run a marathon. Once you’re ready for the real data though, which is fuzzier and more irregular, you run into data points that don’t quite fit in with the rest. The outliers. There are various ways to incorporate outliers into your visualization, but you have to understand them first. Why is the outlier there in the first place?
Visualizing Incomplete and Missing Data We love complete and nicely formatted data. It means we spend less time restructuring and poking at a sparse dataset and more quickly get to the visualization, analysis, and insights. It’s why I like to work with Census data so much. 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. Intro to Scrollama.js What Scrollama is a modern and lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events. Using IntersectionObserver abstracts element-in-view detection and removes the need to monitor scroll events, which contribute towards a sluggish experience. It offers three main features: Step triggers: Fires an event when an element crosses a visible threshold.
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.
4 Tools to Pick Your Chart Colors I used to manually select my color schemes with trial and error, but these days, there are a lot of tools to help you pick colors for your charts. The motivation for most of them is to help you visualize your data in a way that is perceptually correct. That is, perceived differences translated between your eyeballs and your brain match the actual quantitative differences. 12 Visualizations to Show a Single Number Infographics, dashboards, and reports often need to highlight or visualize a single number. But how do you highlight a single number so that it has an impact and looks good? It can be a big challenge to make a lonely, single number look great. In this post, I show 12 different ways of representing a single number. Most of these visualizations have been created automatically using R.