A visual notation for React's parent and owner trees
Introducing a visual notation for showing React components as diagrams, for more structural overviews that code alone can't show.
Jules Blom
I’m Jules. I’m a software engineer with a background in .
I like thinking about reduced representations. Maps, charts, diagrams, and engineering models all leave out most of reality to get the essentials across, and that is exactly what makes them understandable and useful. I like building on the web because it's a great medium for sharing them, and for making more things interpretable for more people.
At the moment, I’m working on making geotechnical data more useful at 
Bedrock.engineer.
Latest Writing
A map minimap in SVG
· UpdatedA recipe for a map with a minimap, using d3-geo, nested SVGs,
viewBox, and<use>NS Line Diagrams, Recreated and Redesigned
A dive down a rabbit hole recreating and redesigning the line diagrams I saw on Dutch railway platforms, in code.
Things I’ve Built
React Trees Playground
Paste React code and read it as parent and owner trees in the visual notation.
julesblom.com/react-treesTypeScript Syntax Search
Look up TypeScript syntax by symbol. The same symbols do different things depending on context and are hard to find using search engines.
julesblom.com/ts-syntaxTernaryPlot.com
Create ternary plots in the browser, built on d3-ternary.
ternaryplot.com ↗d3-ternary
A D3.js module for ternary plots, triangular diagrams that show the proportions of three-component systems.
github.com/davenquinn/d3-ternary ↗