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
- D3 syntax feels very much like jQuery, but its power comes with
.data(arrayOrFile)
, its states methods, and helper functions d3.select('.some-jquery-like-selector')
- attach data array/file:
.data(arrayOrFile)
- 3 possible states per data point:
.enter()
(when initially draw),.update()
(when data changes),.exit()
(when data is about to be removed):.enter().update().exit()
- helpers example:
.scaleBand().range().domain()
to draw x-axis and y-axis scales - helpers example:
.transition().duration(2000).attr('width', '400')
to animate each data point as data is added - you can also add interactivity that feels like jQuery
.on('mouseover', () => showToolTip())
or.on('click')
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);
}