Top all-time · #1732
Amelia Wattenberger
Personal blog · wattenberger.comwebdesignprogramming
Amelia Wattenberger's personal blog at wattenberger.com covers web, design and programming. Since 2019, 44 different Hacker News readers have linked it 65 times, most often “Thinking in React Hooks”. It is still writing: the last post was on 2026-09-27, and you can follow it by feed.
Most-linked posts?
- Thinking in React Hooks5 people · 7 mentions · first linked 2019-09-22
- React and D3.js5 people · 6 mentions · first linked 2020-03-25
- Creating a Gauge in React4 people · 4 mentions · first linked 2020-04-09
- /4 people · 4 mentions · first linked 2019-06-13
- How to learn D3.js3 people · 5 mentions · first linked 2019-09-05
- Bridging the Hard and the Soft3 people · 3 mentions · first linked 2024-10-01
- What does 100% mean in CSS? (2020)2 people · 3 mentions · first linked 2020-07-29
- What makes a good country?2 people · 2 mentions · first linked 2019-01-28
- The CSS Cascade (2020)2 people · 2 mentions · first linked 2020-01-21
- LLM abstraction levels inspired by fish eye lens2 people · 2 mentions · first linked 2024-12-03
What Hacker News says?
status_quo69's answer is great, just here to add a few thoughts. This is largely why I wanted to write a post like this - often "using d3.js" is what we think we need to do, but I wanted to show that most of the API is just utility functions. Here are the two modules devoted to manipulating the DOM: https://wattenberger.com/blog/d3#manipulating-the-dom I recommend (and follow) that you render elements like you norma…
Comment linking /blog/d3
on “How to learn D3.js”Submitted How to learn D3.js as a story · 895 points
HN discussionk is right that d3 has some helper functions for drawing on canvas, so most of the methods here will work: https://wattenberger.com/blog/d3#drawing-svg-shapes Canvas is way more performant than SVG for a lot of shapes, since they don't have the overhead of a DOM node. But in general, you want to work outside of the browser if you have that much data. What I'll usually do is either: - write a python script to process…
Comment linking /blog/d3
on “How to learn D3.js”Submitted Our interfaces have lost their senses as a story · 370 points
HN discussionRepeating a comment I made above, this semi-finished blog post I'm working on might be helpful: https://wattenberger.com/blog/react-and-d3 I generally like to stick with React for DOM manipulation, and use D3 like a utility library.
Comment linking /blog/react-and-d3
on “Learn D3”Submitted Thinking in React Hooks as a story · 351 points
HN discussionone thing that might help is this blog post I'm (slowly) putting together: https://wattenberger.com/blog/react-and-d3 I've done a lot of work that uses d3 within a JS framework (React, Vue, Svelte, & Angular), and the key is to understand 1. how to create shapes in plain SVG, and 2. how to use the parts of d3 that don't do DOM manipulation. I've found the least-hacky way is to handle DOM manipulation with the framew…
Comment linking /blog/react-and-d3
on “Learn D3”Submitted React and D3.js as a story · 335 points
HN discussionI've always enjoyed Amelia Wattenberger's approach to teaching D3. Her intro blog post ( https://wattenberger.com/blog/d3 ) actually pushed me to purchase her book ( https://www.newline.co/fullstack-d3 ). I found her on the last D3 post on HN ( https://news.ycombinator.com/item?id=22480270 ).
Comment linking /blog/d3
on “Learn D3”Submitted What does 100% mean in CSS? (2020) as a story · 325 points
HN discussionThere are tons of different d3 modules (40+). As someone who uses d3 extensively, but rarely uses its selection and data binding functionality, I put together a birds-eye view of the different modules. There is tons of great functionality that is usually skipped over in favor of the DOM-manipulation methods, like managing colors, dates, data munging, etc. https://wattenberger.com/blog/d3
Comment linking /blog/d3
on “Introduction to D3”Submitted LLM abstraction levels inspired by fish eye lens as a story · 261 points
HN discussionCheck out Amelia Wattenberger’s work. She’s done a lot of writing and has created a course and written a book. I can’t speak directly to the book but I think her work in general is a good representation of the modern way that D3 is used in conjunction with other front-end frameworks. https://wattenberger.com/
Comment linking /
on “10 Years of Open-Source Visualization: Did I learn anything from D3.js?”Submitted Scaling SVG Elements as a story · 120 points
HN discussionYeah, I immediately noticed the extra arm in this one: https://wattenberger.com/thoughts/our-interfaces-have-lost-t...
Comment linking /thoughts/our-interfaces-have-lost-their-senses/tech3.png
on “Our interfaces have lost their senses”Submitted Evolving the Infinite Canvas as a story · 94 points
HN discussionDefinitely AI generated. https://wattenberger.com/thoughts/our-interfaces-have-lost-t... What are those floating letters? Does the keyboard have 3 rows of keys, or 4? What's going on near where the esc key should be? Why does the screen look like the back of a park bench?
Comment linking /thoughts/our-interfaces-have-lost-their-senses/typing2.png
on “Our interfaces have lost their senses”Submitted The CSS Cascade (2020) as a story · 79 points
HN discussionYeah I'm having a hard time telling as well, but I think it is AI. Following threads has a surprising amount of consistency and coherency that we don't commonly see in AI art. I would expect AI art to be VERY bad at felt imagery. The image here[0] looks too consistent though there are definitely parts that are edited. And here[1] the blurring is very consistent (other than the stitching you cans see when scrolling).…
Comment linking /thoughts/our-interfaces-have-lost-their-senses/hearing.png
on “Our interfaces have lost their senses”Submitted A Guide to the CSS Cascade as a story · 34 points
HN discussionSounds similar to this guide I put together - understanding how the different modules work together and who is responsible for what is really helpful. https://wattenberger.com/blog/d3
Comment linking /blog/d3
on “D3 6.0”Submitted Interactive Charts with D3.js as a story · 10 points
HN discussionIndeed. When you Google for "React/Vue/Ember D3", the tutorials always use the DOM manipulation layer of D3. But every front-end framework already comes with a great reactive system to ensure the DOM is in sync with the data. And those are a lot easier to use than D3's in my opinion. The only tutorial that doesn't do this and that "gets" it is one by Amelia Wattenberger: https://wattenberger.com/blog/react-and-d3 .…
Comment linking /blog/react-and-d3
on “D3 6.0”Submitted Creating a Gauge in React as a story · 9 points
HN discussionThis is specifically designed for React and uses the native APIs for best performance and usability. Being framework-agnostic isn't a goal and there are other components like AG-Grid you can look at if you need that. Hooks is basically a declarative way to keep things in sync instead of writing a bunch of imperative code yourself. You describe the functionality that should run when some data changes (or all the time…
Comment linking /blog/react-hooks
on “React Table is a “headless” UI library”Submitted Show HN: How to learn D3.js, an in-depth guide and birds-eye view as a story · 7 points
HN discussionExactly! I should probably have a section (or at least a link to a resource) that talks about _why_ you would want to learn this. I have an image in the book detailing the spectrum of data viz tools on the web. At one end are the quick-pickup tools that aren't customizeable, and at the other end you have.. d3. Which isn't really a framework so much as a collection of tools that can help with making web charts. What…
Comment linking /fishing
on “Interactive Charts with D3”Submitted Thinking in React Hooks – fundamental mindset change as a story · 6 points
HN discussionI've just been browsing the author's website, some really good examples of D3 usage and all the code is on Github: https://wattenberger.com/ https://github.com/Wattenberger/Wattenberger-2016/tree/maste...
Comment linking /
on “Interactive Charts with D3”Submitted Thinking in React Hooks as a story · 6 points
HN discussion
