region

Draws the region its parent gives it, such as the cell a partition gives each group. A region has no size or position of its own: it fills the space it is given on both axes. A region with an outline, such as a hexagon or a Voronoi cell of a partition over a binned struct, is drawn as that outline; any other region is drawn as a rectangle.

import { Bin, Color, chart, field, partition, region } from "gofish-graphics";
import data from "vega-datasets";

(async () => {
  const loaded = { movies: await data["movies.json"]() };
  const context = { loaded };
  const container = document.getElementById("app");
  const movies = (context.loaded.movies as any[]).filter(
    (d) => d["IMDB Rating"] != null && d["Rotten Tomatoes Rating"] != null
  );
  chart(movies, { color: Color.gradient("blues"), axes: true })
    .flow(
      partition({
        by: {
          x: field("IMDB Rating").bin(Bin.step(0.5)),
          y: field("Rotten Tomatoes Rating").bin(Bin.step(5)),
        },
      })
    )
    .mark(region({ fill: field("IMDB Rating").count() }))
    .render(container, { w: 480, h: 320 });
})();

Signature

region({ fill?, stroke?, strokeWidth?, opacity?, filter?, debug? })

Parameters

Draws the region its parent gives it, such as a partition's cell. It has no size or position of its own: it fills the space it is given on both axes. It draws the region's outline when the region has one (a hexagon of Bin.hex, a cell of Bin.voronoi), and a rectangle otherwise.

Option	Type	Default	Description
debug	boolean		Dev-only flag: logs this mark's key and datum to the console as it is built. It changes nothing about what is drawn.

Paint

Option	Type	Default	Description
fill	string | FieldExpr		Fill color, or a field name for a color scale.
stroke	string | FieldExpr		Stroke color. Defaults to fill.
strokeWidth	number	0	Stroke width in pixels.
opacity	number	1	Opacity, 0 to 1.
filter	string		Raw SVG filter attribute.

Examples

// A 2D histogram: each cell colored by its count
chart(movies, { color: Color.gradient("blues"), axes: true })
  .flow(
    partition({
      by: {
        x: field("IMDB Rating").bin(Bin.step(0.5)),
        y: field("Rotten Tomatoes Rating").bin(Bin.step(5)),
      },
    })
  )
  .mark(region({ fill: field("IMDB Rating").count() }));

// Outlined cells
.mark(region({ fill: "none", stroke: "white", strokeWidth: 1 }))

A region is the space a parent hands a child. See Underlying Space for how a partition hands each child its cell.