d3js

17 posts
[For Members] How I Made That: Animated Square Pie Chart

Also known as waffle charts. Using animated transitions between values, you can allow for comparisons between categories. Read More

0 0
[For Members] How I Made That: Interactive Heatmap

Add interaction so that you can show different segments of the data and allow comparisons. Read More

0 0
Visualization song release

Ukranian band Obiymy Doschu released a new song Razom. “It’s a uplifting and tender song about being afraid of your own hapiness and holding your feelings inside, and that sometimes just a little step in the direction of a loved one will help you find yourself again.” Sounds good to me. The lead singer is also an engineer at Mapbox, and he made a visualization to accompany a song. Each...

0 0
[For Members] How I Made That: Interactive Beeswarm Chart to Compare Distributions

The histogram is my favorite chart type, but it's unintuitive for many. So I've been using the less accurate but less abstract beeswarm. Read More

0 0
The Hitchhiker’s Guide to d3.js

Ian Johnson provides some good direction for those looking to get their feet wet with d3.js. This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something...

0 0
Making annotation easier with d3.js

There are two main reasons annotation is often a challenge. The first is that writing copy that is succinct with the right amount of detail is tricky. The second is that implementation can be a pain, because you always have to muck around with placement in an ad hoc fashion. To help out with the second reason, Susie Lu developed d3-annotation. It takes away much of the main of adding...

0 0
Floaty bubble charts with d3.js

D3.js, or Data-Driven Documents, version 4.0 was released a few months ago, so Jim Vallandingham updated his tutorial for categorized bubble charts to use the new version of the library. I’ve been slow getting to the new d3.js, but maybe this’ll move things along. Tags: bubbles, d3js

0 0
Using clustering to make a color scale

Choice of color scale can make a big difference in how the data reads. A careless choice might make the data appear skewed too far low or too far high, so you need to look at the data and decide what’s right for the context. But, sometimes you just gotta make a lot of charts or maps. Or, you just don’t feel like manually picking the colors. David Schnurr describes...

0 0
Learning R Versus d3.js for Visualization

For those who work with R and d3.js, the differences between the two are obvious. But for those who are brand new to this world, the names might as well be gibberish. This quick primer is for the latter group. So R or d3.js for visualization? People ask me this fairly often, because I usually mention the two at the end of of my interactives. Here’s the quick answer: If...

0 0
Showing missing data in line charts

Missing data is everywhere. Or, I guess technically it’s nowhere. You know what I mean. Missing data is common, especially with temporal data over long periods of time. Just look at country-level estimates for anything over ten years, and you’ll understand. Peter Beshai for Bocoup provides five solutions for line charts with missing data, using d3.js. Tags: d3js, missing data

0 0