bin faceting support
The bin transform works with Plot's faceting system, partitioning bins by facet. The proportion-facet reducer computes the sum proportional to the facet total.
Observable Plot · all subjects
transforms
239 notes in this subject, read out of this brain and free to use. This is page 2 of 4.
bin default insets
The bin transform sets default insets for a one-pixel gap between rects. You can set explicit insets if you prefer, such as inset: 0 to make rects touch. When rects touch, it is recommended to use round: true on the scale to avoid antialiasing artifacts.
bin output channels automatically computed
In addition to data, the following channels are automatically output by bin transforms: x1 (starting horizontal position), x2 (ending horizontal position), x (horizontal center), y1 (starting vertical position), y2 (ending vertical position), y (vertical center), z (first value of z channel if any), fill (first value of fill channel if any), and stroke (first value of stroke channel if any). The x1, x2, and x outputs are only computed by binX and bin; y1, y2, and y are only computed by binY and bin. The x and y outputs are lazy—only computed if needed downstream.
bin output channels x1/x2 and y1/y2 defaults
The x1 and x2 outputs default to undefined if x is explicitly defined; similarly, y1 and y2 outputs default to undefined if y is explicitly defined.
bin named reducers complete list
The following named reducers are supported by bin transforms: first, last, count, distinct, sum, proportion, proportion-facet, min, min-index, max, max-index, mean, median, mode, pXX (percentile where XX is 00-99), deviation, variance, identity, x (middle of bin's x extent when binning on x), x1 (lower bound), x2 (upper bound), y (middle of bin's y extent when binning on y), y1 (lower bound), y2 (upper bound), and z (bin's z value).
bin custom reducer as function
A reducer may be specified as a function to be passed the array of values for each bin and the extent of the bin.
bin custom reducer as object with reduceIndex
A reducer may be specified as an object with a reduceIndex method and optionally a scope property. The reduceIndex method is repeatedly passed three arguments: the index for each bin (an array of integers), the input channel's array of values, and the extent of the bin (an object {data, x1, x2, y1, y2}). It must return the corresponding aggregate value for the bin.
bin reducer scope property
If the reducer object's scope is "data", then the reduceIndex method is first invoked for the full data, with the return value made available as a third argument (making the extent the fourth argument). If scope is "facet", the reduceIndex method is invoked for each facet, and the resulting reduce value is made available while reducing the facet's bins. This scope is used by the proportion and proportion-facet reducers.
bin channel computation before or after binning
You can control whether a channel is computed before or after binning. If a channel is declared only in options (and it is not a special group-eligible channel such as x, y, z, fill, or stroke), it will be computed after binning and be passed the binned data—each datum is the array of input data corresponding to the current bin. If a channel is declared in both outputs and options, then the channel in options is computed before binning and can be aggregated using any built-in reducer during the bin transform.
bin reverse option
The bin transform supports a reverse option to reverse the order of generated bins.
bin mixBlendMode performance caveat
While the mixBlendMode option is useful for mitigating occlusion in overlapping histograms, it can be slow to render if there are many elements. More than two overlapping histograms may also be hard to read.
bin thresholds option
To control how quantitative dimensions x and y are divided into bins, the thresholds option specifies the threshold values. The thresholds option may be specified as: "auto" (default, Scott's rule capped at 200), "freedman-diaconis", "scott", "sturges", a count (hint for desired number of bins), an array of n threshold values for n-1 bins, an interval or time interval, or a function that returns an array, count, or time interval.
bin thresholds as function signature
If the thresholds option is specified as a function, it is passed three arguments: the array of input values, the domain minimum, and the domain maximum.
bin thresholds numeric handling
If thresholds is specified as a number, d3.ticks or d3.utcTicks is used to choose suitable nice thresholds.
Plot.filter() function signature
Plot.filter(test, options) creates an explicit filter transform. The test parameter can be an accessor function that receives the datum and index, or a channel value definition such as a field name; truthy values are retained. This form is generally only needed when composing multiple transforms.
Filter alternative using null channel values
As an alternative to the filter transform, you can set a channel value to null using a function. For example, instead of using filter with text: (d) => d.highlight ? d.nyt_display : null will show text only for rows where highlight is truthy.
Filtered marks allow styling subsets
A filtered mark allows you to set options on a subset of the data, even if those options are not expressible as channels. For example, you can apply stroke, strokeWidth, inset and other styling properties to only the filtered rows by using multiple marks with different filters.
Filter transform purpose
The filter transform filters a mark's index to show a subset of the data. It affects only which rows of data are rendered by the mark, not the channel values themselves.
Filter as mark option
The filter transform can be applied via the filter mark option. When filter is a function, it receives the datum and index. When filter is a string or channel value definition, truthy values are retained. Setting filter to null disables filtering.
Filter does not affect scale domains
Since the filter transform only affects the mark's index and not the channel values, it does not affect the default scale domains. For example, in a bar chart where some categories are filtered out, the x scale will still contain all categories.
Filter vs Array.filter for data reduction
To completely drop values from the data so they do not affect scale domains, use JavaScript Array.filter to filter the data before passing it to the mark, rather than using the Plot filter transform.
hexbin example with circle symbol
Plot.circle(olympians, Plot.hexbin({r: "count"}, {x: "weight", y: "height"})).plot()
hexbin transform overview
The hexbin transform groups two-dimensional quantitative or temporal data into discrete hexagonal bins. It operates in screen space (pixel coordinates) after x and y scales are applied. It produces x and y channels representing hexagon centers, unlike the bin transform which produces x1, y1, x2, y2 for rectangular extents.
hexbin binWidth option default
The binWidth option specifies the distance between centers of neighboring hexagons in pixels. It defaults to 20.
hexbin output r channel for areal encoding
To produce an areal encoding as in a bubble map, output the r channel. When r is used, the default range of the r scale is set such that hexagons do not overlap.
hexbin z channel partitioning
Using z, the hexbin transform will partition hexagons by ordinal value. If z is not specified, it defaults to fill (if there is no fill output channel) or stroke (if there is no stroke output channel).
hexbin named reducers
The hexbin transform supports the following named reducers for output channels: first, last, count, distinct, sum, proportion, proportion-facet, min, min-index, max, max-index, mean, median, deviation, variance, mode, identity, x (hexagon's x center), and y (hexagon's y center).
hexbin custom reducer function
A reducer may be specified as a function passed the array of values for each bin and the center of the bin, or as an object with a reduceIndex method that receives three arguments: the index array for each bin (array of integers), the input channel's array of values, and the center of the bin (object with {data, x, y}).
hexbin reducer binding to input channels
Most reducers require binding the output channel to an input channel. For example, if you want the y output channel to be a sum, there should be a corresponding y input channel specifying which values to sum. If there is not, sum will be equivalent to count.
hexbin symbol option default
The hexbin transform defaults the symbol option to hexagon, but it can be overridden. The circle constructor changes it to circle.
hexbin with projections
The hexbin transform works with Plot's projection system. When used with projections, hexagon size and color can represent different aggregated dimensions of the binned geographic data.
hexbin and hexgrid mark
The hexgrid mark draws the base hexagonal grid as a mesh. This is useful for showing empty hexagons, since the hexbin transform does not output empty bins.
hexbin escaping hexagons at chart edges
Hexagons can escape the edge of the frame and cover axes. To prevent this, use the inset scale option to reserve space on the edges, or set the dot's clip option to true.
hexbin modifiable areal unit problem
When using hexbin on maps, beware the modifiable areal unit problem. On small scale maps, Earth's curvature makes it impossible to create an accurate and regular grid. Use an equal-area projection when binning.
hexbin fill and r redundant encoding
You can output both fill and r channels for a redundant encoding. Alternatively, fill and r can encode independent (bivariate) dimensions of data.
hexbin with text mark
The hexbin transform can be paired with any mark that supports x and y channels. The text mark is useful for labeling, where the text output channel can derive text from the binned contents.
hexbin signature
hexbin(*outputs*, *options*) - Bins hexagonally on x and y. Also groups on the first channel of z, fill, or stroke, if any. The options must specify x and y channels. The binWidth option (default 20) defines the distance between centers of neighboring hexagons in pixels.
hexbin example with fill count
Plot.dot(olympians, Plot.hexbin({fill: "count"}, {x: "weight", y: "height"})).plot({color: {scheme: "YlGnBu"}})
hexbin example with r count
Plot.dot(olympians, Plot.hexbin({r: "count"}, {x: "weight", y: "height", binWidth})).plot()
hexbin example with redundant fill and r
Plot.dot(olympians, Plot.hexbin({fill: "count", r: "count"}, {x: "weight", y: "height", stroke: "currentColor"})).plot({color: {scheme: "YlGnBu"}})
hexbin example with bivariate fill and r
Plot.dot(olympians, Plot.hexbin({fill: "mode", r: "count"}, {x: "weight", y: "height", fill: "sex"})).plot()
hexbin example with z partitioning
Plot.dot(olympians, Plot.hexbin({stroke: "mode", r: "count"}, {x: "weight", y: "height", z: "sex", stroke: "sex"})).plot()
hexbin example with text mark
Plot.text(olympians, Plot.hexbin({text: "count"}, {x: "weight", y: "height"})).plot()
hexbin example with projection
Plot.plot({projection: "albers", r: {range: [0, 16]}, color: {scheme: "spectral", label: "First year opened", legend: true}, marks: [Plot.geo(statemesh, {strokeOpacity: 0.5}), Plot.geo(nation), Plot.dot(walmarts, Plot.hexbin({r: "count", fill: "min"}, {x: "longitude", y: "latitude", fill: "date"}))]})
hexbin example with hexgrid
Plot.plot({marks: [Plot.hexgrid(), Plot.dot(olympians, Plot.hexbin({r: "count"}, {x: "weight", y: "height", fill: "currentColor"}))]})
hexbin example with inset
Plot.dot(olympians, Plot.hexbin({fill: "count"}, {x: "weight", y: "height"})).plot({inset: 10, color: {scheme: "YlGnBu"}})
hexbin example with axis marks
Plot.plot({color: {scheme: "YlGnBu"}, marks: [Plot.dot(olympians, Plot.hexbin({fill: "count"}, {x: "weight", y: "height"})), Plot.axisX(), Plot.axisY()]})
hexbin tip: stroke for visibility of smallest hexagons
Setting a stroke ensures that the smallest hexagons are visible.
Group transform title channel default reducer
The default reducer for the title channel returns a summary list of the top 5 values with the corresponding number of occurrences.
Implicit stackY transform with groupX
When using groupX with barY mark and specifying a fill channel, the barY mark's implicit stackY transform is applied, producing stacked bars. You can opt-out of this by having groupX generate y1 or y2 instead of y. Similarly, you can opt-out of stackX transform by generating x1 or x2 instead of x.
Group transform with faceting
The group transform automatically partitions groups by facet. For example, setting the fx channel to facet horizontally on sport while the x channel is used within each facet to draw side-by-side bars for each sex will create a grouped bar chart using faceting.
find reducer for group transform
The find reducer returns a reducer that finds the first datum for which the given test function returns a truthy value, and returns the corresponding channel value. This may be used with the group or bin transform to implement a pivot wider transform; for example, a tall dataset with separate rows for male and female observations may be transformed into a wide dataset with separate columns for male and female values. Added in version 0.6.12.
Group vs bin transform usage
The group transform is for aggregating ordinal or nominal data. For quantitative or temporal data, use the bin transform instead.
Group transform purpose and input data
The group transform aggregates ordinal or nominal data — discrete values such as name, type, or category. You can then compute summary statistics for each group, such as a count, sum, or proportion. The group transform is most often used to make bar charts with the bar mark. Given input data as an array of objects, by default the resulting grouped data is an array of arrays where each inner array is a subset of the input data. Each inner array is in input order, and the outer array is in input order according to the first element of each group.
find reducer example
Plot.groupX({y1: Plot.find((d) => d.sex === "F"), y2: Plot.find((d) => d.sex === "M")}, {x: "date", y: "value"}) uses the find reducer to pivot data from tall format (separate rows for male and female) into wide format (separate columns for male and female values).
group example for two-dimensional grouping
Plot.group({fill: "count"}, {x: "island", y: "species"}) groups on both x and y channels (island and species) and outputs a fill channel containing the count for each combination.
groupZ example for single group
Plot.groupZ({x: "proportion"}, {fill: "species"}) groups data solely on the fill channel, placing all data from each fill group into single categories, and outputs x channel as proportions.
groupY example for horizontal bar chart
Plot.groupY({x: "sum"}, {y: "species", x: "body_mass_g"}) groups data on the y channel (species) and outputs an x channel containing the sum of body_mass_g values, producing a horizontal bar chart.
groupX example with sum reducer
Plot.groupX({y: "sum"}, {x: "species", y: "body_mass_g"}) groups data on the x channel (species) and outputs a y channel containing the sum of body_mass_g values for each species group.
groupX basic example with count reducer
Plot.groupX({y: "count"}, {x: "species"}) groups data on the x channel (species) and outputs a y channel containing the count of elements in each group.