Visualizing the Structure of Amorphous Carbon

I made this dashboard in collaboration with Kamil Iwanowski, a researcher and PhD candidate in the Applied Physics and Applied Mathematics department at Columbia University whose work is on the design of materials.

I met Kamil at an event in Brooklyn, where we connected over our shared interest in data visualizations. When he showed me some of the visualizations he had made for his research, I asked if he had considered using D3.js, a JavaScript library for making bespoke data visualizations. I shared some of the other visualizations I've made to show what sets D3 apart from other tools, and Kamil liked what he saw. We met up again on a Sunday afternoon and built this dashboard using Claude Code.

The dashboard shows computer models of disordered carbon, such as amorphous carbon and graphite damaged by radiation, as a 3D point cloud. Each dot in the cloud depicts a single atom, and the lines between the dots are the chemical bonds linking neighboring atoms. The panels around the 3D cloud are interactive charts that summarize how the atoms are connected, and clicking on them filters what the point cloud displays, such as lighting up the rings (closed loops of bonded atoms) in the structure or isolating atoms by how many neighbors they have. You can also switch on Fly mode and use the WASD keys to navigate through the cloud of atoms yourself (like something out of The Magic School Bus!)

To be honest, I don't fully understand the science behind these data. My interest in making it was primarily as an exercise in data storytelling, in addition to exploring how well Claude could handle processing and visualizing data used in actual frontier research. In other words, I wanted to make something that looks cool by giving Kamil's existing research visualizations an interactive makeover with D3.js.

However, along the way we ended up making something that adds value beyond Kamil's previous dashboards. Specifically, with this dashboard the user can filter the main visualization by selecting a ring size in the Rings by size panel on the right. Doing so highlights those rings in the 3D diagram, showing their position relative to the other rings in the structure. Although Kamil's previous dashboards depicted the counts of different types of rings, they did not allow for this kind of interactive filtering that displays the rings' positions.

You can read more about Kamil's research here, or view the source code for this dashboard on GitHub.

About the data