Amelia Wattenberger

https://worrydream.com https://macwright.com/ https://www.petemillspaugh.com/ https://www.geoffreylitt.com/ https://maggieappleton.com/ https://www.robinsloan.com/ https://thesephist.com/ https://wattenberger.com/ http://conal.net/ https://www.todepond.com/ https://devonzuegel.com/ https://nadia.xyz/ https://adamwiggins.com/ http://glench.com/ https://ncase.me/ Classic from my old Haskell professor: https://byorgey.wordpress.com/2009/01/12/abstraction-intuition-and-the…

Check 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/

Indeed. 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. I recommend this tutorial to understand how to use D3 in React.

There 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

This 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) and React handles the rest. The code inside hooks is just javascript, and by being functions it's much simpler than class-based structures. Vue is also working on a similar composition API. This is a good walkthrough that explains hooks: https://wattenberger.com/blog/react-hooks

I'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/master/src/comp…

Yeah 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). Although this one[2] really makes it look like the text on the computer screen is AI generated. A lot looks good but the coat on the main character flattens out. But here is a really good one where you can see the AI errors pop up if you look at the bow[3] (the blurring is also inconsistent here) There are definitely issues that pop up but I find it weird people are calling this "slop". "Slop" is that bullshit people are posting where they take the first output and don't pay attention to details. Clearly this person played around with the parameters a lot. The problem with AI Art is taking the art out of the art (and the data theft). But if you're using AI, iterating, focusing on details, then I'm not sure how it is different than any other medium where you do the same things. Art takes time and makes you feel. Considering how it added to the message here and how clear it is that this person put time into the details, I find it hard to call it "slop" just because AI was used. [0]…

Yeah, I wish this project had a React component backend. D3.js and Observable Plot don't work that well with modern reactive frontend frameworks either though. They don't diff the SVG tree. The recommended way to react to some data change is to rebuild the whole SVG in a useEffect [1], when in fact you could just have a reactive SVG tree [2]. You just have to unpack and recode what would D3 do (see the case about Axis in the last link). Using enter(), update() and exit() seems to no longer be the way to do things. Also, React components offers great composability to the programmer. I wish there was a maintained React version of Observable Plot; just like what React-Three-Fiber [3] does with Three.js. Or maybe a version of this Reanimate lib into a React component. [1] https://github.com/observablehq/plot-create-react-app-example/blob/mai… [2] https://wattenberger.com/blog/react-and-d3 [3] https://github.com/pmndrs/react-three-fiber

Here's what's really going on, and what I think the observable team should have said: d3 was born ~10 years ago, before the rise of vue and react. Today, the community is split into two groups that we shall call "data viz" and "software engineers". The crux of that whole comment thread is that large portions of the d3 API have now been superseded by React/Vue/Svelte, for the software engineering crowd. You can even see Mike Bostock and the Observable team in places recommending the book and blog post of Amelia Wattenberger. But look at her blog post on using d3 with react: https://wattenberger.com/blog/react-and-d3 If you read that you'll see that the Tl:DR is basically > Don't use d3 any longer for anything other than the axis objects: use react/vue to build and update the SVG elements. I suspect that Mike Bostock's (radical) decision to move d3 entirely into the Observable world was a completely rational decision explicitly addressing the fact that he knows that, when it comes to building and updating the DOM, d3 has now been replaced by component-based libraries with HTML-like JSX syntax, i.e. Vue/React etc. At least for software engineers; there is still a community of dataviz people with their center of gravity more in academia and data science who don't use Vue/React and for whom it makes sense to use the entire d3 API (DOM updates as well as utilities like axis functions etc) I think that it would help if the Observable team just stood up and said that…

Yeah, I immediately noticed the extra arm in this one: https://wattenberger.com/thoughts/our-interfaces-have-lost-their-sense…

Definitely AI generated. https://wattenberger.com/thoughts/our-interfaces-have-lost-their-sense… 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?

This is more easily, faster and better done as a user stylesheet: a { color: blue !important; text-decoration: underline !important; text-decoration-style: solid !important; text-decoration-color: blue !important; } (Unfortunately, extensions like Stylus <https://github.com/openstyles/stylus> don’t handle user stylesheet priorities correctly: !important in a user stylesheet should override absolutely all site stylesheets, including inline style attributes. But because of lousy technical limitations, they load stylesheets at the site priority rather than the user priority. But then, what you presented doesn’t conquer a site !important spec anyway. See https://wattenberger.com/blog/css-cascade#origin for a really good explanation of all this stuff.)

Intro: https://wattenberger.com/blog/d3 Book: https://www.newline.co/fullstack-d3

https://maggieappleton.com/ for her take on a digital garden. She also compiled more below [0] if opening your thought process to the public is your thing (adopting the concept actually got me to add more structure to my serious notes and actually post more) https://brianlovin.com/writing/how-my-website-works because of how in-depth he went with hosting his notes, bookmarks, and other projects. https://wattenberger.com/ for its reactivity/place for her d3.js experiments. and here is a general collection of dope blog additions: https://brainbaking.com/post/2022/04/cool-things-people-do-with-their-… My overall advice is unless you're a designer flexing your skills is to focus less on the design and more on the actual writing! The internet is littered with the emaciated husks of nice good looking sites hosting nary an entry beyond "How I Made My New Blog With X" [0] https://github.com/MaggieAppleton/digital-gardeners