d3 - techniq/wiki GitHub Wiki
Articles
Scale
- https://github.com/d3/d3-scale
- https://github.com/d3/d3-scale-chromatic
- Introducing d3-scale
- d3: scales, and color
- Chapter 7. Scales
- https://www.pshrmn.com/tutorials/d3/scales/
- http://alignedleft.com/tutorials/d3/scales
- https://nelsonslog.wordpress.com/2011/04/11/d3-scales-and-interpolation/
- http://d3indepth.com/scales/
- http://synthesis.sbecker.net/articles/2012/07/16/learning-d3-part-6-scales-colors
- Linear & Ordinal Scales
- Types of scales and common use cases
- Working with Colour Scales for Data Visualisation in D3
Simple linear/continuous scale
function map(val, domainMin, domainMax, rangeMin, rangeMax) {
return rangeMin + ((val - domainMin) * (rangeMax - rangeMin)) / (domainMax - domainMin);
}
Scale Types
Continuous input and continuous output
- scaleLinear
- scaleTime
- scalePow
- scaleSqrt
- scaleLog
- scaleSequential
See also clamping and nice
Continuous input and discrete output
- Quantile, Quantize and Threshold scales
- scaleQuantize (domain as range, ex
.domain([0, 100]))- attempts to set equally spaced bins
- scaleQuantile (domain as discreate values, ex.
.domain(myData)or.domain([0, 5, 7, 10, 20, 30, 35]))- attempts to have the same number of data points in each bin
- scaleThreshold
- arbitrarily setting the values used to separate bins that group quantitative values
- https://observablehq.com/@clhenrick/threshold-color-scale?collection=@clhenrick/explainers
Examples
Discrete input and discrete output
- scaleOrdinal
- scaleBand
- scalePoint
Axis
Color
format
Geo
- http://d3indepth.com/geographic/
- http://duspviz.mit.edu/d3-workshop/mapping-data-with-d3/
- http://www.d3noob.org/2013/03/a-simple-d3js-map-explained.html
- http://bl.ocks.org/phil-pedruco/7745589
- Drawing maps from geodata with D3 & Observable
- Lat Lon or Lon Lat?
Easing
Shape
Curves
- https://github.com/d3/d3-shape#curves
- d3 Curve Visualizer
- Curve interpolation comparison, d3.js version 4
- d3-shape Custom Curve Implementation
Collections
Nest
Trees / DAGs
- https://github.com/Klortho/d3-flextree - Flexible tree layout algorithm that allows for variable node sizes
- https://github.com/d3/d3-hierarchy#tree - The tree layout produces tidy node-link diagrams of trees using the Reingold–Tilford “tidy” algorithm, improved to run in linear time by Buchheim et al. Tidy trees are typically more compact than dendograms.
- https://github.com/dagrejs/dagre
- https://github.com/erikbrinkman/d3-dag
Examples / extensions
Tips
- SVGs beyond mere shapes
- Using gradients for abrupt color changes in data visualizations
- Adding a subtle touch of glow to your d3.js visualizations
- Beautiful color blending effects with SVGs & d3.js
- Animating a gradient to imitate a flow using d3.js
- Creating real-life based motion effects in d3.js visuals
- Creating a smooth color legend with an SVG gradient
- Animated (dashed) lines in d3.js with Spirographs
- Placing Texts on Arcs with D3.js
- Using a D3 Voronoi grid to improve a chart's interactive experience
IE <=8
- http://stackoverflow.com/questions/16828501/making-d3-js-compatible-with-ie8-ie9
- https://github.com/shawnbot/aight
- https://github.com/mhemesath/r2d3
Render server side
Ideas
- https://github.com/domenic/svg2png - Converts SVGs to PNGs, using PhantomJS
- https://github.com/shakiba/svgexport - SVG to PNG/JPEG command-line tool and Node.js module
- https://github.com/Jam3/svg-to-image - convert SVG text to a Image that can be drawn in canvas
- https://github.com/Objectway/charts-server-renderer
- https://www.smashingmagazine.com/2014/05/love-generating-svg-javascript-move-to-server/
- http://engineering.brandwatch.com/server-side-rendering-of-visualisations-using-nodejs/
- http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html
- https://bl.ocks.org/tomgp/c99a699587b5c5465228