Sankey Diagram
Linter & Minifier

Inspiration

Once I learned about D3 and saw how beautiful Sankey graphs can be, I wanted to do something interesting with one. I also would like an easier way to minify and lint CSS so I decided to combine these both and put them on the web as a React web app.

What it does

It shows variable-strength 3-layer-deep relations between CSS selectors, rules, and rulesets as a Sankey graph and also minifies CSS input.

How we built it

I used React and Google Graphs and deployed with Vercel. It has a bit of HTML and CSS but one of the largest sections is the 2-dimensional data array that powers the chart.

Challenges we ran into

I tried to build this with vanilla JS and D3 but both of those were incredibly difficult to get running so I changed my mind and used React and Google Graphs. That stack worked out better although the forms (textareas) took longer to get running with UseState than vanilla.

Accomplishments that we're proud of

I think the graph turned out nicely and I like that is has variable-width data streams to estimate how often rules are applied to specific selectors.

What we learned

I learned a little about D3 graph inputs and structures, I learned Google Graphs exists and is good to work with, and I learned that multi layer Sankey diagram structures are created with implicit structuring from an array of data: point x => destination y.