Bellingcat gets a tech upgrade
Logan Williams on his journey from MIT physicist to Silicon Valley engineer to data journalist in Amsterdam
In fall 2020, Bellingcat hired its first data visualization expert after launching its technology team!
This episode of Brackets features Bellingcat's newest data wiz, Logan Williams, his move from Silicon Valley to Bellingcat headquarters in Amsterdam, and insights from his year of building data visualizations for investigative journalism.
Graph Theory?
Logan Williams graduated from the Massachusetts Institute of Technology with a bachelor’s degree in electrical engineering and physics, followed by a master’s degree also from MIT. His first data visualizations, he recalls, were for “biomedical microscopy” at his lab, where he generated “raster images from data collected by physically moving a fiber optic lens across a sample object.”
All that sciency stuff read as jargon to me! The one thing I did understand, however, was that Williams is brilliant; in 2014 he left academia to start his career as a hardware engineer at Apple’s Cupertino headquarters. Then, like many in the Valley, he made the transition from hardware to web design. In 2017, he started building data visualizations for Stamen Design.
Nitty Gritty D3
Since the advent of the internet, Stamen has been one of the most reputable visualization firms in Silicon Valley. There, Williams found a home to tackle ambitious design projects, like coding a virtual queue for the museum of Tasmania, and honed his data visualization toolkit, which consists of D3 JavaScript, the “bread and butter” of the game, along with more recent tech stacks such as React and Vue.
If you want to learn more about the tools behind data visualizations, check out an earlier edition of Brackets, the Architect in the Newsroom!
Williams tells me that his current work process still involves a lot of “nitty gritty D3.”
“I really enjoy that when you use D3 you need to get to know the data,” William says. “Any standard visualization tool is going to work around things like missing column entries, which is what you want 90% of the time, but sometimes triggering an error makes you go deeper into the data.”
The Big Move
Recently, Williams went through his biggest career jump yet, departing the Silicon Valley bubble to a new and unpredictable world of investigative journalism. When I interviewed him for Brackets, Williams had just moved across the Atlantic, into his new apartment in Amsterdam, where Bellingcat is headquartered.
Why the big move?
For Williams, one reason was a long held admiration for some of the Bellingcat investigators, many of whom he has been following for years on Twitter. When the technology team was being formed, he simply had to apply. “It’s been incredible working on the investigative tech team so far,” he says.
“What we’re really excited for next is finding more opportunities for technical people to work with us,” Williams tells me, “and in general to bridge the ‘language barrier’ between open source investigators and people developing data analysis and visualizations.”
Learning from Logan!
Williams not only designs great visualizations, but he’s also a great teacher! While I was writing The Qanon Timeline: Four Years, 5000 Drops, and Countless Failed Prophecies, Williams was an incredibly helpful source of data visualization advice 🙏
Recently, Williams published Geofenced Searches on Twitter: A Case Study Detailing South Asia’s Covid Crisis.
I absolutely ADORE this visualization, which effectively communicates changes in South Asia’s Covid crisis across time and space. Every detail on the graphic is intentionally placed, beautifully crafted, and custom coded — truly D3 at its best.
Williams was also kind enough to share the process behind how he built the visualization on a technical level! Here are some of his technical insights below.
Making the data make sense
The visualization itself started with the map and different ways of trying to show the intensity of, as well as deal with, variable of population. If you were just plotting the volume of twitter posts, it's not very interesting because you would see huge amounts of posts in New Delhi and Mumbai, and it would be missing the real story, and missing other factors such as language, internet access, and population.
The actual twitter data for the visualization is collected through Python and Twint, and is spatially separated into hexagonal sections of a GeoJson object. Williams has kindly shared his source code for the data collection here! https://bellingcat.github.io/twitter-geocode-searches/hexagonal-search-grid.html
Making the visualization interactive:
The visualization is built through pure D3 code (made to make interactive visuals) without any external frameworks. The playing and stopping of the frames, and movement across time, were implemented with D3 transitions. If you load the page fresh, the actually movement starts playing, which is a nice and subtle way of informing readers that a piece is interactive.
With Bellingcat’s website being built in WordPress, I was particularly interested in how Williams managed the daunting technical challenge of integrating D3 onto a WordPress page. The answer was simply through iframes, a fits all approach to display one webpage within another webpage, loved by some programmers for its simplicity, and hated by others. Williams simply hosted the D3 map on a separate web page, and embedded it as an iframe.
Thanks for reading this edition of Brackets! If you’re interested in seeing more of Logan Williams’ work you can follow him on Twitter @obtusatum or visit his personal portfolio here.