jtr13 / d3book Goto Github PK

Finding overrides: https://developers.google.com/web/tools/chrome-devtools/css/overrides
Specificity: https://stackoverflow.com/questions/41778542/bootstrap-button-css-changes-not-working-for-active-selector, https://csswizardry.com/2011/09/writing-efficient-css-selectors/
Styling buttons: https://zellwk.com/blog/style-hover-focus-active-states/, https://www.w3schools.com/howto/howto_js_active_element.asp

https://medium.datadriveninvestor.com/getting-started-with-d3-js-maps-e721ba6d8560

https://lookout.dev/rules/d3-prefer-join-over-enter-exit-or-merge
https://observablehq.com/@philippkoytek/d3-part-3-selection-join-explained
https://www.codementor.io/@milesbryony/d3-js-join-14gqdz3hfj

@jtr13

Chapter 5.4 Sorting: shallow copy of array in var y = x;
The sort will mutate both the array x & y
var y = x.slice(); will do deep copy and protect to mutate the original array.

Here's the code:
var x = [12, 34, 1, 43, 90, 72]; // try me
var y = x;
d3.quantile(y.sort(d3.ascending), .25);

I think line 2 should be var y=x.slice(); as is in 5.4.

7.2 change graphic to a bunch of circles on the svg

7.2.1 d3.select("svg").selectAll("circle").on("click")
(explain: message is added if someone clicks on any circle point: we don't need any information about which circle or its attributes, data, etc.)

7.2.2 change an attribute
d3.select("svg").selectAll("circle").on("click") ...
.attr("fill", "blue");
clicking on a circle changes its attribute (you need to know which circle)

7.2.3 get information about the element that received an event
d3.select("svg").selectAll("circle")
use either cx or r -- should be something that is different for the different circles

7.2.4.
d3.select("svg").selectAll("circle").data([ single array of different values than current ones for radii]).on("click", function(event, d) {
d3.select(event.currentTarget).attr("r", d); ...

It would be helpful if examples (object_constancy.html and keys.html) )can be independent html files, users can download and practice based on their local environment. Same as other chapters.

Thanks!

remove <svg></svg> and change d3.select("svg")... to d3.select("body").append("svg")...

Starting in chapter 6

• change var to const or let as appropriate
• make all yScale domains fixed and remove code to update them
• improve consistency between lecture slides and text
• do not include data bind when defining inner plot group
• reduce dependencies between chunks run in the console, or add code as needed such as redefining svg
• clarify which code chunks should be run in the console

This chapter https://jtr13.github.io/d3book/solutions.html#update-enter-and-exit-horizontal-bar-chart has two versions for many of the solutions: in the chapter and standalone files for which links are provided, such as: https://jtr13.github.io/d3book/solutions/general_update_pattern_vertical.html There are discrepancies that need to be fixed. One is that some files have:
.attr("y", (d, i) => 50 * i)
and others have:
.attr("y", (d, i) => 50 * i + 50)
(And the same for x for vertical bar charts.)
All should be 50 * i.

Hey Team, when clicking the pdf icon a 404 file not found error is thrown.

Also, it would be really cool if this could be downloaded as ePub so it can be read on eReaders.

Thanks,
Oli

"We’ll bind a new set of data to the circles, this time storying the dataset in a variable:"

just a typo
-Zhi Qi
zq2175

• section 0.1.2 a bit unclear how to hide the sidebar, maybe say it's on the top bar of the page.

• section 1.1 downloading the repo is a bit overkill. I think we can just open the page -> right click -> save as -> add .html

• section 2.3 extra `

• section 3.2.3 maybe could explain a bit why the graphs can be interactive.

• section 3.3.1 maybe add a link to download five_green_circles.html again.

• section 3.5 I did not realize stroke is an attr and used append() first.

• section 3.5 Upon looking at the solution, I think both .attr("stroke-width", "5") and .attr("stroke-width", 5) works.

• section 3.7 I think it's more coherent to move that to section 4

• section 4.3 I refreshed the page for the next section and svg is no longer defined.

• section 4.8 Maybe add a little bit more explanation.

• section 5.3.1 inconsistency in var and let

Went through all sections until section 6.

@JasonSqz

Chapter: 2 Web tech

Section: 2.4 JavaScript

javascript.info is an excellent resource for expanding your knowledge beyond the basics.

'javascript.info' link doesn't work