d3.js In Action Studygroup - chapter 1 #d3jsia

A few months ago I started the #knightD3 D3 and information visualization course through the Knight Centre of Journalism, by Alberto Cairo and Scott Murray. As we got to the end a feeling of "where to go next" was arising and @shuofeng_fs luckily had the brilliant idea of creating a Slack group for those interested from this course as well as some other folks from her network. So far there already has been some good information sharing, design and code review and just fun and interesting chatter going on. But a while ago I believe it was @M_G_Chox who suggested to all (who were interested) go through another D3 book together.

-UPDATE: @M_G_Chox noted @wai-yin (slack-name) and @shuofeng_fs were the ones who came up with the idea! -

I was considering buying @Elijah_Meeks book "d3.js IN ACTION" so when that was the book of choice for this group I was excited to say the least. We started this week on chapter one, and I intend to track my progress through blogposts as I did with my previous courses. Chapter 1 did not have an exercise but was more of an introduction with examples. I found it very intresting how things started making sense having some expreience with d3 now, but also because of the different approach of teaching.

As there is no exercise or submission to share I decided to list the items that stand out for me (aha!) for later reference. If someone finds it useful: even better! But keep in mind this is not a full summary of the whole chapter.

• Selections are a group of one or more web page elements that may be associated with a set of data (10)
• Change the appearance of elements by changing their .attr("id", "newID") (14)
• It is useful to put an SVG in a div so you can access the parent container for layout and styling (20)
• The g or group element has no graphical representation and doesn't exist as a bounded space; it's a logical grouping of elements (23)
• Moving a group around on your canvas requires you to adjust the transform attribute of the g elelment, including translate() (23)
• The child elements of a group are drawn by using the position of their parent g as their relative 0,0 position (24)
• You can set inline styles (applied to one single element) by using d3.select(#someElement").style("opacity",0.5) (26)
• Have CSS classes associated with particular stylistic changes and then change the class of an element by selecting an element and modifying the class attribute (28). Or use d3.classed() to allows you to add or remove a class from the classes in an element (29)
• When using .data() you bind each element in your selection to each item in an array. If array > selected elements you use .enter() to define what to do with each extra element. A corresponding .exit() function defines how to respond when an array has fewer values than a selection (31)
• We can adjust the element on the page and give it interactivity with the inclusion of the .on() function (41); for example d3.select("div").on("click", function() {do this});