Home

Awesome

Learning D3

Just one of the things I'm learning. https://github.com/hchiam/learning

Data-Driven Documents. https://www.youtube.com/watch?v=bp2GF8XcJdY D3 syntax feels very much like jQuery, but its power comes with .data(arrayOrFile), its states methods, and helper functions.

You can generate a dependency graph with bash show_dep_graph.sh.

This file was first created using the Yeoman generator generator-hchiam-learning.

Live demo: https://codepen.io/hchiam/pen/LYVPQgq?editors=1010

Reference: https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3

Notes

Demo

Then to quickly serve the example, install parcel globally (so not specifically for this project):

npm install -g parcel-bundler
# or:
yarn global add parcel

Aside: D3 <path>/svg .click() note

/** Because simply using d3Element.click() or jQuery $(d3Element).click() doesn't work:
https://stackoverflow.com/questions/9063383/how-to-invoke-click-event-programmatically-in-d3 */
function triggerD3PathClick(d3Element) {
  const event = new MouseEvent("click");
  d3Element.dispatchEvent(event);
}