wattenberger

5 ms·

1.
by wattenberger 5y ago
I hadn't seen it until today - looks like a useful product!
2.
by wattenberger 5y ago
Spot on! It's a space I've been wanting to explore, and so have been tinkering with it this last week while we're in between larger projects. I definitely don't see it being a product in it's current gotten, but wan
3.
by wattenberger 5y ago
oh no! My best guess would be that there are many element-heavy SVGs on the page. I was hoping for better performance, since the files will almost definitely be smaller than large raster images, but there are likely older browsers that have
4.
by wattenberger 5y ago
There are definitely many trade-offs with using a circle pack layout - I snuck a bit of the reasoning into the collapsed section halfway through the write-up! Overall, this layout worked best for me, with the nesting feeling very natural an
5.
by wattenberger 5y ago
Hmm, it should be loading! What OS/browser are you on?
6.
by wattenberger 5y ago
We always look at our code in a file/folder list - I explored an alternative way to view codebases, showing a bird's-eye-view of its structure. This write-up walks through the motivations, ways to use the visualization, and potent
7.
by wattenberger 5y ago
I also added it after your first comment so might have snuck it by you ;) I'm curious what it is that you're seeing, if you have the chance to leave an image!
8.
by wattenberger 5y ago
interesting! I'm seeing them grouped in the middle. It's a tricky layout, using d3.js's circle packing algorithm, then recursively using a force layout to relax each folder's contents.
9.
Show HN: Visualizing a Codebase(octo.github.com)
283 points by wattenberger 5y ago|96 comments
10.
by wattenberger 5y ago
ah shoot, thanks for the updated link!
11.
A vscode extension that highlights your last edits(twitter.com)
8 points by wattenberger 6y ago|0 comments
12.
by wattenberger 6y ago
I probably need to add more context to the page, but I want to specify that my intention with this tool wasn't that long sentence == bad. I was inspired by this image: https://twitter.com/misscrisp/status/1202
13.
by wattenberger 6y ago
Sounds 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
14.
Show HN: What does 100% mean in CSS?(wattenberger.com)
3 points by wattenberger 6y ago|1 comments
15.
Create a Gauge with React.js(wattenberger.com)
3 points by wattenberger 6y ago|0 comments
16.
by wattenberger 7y ago
Repeating 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
17.
by wattenberger 7y ago
one 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, & Angu
18.
by wattenberger 7y ago
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 t
19.
A Guide to the CSS Cascade(wattenberger.com)
34 points by wattenberger 7y ago|6 comments
20.
by wattenberger 7y ago
I really love creating things with SVG + React! I usually will use that until things start to jank up, and then switch to Canvas, which is more annoying for interactions and debugging. You can get pretty far before that happens - for exampl
21.
by wattenberger 7y ago
ah, the joys of frontend web development! I added a 30ms debounce, just to help out a bit. I'm seeing some serious jank in Firefox, which smells like the beginning of a rabbit hole. Hopefully I'll find some time to dig in there.
22.
by wattenberger 7y ago
I totally agree! I'm planning a video course on SVG, since there really aren't many good resources on it and I find it really powerful, and also fun!
23.
by wattenberger 7y ago
Good question! I'm trying to find a good way to explain this bit in the guide. This is due to the preserveAspectRatio property on the svg element. Its default value is `meet`, which scales the svg with three rules: - aspect ratio is pr
24.
Scaling SVG Elements(wattenberger.com)
120 points by wattenberger 7y ago|36 comments
25.
by wattenberger 7y ago
I share your opinion! And that's actually partially why I wrote this post - it's really great to know the different utility methods of d3.js to help render a data viz (using React, etc).
26.
by wattenberger 7y ago
it really depends on your use case! d3 is basically as close to the metal as you're going to get with visualizing data in a browser. It lets you build custom, interactive visualizations, and really is just a rocket booster. If you just
27.
by wattenberger 7y ago
previous experience with javascript is helpful, but not at all required. I spent a lot of time working in resources for people new to web development so that everything would be accessible and to keep readers on track.
28.
by wattenberger 7y ago
Thanks for the feedback! There were so many rabbit holes that I had to prevent myself going down - I scope creeped this article enough as it is! I also specifically didn't want to go into the data join patterns for two main reasons: 1.
29.
by wattenberger 7y ago
Good question! This is meant more as an overview, whereas the book dives right into practical examples, while gradually weaving the basic concepts in. The book is a lot more extensive and detailed, and gets into data visualization fundament
30.
by wattenberger 7y ago
so true. I think this is one of the downsides of d3 being so prolific in the past. all examples on Observable are up-to-date, so searching on here could be useful: https://observablehq.com and if you find a bl.ock that you reall

More ›