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
schemeTableau10used 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
- MDN
FileReader.readAsText(), used by the local CSV upload control:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText - MDN SVG
linearGradient, used for split-color multi-outlier marker fills:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient - MDN SVG
path, used for custom up/down split-triangle marker shapes and curved flow links:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path - MDN SVG gradients tutorial, relevant to defining reusable
gradients inside
svg defs:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients
Similar Code And Interaction Examples
- Observable / D3 brushable scatterplot source: rectangle
brushing over points and linked selected set:
https://observablehq.com/notebook-kit/ex/d3/brushable-scatterplot
https://observablehq.com/@d3/brushable-scatterplot - Observable / D3 brushable scatterplot matrix source:
pairwise relationship inspection and brush filtering:
https://observablehq.com/notebook-kit/ex/d3/brushable-scatterplot-matrix
https://observablehq.com/@d3/brushable-scatterplot-matrix - Observable / D3 scatterplot matrix source:
SPLOM/correlation-style matrix structure:
https://observablehq.com/notebook-kit/ex/d3/scatterplot-matrix - Observable / D3 parallel coordinates source:
polyline-per-record multidimensional profile view:
https://observablehq.com/notebook-kit/ex/d3/parallel-coordinates - Observable / D3 brushable parallel coordinates source:
axis brushing and profile filtering:
https://observablehq.com/notebook-kit/ex/d3/brushable-parallel-coordinates - D3 Parallel Coordinates visual toolkit/examples:
multidimensional profiles, axis brushing, linked
filtering, CSV upload patterns:
https://syntagmatic.github.io/parallel-coordinates/ - D3 Graph Gallery brushing examples: rectangle selection
with
d3.brush().extent(...):
https://d3-graph-gallery.com/graph/interactivity_brush.html - D3 Graph Gallery heatmap examples: matrix cell layout,
color scale, tooltip pattern:
https://d3-graph-gallery.com/heatmap.html - D3 Graph Gallery correlogram examples: metric-to-metric
relationship matrix structure:
https://d3-graph-gallery.com/correlogram.html
https://d3-graph-gallery.com/graph/correlogram_basic.html - D3 Graph Gallery correlogram with scatter/histogram:
small-multiple relationship inspection:
https://d3-graph-gallery.com/graph/correlogram_histo.html - D3 Graph Gallery basic parallel coordinates
tutorial/source:
https://d3-graph-gallery.com/graph/parallel_basic.html - D3 Graph Gallery parallel coordinates section:
https://d3-graph-gallery.com/parallel.html - D3 Graph Gallery basic heatmap tutorial/source:
https://d3-graph-gallery.com/graph/heatmap_basic.html - D3 Graph Gallery Sankey tutorial/source:
https://d3-graph-gallery.com/graph/sankey_basic.html
https://d3-graph-gallery.com/sankey - D3 Graph Gallery home/index of reproducible source-code
examples:
https://d3-graph-gallery.com/index.html - Observable / D3 Sankey diagram source: flow-link visual
vocabulary and width/opacity encoding:
https://observablehq.com/notebook-kit/ex/d3/sankey
https://observablehq.com/collection/@d3/d3-sankey - Observable / D3 Parallel Sets source: categorical lanes
and curved flow-style paths:
https://observablehq.com/notebook-kit/ex/d3/parallel-sets - Observable / D3 Sankey component source: reusable flow
diagram construction:
https://observablehq.com/@d3/d3-sankey-diagram - Stack Overflow discussion of d3 v4+ parallel-coordinate
brush selection and
d3.brushSelection:
https://stackoverflow.com/questions/46591962/d3-v4-parallel-coordinate-plot-brush-selection - Stack Overflow discussion of selecting paths with d3 v4
parallel-coordinate brushes:
https://stackoverflow.com/questions/49329600/d3-v4-parallel-coordinates-selection-of-paths-with-d3-v4-brushes - Stack Overflow discussion of parallel-coordinate
axis/brush highlighting:
https://stackoverflow.com/questions/52257781/d3-js-parallel-coordinates-change-color-of-axis-on-brush - Stack Overflow discussion of scatterplot matrix brushing
behavior:
https://stackoverflow.com/questions/50048926/how-to-adjust-brushing-on-a-scatterplot-matrix-in-d3 - Stack Overflow discussion of 2-D brushing with
Crossfilter/scatterplots:
https://stackoverflow.com/questions/16877096/crossfilter-scatterplot-with-2-d-brushing - Stack Overflow discussion of basic D3 + Crossfilter linked
filtering examples:
https://stackoverflow.com/questions/12693403/d3-crossfilter-basic-example - Stack Overflow discussion of d3 symbol triangle
positioning with
transform(...):
https://stackoverflow.com/questions/57889648/d3-v4-triangle-symbol-usage - Stack Overflow discussion listing available D3 symbols:
https://stackoverflow.com/questions/24539234/list-of-d3-symbols-available-to-us - Stack Overflow discussion of d3
curveMonotoneXmigration/use:
https://stackoverflow.com/questions/38472250/d3-monotone-interpolation-smoothing-a-line - GeeksforGeeks line-segment intersection orientation
algorithm, referenced by the rectangular brushing helper
over parallel-coordinate polylines:
https://www.geeksforgeeks.org/check-if-two-given-line-segments-intersect/ - Baeldung line-segment/rectangle intersection tutorial,
referenced by the segment/brush-rectangle helper:
https://www.baeldung.com/cs/intersection-line-segment-rectangle - Stack Overflow line-segment / axis-aligned rectangle
intersection discussion:
https://stackoverflow.com/questions/99353/how-to-test-if-a-line-segment-intersects-an-axis-aligned-rectange-in-2d
Statistical And Modeling References
- Tukey-style
1.5 * IQRoutlier fence explanation:
https://www.mathwords.com/o/outlier_rule.htm
https://www.statisticshowto.com/upper-and-lower-fences/
Video And Guided Tutorial Resources
- YouTube: "D3.js in 10 Minutes or Less | ep. 005 - Sankey
Graphs":
https://www.youtube.com/watch?v=xLRN-eod3Ts - YouTube: "D3 - Parallel coordinates":
https://www.youtube.com/watch?v=C03ZB7Uv2Y4 - YouTube: "Outlier detection and removal using IQR":
https://www.youtube.com/watch?v=A3gClkblXK8
MIT Licensed