|
| 1 | +import {contourDensity, create, geoPath} from "d3"; |
| 2 | +import {identity, maybeTuple, maybeZ, valueof} from "../options.js"; |
| 3 | +import {Mark} from "../plot.js"; |
| 4 | +import {coerceNumbers} from "../scales.js"; |
| 5 | +import {applyFrameAnchor, applyDirectStyles, applyIndirectStyles, applyChannelStyles, applyTransform, distinct, groupZ} from "../style.js"; |
| 6 | +import {initializer} from "../transforms/basic.js"; |
| 7 | + |
| 8 | +const defaults = { |
| 9 | + ariaLabel: "density", |
| 10 | + fill: "none", |
| 11 | + stroke: "currentColor", |
| 12 | + strokeMiterlimit: 1 |
| 13 | +}; |
| 14 | + |
| 15 | +export class Density extends Mark { |
| 16 | + constructor(data, {x, y, z, weight, fill, stroke, ...options} = {}) { |
| 17 | + // If fill or stroke is specified as “density”, then temporarily treat these |
| 18 | + // as a literal color when computing defaults and maybeZ; below, we’ll unset |
| 19 | + // these constant colors back to undefined since they will instead be |
| 20 | + // populated by a channel generated by the initializer. |
| 21 | + const fillDensity = isDensity(fill) && (fill = "currentColor", true); |
| 22 | + const strokeDensity = isDensity(stroke) && (stroke = "currentColor", true); |
| 23 | + super( |
| 24 | + data, |
| 25 | + [ |
| 26 | + {name: "x", value: x, scale: "x", optional: true}, |
| 27 | + {name: "y", value: y, scale: "y", optional: true}, |
| 28 | + {name: "z", value: maybeZ({z, fill, stroke}), optional: true}, |
| 29 | + {name: "weight", value: weight, optional: true} |
| 30 | + ], |
| 31 | + densityInitializer({...options, fill, stroke}, fillDensity, strokeDensity), |
| 32 | + defaults |
| 33 | + ); |
| 34 | + if (fillDensity) this.fill = undefined; |
| 35 | + if (strokeDensity) this.stroke = undefined; |
| 36 | + this.z = z; |
| 37 | + } |
| 38 | + filter(index) { |
| 39 | + return index; // don’t filter contours constructed by initializer |
| 40 | + } |
| 41 | + render(index, scales, channels, dimensions) { |
| 42 | + const {contours} = channels; |
| 43 | + const path = geoPath(); |
| 44 | + return create("svg:g") |
| 45 | + .call(applyIndirectStyles, this, scales, dimensions) |
| 46 | + .call(applyTransform, this, scales) |
| 47 | + .call(g => g.selectAll() |
| 48 | + .data(index) |
| 49 | + .enter() |
| 50 | + .append("path") |
| 51 | + .call(applyDirectStyles, this) |
| 52 | + .call(applyChannelStyles, this, channels) |
| 53 | + .attr("d", i => path(contours[i]))) |
| 54 | + .node(); |
| 55 | + } |
| 56 | +} |
| 57 | + |
| 58 | +export function density(data, {x, y, ...options} = {}) { |
| 59 | + ([x, y] = maybeTuple(x, y)); |
| 60 | + return new Density(data, {...options, x, y}); |
| 61 | +} |
| 62 | + |
| 63 | +const dropChannels = new Set(["x", "y", "z", "weight"]); |
| 64 | + |
| 65 | +function densityInitializer(options, fillDensity, strokeDensity) { |
| 66 | + let {bandwidth, thresholds} = options; |
| 67 | + bandwidth = bandwidth === undefined ? 20 : +bandwidth; |
| 68 | + thresholds = thresholds === undefined ? 20 : +thresholds; // TODO Allow an array of thresholds? |
| 69 | + return initializer(options, function(data, facets, channels, scales, dimensions) { |
| 70 | + const X = channels.x ? coerceNumbers(valueof(channels.x.value, scales[channels.x.scale] || identity)) : null; |
| 71 | + const Y = channels.y ? coerceNumbers(valueof(channels.y.value, scales[channels.y.scale] || identity)) : null; |
| 72 | + const W = channels.weight ? coerceNumbers(channels.weight.value) : null; |
| 73 | + const Z = channels.z?.value; |
| 74 | + const {z} = this; |
| 75 | + const [cx, cy] = applyFrameAnchor(this, dimensions); |
| 76 | + const {width, height} = dimensions; |
| 77 | + |
| 78 | + // Group any of the input channels according to the first index associated |
| 79 | + // with each z-series or facet. Drop any channels not be needed for |
| 80 | + // rendering after the contours are computed. |
| 81 | + const newChannels = Object.fromEntries(Object.entries(channels) |
| 82 | + .filter(([key]) => !dropChannels.has(key)) |
| 83 | + .map(([key, channel]) => [key, {...channel, value: []}])); |
| 84 | + |
| 85 | + // If the fill or stroke encodes density, construct new output channels. |
| 86 | + const FD = fillDensity && []; |
| 87 | + const SD = strokeDensity && []; |
| 88 | + const k = 100; // arbitrary scale factor for readability |
| 89 | + |
| 90 | + const density = contourDensity() |
| 91 | + .x(X ? i => X[i] : cx) |
| 92 | + .y(Y ? i => Y[i] : cy) |
| 93 | + .weight(W ? i => W[i] : 1) |
| 94 | + .size([width, height]) |
| 95 | + .bandwidth(bandwidth) |
| 96 | + .thresholds(thresholds); |
| 97 | + |
| 98 | + // If there are multiple facets or multiple series, first compute the |
| 99 | + // contours for each facet-series independently; choose the set of contours |
| 100 | + // with the maximum threshold value (density), and then apply this set’s |
| 101 | + // thresholds to all the other facet-series. TODO With API changes to |
| 102 | + // d3-contour, we could avoid recomputing the blurred grid and cache |
| 103 | + // individual contours, making this more efficient. |
| 104 | + if (facets.length > 1 || Z && facets.length > 0 && distinct(facets[0], Z)) { |
| 105 | + let maxValue = 0; |
| 106 | + let maxContours = []; |
| 107 | + for (const facet of facets) { |
| 108 | + for (const index of Z ? groupZ(facet, Z, z) : [facet]) { |
| 109 | + const C = density(index); |
| 110 | + if (C.length > 0) { |
| 111 | + const c = C[C.length - 1]; |
| 112 | + if (c.value > maxValue) { |
| 113 | + maxValue = c.value; |
| 114 | + maxContours = C; |
| 115 | + } |
| 116 | + } |
| 117 | + } |
| 118 | + } |
| 119 | + density.thresholds(maxContours.map(c => c.value)); |
| 120 | + } |
| 121 | + |
| 122 | + // Generate contours for each facet-series. |
| 123 | + const newFacets = []; |
| 124 | + const contours = []; |
| 125 | + for (const facet of facets) { |
| 126 | + const contourFacet = []; |
| 127 | + newFacets.push(contourFacet); |
| 128 | + for (const index of Z ? groupZ(facet, Z, z) : [facet]) { |
| 129 | + for (const contour of density(index)) { |
| 130 | + contourFacet.push(contours.length); |
| 131 | + contours.push(contour); |
| 132 | + if (FD) FD.push(contour.value * k); |
| 133 | + if (SD) SD.push(contour.value * k); |
| 134 | + for (const key in newChannels) { |
| 135 | + newChannels[key].value.push(channels[key].value[index[0]]); |
| 136 | + } |
| 137 | + } |
| 138 | + } |
| 139 | + } |
| 140 | + |
| 141 | + // If the fill or stroke encodes density, ensure that a zero value is |
| 142 | + // included so that the default color scale domain starts at zero. Otherwise |
| 143 | + // if the starting range value is the same as the background color, the |
| 144 | + // first contour might not be visible. |
| 145 | + if (FD) FD.push(0); |
| 146 | + if (SD) SD.push(0); |
| 147 | + |
| 148 | + return { |
| 149 | + data, |
| 150 | + facets: newFacets, |
| 151 | + channels: { |
| 152 | + ...newChannels, |
| 153 | + ...FD && {fill: {value: FD, scale: "color"}}, |
| 154 | + ...SD && {stroke: {value: SD, scale: "color"}}, |
| 155 | + contours: {value: contours} |
| 156 | + } |
| 157 | + }; |
| 158 | + }); |
| 159 | +} |
| 160 | + |
| 161 | +function isDensity(value) { |
| 162 | + return /^density$/i.test(value); |
| 163 | +} |
0 commit comments