Fitbit Behavioural Analysis Workbench
This workspace contains a self-contained D3 dashboard in
index.html plus demo CSV files that match the Fitbit-style
daily schema.
How To Use
Open index.html in a browser. If the bundled CSV does not
load because the browser blocks local file requests, use the
Data CSV file picker and select the CSV file in this
folder.
References
These references are directly related to the code patterns,
APIs, and chart types used in index.html.
Core D3 APIs Used Directly
- D3 brush interaction API, used for scatter, flow-lane, and
parallel-profile rectangle/axis brushing:
https://d3js.org/d3-brush
- D3 fetch API, used for loading the bundled CSV with
d3.csv:
https://d3js.org/d3-fetch
- D3 DSV/CSV parsing API, relevant to the file-input CSV
parser path:
https://d3js.org/d3-dsv
- D3 linear scales, used for quantitative axes, diverging
matrix colors, and size encodings:
https://d3js.org/d3-scale/linear
- D3 axis API, used for human-readable quantitative axes:
https://d3js.org/d3-axis
- D3 shape curves, relevant to curved transition paths and
line interpolation choices:
https://d3js.org/d3-shape/curve
- D3 categorical color schemes, including
schemeTableau10
used for cluster colors:
https://d3js.org/d3-scale-chromatic/categorical
- D3 symbols /
symbolTriangle, used for circle, triangle,
and custom marker glyphs:
https://d3js.org/d3-shape/symbol
- D3 scale module overview for position, color, stroke
width, and symbol-size encodings:
https://d3js.org/d3-scale
- D3 selection/data-join API, used throughout render
functions with
selection.data(...).join(...):
https://d3js.org/d3-selection/joining
https://www.codecademy.com/resources/docs/d3/selection/join
- D3 event handling API, used for click, mousemove,
mouseleave, change, and brush events:
https://d3js.org/d3-selection/events
- D3 array utilities, used for groups, rollups, extent,
quantile, mean, deviation, sum, and pairs:
https://d3js.org/d3-array
- D3 format API, used for numeric labels and tooltip
values:
https://d3js.org/d3-format
Browser And SVG APIs
Similar Code And Interaction Examples
Statistical And Modeling References
Video And Guided Tutorial Resources