This animation and visualization is from a new Social Safety Net project I worked on at
@codeforamerica
, “Navigating Compounded Hardships in a Pandemic”: (led by
@ericgiannella
) 🧵 1/10
New
@observablehq
notebook: why you might (or might not) want to use a radial visualization for hierarchical, time series, or categorical data.
With some animations between radial and non-radial versions of the same chart, like a sunburst to an icicle:
Working on a visualization of how ranked-choice voting has affected the election for mayor of SF. Currently,
@LondonBreed
has a narrow lead over
@MarkLeno
, with thousands of votes still to be counted! 🍿
#SFMayor
#RCV
Now that New Hampshire has been called for Biden, I've updated the default settings of the visualization to reflect that (deactivating the paths that are no longer possible).
Honorable mention to
@kerryrodden
's amazing radial decision tree.
Con: On first look I thought "uh-oh, pointless radial chart"
Pro: Post-interaction I thought: "Wow - this is so, so, good."
(10/11)
One of my favourite freelance projects so far: helping
@dustinbpalmer
and the team at
@codeforamerica
to figure out how to visualize online availability (and integration) of benefits in each state.
My first time making a map in
@observablehq
, visualizing addition and removal of USPS collection boxes (dataset by
@iandees
):
Unexpected finding: many of the removed boxes are from communities that have been evacuated due to fires 😞
New radial visualization example, this time for matrix data, using D3's scaleRadial to create segments of equal area:
The original visualization (by
@fcage
) is a beloved piece of data journalism for me; I hope I did it justice here!
I've been playing with using Perlin noise to distort the pixels in an image, and the results turned out to be much more interesting than I expected. I made a notebook with
@observablehq
so you can play with it too.
Here's a new rewrite of my
#d3js
sequences sunburst visualization, using
@observablehq
. With Observable's file attachments feature, hopefully it should be even easier to reuse the visualization with your own data!
UX researchers! If you're interested in data visualization or developer tools, take a look at
@observablehq
. We're a small company, hiring our first UXR (based in SF). I'm a developer there, but a former UXR - so I know it's an especially good opportunity.
With the margin in Georgia now at about 4,000 votes, I'm thinking about the ~60,000 people represented in this analysis I did, of early voting wait times in Gwinnett County, and about the poll workers who counted (and will now recount) all of their votes 🙏
I just published this new election visualization at
@observablehq
– continuing my penchant for using a radial layout to fit as much data on the screen as possible 🤯
🗳 Nobody knows what the outcome of the presidential election will be — but with a radial dendrogram you can try to visualize all the possibilities at once:
👀
#dataviz
#Election2020
#DataVisualization
I wrote a short introduction to text analysis using TF-IDF. It's a relatively simple but effective technique, and I don't think it is taught very widely. I'd love feedback, especially if you're unfamiliar with the topic:
Some really exciting opportunities (including a UX researcher position) at Observable in San Francisco! Bodes well when a company this small wants to hire a UX researcher 👏
We're Hiring!
We are looking for people who are compassionate advocates for developers and have the audacity to tackle some of development’s greatest challenges. Looking for developer advocates, designers, researchers, and developers in our SF office.
New
#d3js
block: dynamic labeling / annotation of the circles in a motion chart. The labeled items are selected based on their amount of movement in a time window.
I wrote the first job ad for a Quantitative UX Researcher, in 2006. I'll be talking about that, and the origins of the role, in the opening keynote at the first-ever (and virtual) Quant UX Con on Wednesday June 8.
Registration is free, but closes today:
Results of the June 5 election for
#SFMayor
are now final, so I've updated this visualization. It emphasizes the transfers that happen using ranked-choice voting. Made with
#d3js
. Online at
@elizlaraki
Thank you for the generous and thoughtful write-up,
@elizlaraki
! That project changed the course of my career, and I really enjoyed revisiting the creative and organizational challenges with you.
I don’t know if the design choices we made were the right ones, but I’m documenting them here because I hope it’ll be useful to others facing similar design challenges. I’m curious to hear what you think, and I also hope you’ll read some of the stories ❤️ 10/10
I've now updated the underlying data for the visualization to reflect all of the states called so far tonight — and I've added Michigan as one of the states whose outcome you can choose (it was originally assumed Biden from pre-election forecasts)
The post itself is a follow-up to my Electoral College decision tree notebook (), and was inspired by some thoughtful feedback on that visualization from
@acotgreave
🙏
Job post: we are looking for a postdoctoral associate to join our lab at
@nyutandon
to do research in *visualization for machine learning*. You can find details here: | Feel free to DM me for more info and apply!
Published a little tool on
@observablehq
, making it easier to use your own data in a bar chart that animates between stacked and grouped forms. This is especially useful when presenting, to explain different aspects of the data.
It contains this 3D line chart 😱, which I had totally forgotten, and which I guess made it through the peer review process without any objections. Proof that the field has made some advances in 20 years 😎
The dataset consists of real stories of people applying for SNAP (food stamps) in California. Reading them is humbling, inspiring, and often heartbreaking. The site uses the stories to try to deepen our understanding of what it’s like to experience severe hardship. 2/10
The dataset had been carefully collected by the team over time, and it was clearly a labour of love for them. It was an honour to have the opportunity to help visualize the results.
A key thing I learned after joining
@codeforamerica
: many people feel ashamed for needing a safety net, even though its whole purpose is to help them through these hardships. Reading stories like this, it’s clear: applying for benefits is exactly what they should be doing. 3/10
The glyphs represent, for each state, the availability of an online application for each of the 5 benefits (SNAP, Medicaid, TANF, WIC, LIHEAP) *and* which of them have been integrated, enabling people to apply for more than one at a time.
There were a lot of difficult design challenges in creating the visualization, and a highlight of the project for me was collaborating with
@JulieSeaSuth
and
@fritzjooste
on these. I’ll summarize a few here. 5/10
“It brings teams of all sizes and types together: visioning gives everyone from engineers, marketers, analysts, researchers and content strategists a way to participate in the design process.” —
@joshsassoon
The other day I came across the PDF of a conference paper I wrote almost exactly 20 years ago, "Evaluating a Visualisation of Image Similarity as a Tool for Image Browsing", from InfoVis'99:
@moritz_stefaner
It was great to meet you too! I really appreciated hearing what you've learned from freelancing. If I can help with UX metrics, or anything else, I'd be glad to.
As represented in the story above, it’s particularly tough when people experience multiple hardships, like having health problems that mean they can’t look for work. To represent this visually, we used a Venn diagram to organize the stories into categories that overlap. 4/10
Thread: real screenshots showing how difficult it can be to apply for benefits online. Some of these would make great "how not to do it" examples for any introductory UX class.
Last year, we at
@CodeforAmerica
launched a neat project to document and compare online benefits applications (like Medicaid and food assistance) across all 50 states. 1/x
@jhebert
@observablehq
Thanks! And yes, I looked at a few different sources to try to figure out which states were considered to be least certain. I included as many states as I could without all the branches overlapping too much, but I definitely worry that 90% chance still isn't really "safe" 😓
Challenge 1: Choosing colors for the base and hover states that are distinct but not garish. This
@observablehq
notebook on color blending in Venn diagrams was a wonderful resource: 6/10
@willbedesigned
Aw, thank you, Will! And in case you were wondering, those circles are sized with a radius proportional to the square root of the number of electoral college votes 😇
@thatadamguy
Yeah, I'd love to see a proper write-up of the method, and am giving them the benefit of the doubt a little because I'm glad they're trying.
Challenge 2: Conveying that these data points represent individual people. We’re trying an introductory animation that morphs illustrations of people into dots in the visualization (using D3.js and Flubber: ) 7/10