Starting viz:
Ending viz (fork this for the exercise):
Exercise:
- Find a compelling dataset
- Explore it with this scatter plot
- Write up key insights that you discover (in README.md)
- Post your work here on this thread
Good luck!
1 Like
Here’s my attempt at the exercise: used a data set about median family income in the US taken from the TidyTuesday repo: https://github.com/rfordatascience/tidytuesday
Added some lines to the scatter plot to give it the feel of a lollipop chart:
One quirk that I observed was that if I do:
svg.call(points).call(bars)
then the bars won’t show up, but if I do:
svg.call(bars).call(points)
then both the bars as well as the points show up as expected. @curran any thoughts on why the first approach leads to the bars not showing up?
The above comes from line 92 of the index.js file:
P.S Another handy feature that I discovered in VizHub (by accident actually) are the auto-complete options which can be triggered by Ctrl + Space which tying. This is definitely going to be a time-saver 
Great work!
The buggy behavior might be because you are using the same container for both components.
Typically, with the reusable chart pattern, the internals expect that the selection passed in is not going to be controlled by any other component. So when you use svg for both, it’s a source of confusion.
Instead of
svg.call(bars).call(points);
you could do something like
const barsContainer = svg.selectAll('.bars-container').data([null]).join('g').attr('class', 'bars-container');
const pointsContainer = svg.selectAll('.points-container').data([null]).join('g').attr('class', 'points-container');
barsContainer.call(bars);
pointsContainer.call(points);
This way each component is given their own dedicated <g> element to work inside, and there is no possibility of collision with the selectors.
Below is my exercise assignment using two date sources.
Here is my exercise for the week:
1 Like
Hi folks! I think this next session will be the last of the series. We’ll review submissions and have an “ask me anything” style discussion. I’m happy with the arc of the content to date and it feels complete as a standalone course. Looking forward to editing it all down into a proper course. Thrilled that you all could join me on this journey!
2 Likes
Many thanks for the opportunity to join you on this journey! I have learned a lot from your series and the community. Thank you!
Hi Curran,
I just wanted to check my understanding is correct of the General Update Pattern and the use of .join() in reusable charts. Is the use of the update pattern described by Rob Moore here https://www.toptal.com/d3-js/towards-reusable-d3-js-charts redundant with .join() and the ability to .call functions?
Hopefully that makes sense.
Jim
Hi Jim,
The pattern described by Rob Moore is the same pattern, but that’s what the API looked like 6 years ago. Check the version of D3 that’s in use. The .join() API was introduced fairly recently, and it replaces the old patterns. The concepts, however, are the same between the old and new patterns - it’s a way to update the DOM to match the data.
Also, selection.call(function, arg1, arg1=2) is just a shorthand for function(selection, arg1, arg2) that makes it easier sometimes to work with the method chaining. It’s not critical to the patterns.
1 Like
Used data from CBS (Central Bureau Statistics - the Netherlands) https://opendata.cbs.nl/statline/#/CBS/nl/dataset/84064NED/table?ts=1674488024121