Great design and work @wattenburger. Top notch tutorial, and approach to make it understandable.
Interactive Charts with D3
21–30 of 33 posts
Re: Interactive Charts with D3
#22Earlier quoted context omitted.
Well - when I get the tooltip of one of the rightmost bars, I get horizontal scrollbars. That much for "done right"
If that's the worst thing you found, I'm stoked! I was hoping that only happened at few enough window sizes that not many people noticed. This is an unfortunate side-effect of using iframes to show inline examples. There are a few solutions - I'm hoping to have time to work through one of them this weekend.
I wasn't really looking for problems, it's just something I noticed very quickly. Bad luck then I guess. Upon further testing, it does only happen with certain window sizes indeed.
But it's a typical example why front end development with web technologies still isn't where it should it be.
And I'm not blaming the front end devs, the technology just isn't up to the task. The fact alone that you have to deal with problems like this is telling enough.
Re: Interactive Charts with D3
#23If building interactive charts with D3 leads to beautiful interactive blog posts like this one, combining code and visuals in a seamless way — well, then, sign me up! (This introductory post is by the author of “Fullstack D3 and Data Visualization”, a book notable for, among other things, having the coolest front cover in existence: https://www.fullstack.io/fullstack-d3 )
I bought the book the day it was released. It's an excellent resource for anyone wanting to learn D3. Of particular surprise was that I haven't found any errors/omissions that caused the code examples to not work properly so far.
Re: Interactive Charts with D3
#24Is it just me or is D3 absurdly complicated for making a simple chart? I look through that tutorial and I ask myself why I'd go to the trouble of coding a chart from scratch when I've presumably already spent time analyzing and cleaning a dataset and am looking to make it presentable to an audience.
If I had to go with a custom design, I'd use HighCharts (free for non-commercial use) or ChartsJS (free), which already have these basic functions (interactive hover tooltips with supplementary data) built in. Just declare your data variable and specify your chart type, and that's it. You can also modify the CSS to change the look and feel. Non-coders could build a dash in Google Data Studio, PowerBI or Tableau and export it for embedding on the web.
Don't get me wrong, I've seen Mike Bostock's D3 gallery and yes, it's ideal for making incredibly elaborate, artistic data visualizations. But a line chart should be simple.
Re: Interactive Charts with D3
#25Is it just me or is D3 absurdly complicated for making a simple chart? I look through that tutorial and I ask myself why I'd go to the trouble of coding a chart from scratch when I've presumably already spent time analyzing and cleaning a dataset and am looking to make it presentable to an audience. If I had to go with a custom design, I'd use HighCharts (free for non-commercial use) or ChartsJS (free), which already…
Yes, if all you wanted was a simple chart I wouldn't take the time to learn D3 unless I was motivated to learn it for other reasons. There are simpler solutions for simple charts.
I have used D3 for complicated visualizations, for example an orthographic view of stacked floor plans, you click on a floor and it slides out, zooms and re-orients itself and displays the time- and location-based data in different colored areas around the floor.
Complicated things like that is where D3 shines I think.
Re: Interactive Charts with D3
#26Great design and work @wattenburger. Top notch tutorial, and approach to make it understandable.
thanks! I really appreciate it
Re: Interactive Charts with D3
#27This website shows everything that's amazing about the internet and about web development, when done right. There are no popups, cookie warnings, ads or other cruft. It's informative, exquisitely designed, interactive in the right places, it loads fast and everything fits together perfectly. I'm in awe.
hey thanks! I really appreciate your kind words
I'm really interested in using this amazing tech most of us have at our fingertips to try new ways to learn things. There have to be so many avenues we haven't yet explored, and I find that so exciting.
Re: Interactive Charts with D3
#28Is it just me or is D3 absurdly complicated for making a simple chart? I look through that tutorial and I ask myself why I'd go to the trouble of coding a chart from scratch when I've presumably already spent time analyzing and cleaning a dataset and am looking to make it presentable to an audience. If I had to go with a custom design, I'd use HighCharts (free for non-commercial use) or ChartsJS (free), which already…
Yes, if all you wanted was a simple chart I wouldn't take the time to learn D3 unless I was motivated to learn it for other reasons. There are simpler solutions for simple charts. I have used D3 for complicated visualizations, for example an orthographic view of stacked floor plans, you click on a floor and it slides out, zooms and re-orients itself and displays the time- and location-based data in different colored…
Exactly! 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 I probably failed to communicate in this post is that there are tons of opportunities to help communicate data with the web. Tooltips are just the most common interaction, but you could easily envision using scroll as a trigger, or adding a way to "zoom in" on parts of a chart.
The learning curve is definitely steeper, but once you have the skills, the world is really your oyster for visualizing data online. The pudding (https://pudding.cool/) is a great showcase of possibilities, or even uncommon chart types like at https://wattenberger.com/fishing
Re: Interactive Charts with D3
#29I make no assertion about its ease-of-implementation, niceness, or performance, but I love love love creating charts with D3 - there's an elegance to it that just speaks to me over the alternative graphing libraries in js.
I totally agree - especially when I consider how long ago it was created (early 2011, more than 8 years ago) and how quickly most things in the Frontend web world age.
Re: Interactive Charts with D3
#30This website shows everything that's amazing about the internet and about web development, when done right. There are no popups, cookie warnings, ads or other cruft. It's informative, exquisitely designed, interactive in the right places, it loads fast and everything fits together perfectly. I'm in awe.
Agreed, except the font is subjectively unpleasant to read. Easy fix is to change to font-family: serif; on the App component
Interesting—I’m exactly the opposite and very much enjoy the font.