Global

Members

tip

The tip parameter allows to add tooltips on map layers

Properties

Name	Type	Description
`tip`	string \| boolean \| function	You can display a simple text like "foo". But in most cases, tooltips are used to display information related to the elements hovered over. To do this, use the `$` prefix with the field name.With `true`, all fidls are displayed. Finally, you can pass a function to build a customized tooltip.
`tipstyle`	object	An object to configure the "appearance of the tooltip. `fontSize`, `fill`, `background`, `stroke`, `strokeWidth`, `fontFamily`, `fontWeight`, `fontStyle`, `textDecoration`. See also `tool.addonts`

Source: helpers/tooltip.js, line 4
See: https://observablehq.com/@neocartocnrs/tooltip

Examples

// Simple text
viz.path({ data: world, tip: "hello" })

// A field to display
viz.path({ data: world, tip: "$pop" })

// To display all fields
viz.path({ data: world, tip: true })

// A tooltip on several lines
viz.path({
  data: world,
  fill: "#38896F",
  tip: `This country is $name
  It is located in $region
  Its population is $pop` 
  })

// A function
viz.path({
  data: world,
  fill: "#38896F",
  tip: (d) =>
    `There are ${Math.round(
      d.properties.pop / 1000000
    )} million inhabitants in ${d.properties.name}`
  })

// Custom style
viz.path({
  data: world,
  fill: "#CCC",
  tip: `$name ($ISO3)`,
  tipstyle: {
    fontSize: 20,
    fill: "white",
    background: "#38896F",
    stroke: "#4a4d4b",
    strokeWidth: 3,
    fontFamily: "Pacifico",
    fontWeight: "normal",
    fontStyle: "italic",
    textDecoration: "none"
  }
})

Methods

circle()

The circle function allows to add circles on a map. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	[0,0]	position of the circle to display a single circle
`r`	number \| string	<optional>	10	a number or the name of a property containing numerical values
`k`	number	<optional>	50	radius of the largest circle (or corresponding to the value defined by `fixmax`)
`fixmax`	number	<optional>	null	value matching the circle with radius `k`. Setting this value is useful for making maps comparable with each other
`dodge`	boolean	<optional>	false	to avoid circle overlap
`iteration`	number	<optional>	200	number of iteration to dodge circles
`sort`	string \| function	<optional>		the field to sort circles or a sort function
`descending`	boolean	<optional>		circle sorting order
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>	"white"	stroke color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`view`	boolean	<optional>		use true and viewof in Observable for this layer to act as Input
`tipstyle`	object	<optional>		tooltip style
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/circle.js, line 26
See: https://observablehq.com/@neocartocnrs/circle-mark

Example

// There are several ways to use this function
geoviz.circle(svg, { pos: [10,20], r: 15 }) // a single circle
geoviz.circle(svg, { data: cities, r: "population" }) // where svg is the container
svg.circle({ data: cities, r: "population" }) // where svg is the container
svg.plot({ type: "circle", data: cities, r: "population" }) // where svg is the container
geoviz.circle({ data: cities, r: "population" }) // no container
geoviz.plot({ type = "circle", data: cities, r: "population" }) // no container

create()

The create function is the first step in map construction. It creates an svg container + some information about this container:projection, margin, width, height and bbox.

Properties

Name	Type	Attributes	Default	Description
`width`	number	<optional>	1000	width of the container.
`id`	number	<optional>	"map"	id of the svg container.
`height`	number	<optional>		height of the container. This value is automatically calculated according to `domain`. But it can be forced by entering a value.
`domain`	object \| Array.<object>	<optional>		the domain corresponds to the geographical area to be displayed. It is defined by a geoJSON or an array containing geoJSONs.
`projection`	function \| string	<optional>		d3 function of projection. See d3-geo & d3-geo-projection. You can aslo write "mercator" to use tiles. (default: "none")
`pos`	Array.<number>	<optional>		position of the container (if contained in another svg container)
`background`	string	<optional>		background color
`fontFamily`	string	<optional>		font-family for the entire map
`margin`	number \| Array.<number>	<optional>	0	margins around the map. A number to set the same margin everywhere or an array [top, right, bottom, left] to set different margins.
`parent`	object	<optional>		name of parent container into which this child container is to be included. In this case, the options.pos parameter is also used.
`zoomable`	boolean \| number \| string	<optional>		activates the map zoom function. If you set an array of 2 values, it defines the scaleExtent (default: [1,8]). Use "versor" to activate versor zoom. "versor" is only available for vector geometries in wgs84.
`control`	boolean \| Array.<number>	<optional>		If zoomable is enabled, set the control parameter as true displays control buttons to zoom on the map. You can also define an array of 2 values to locate the panel in the position you want (e.g. [100, 200]). This setting is not available with the Versor zoom.
`warning`	boolean	<optional>	true	display or not warnings on the map

Source: container/create.js, line 55
See: https://observablehq.com/@neocartocnrs/geoviz

Example

let svg = geoviz.create({width: 500, background: "lightblue"})

draw()

The draw() function is inspired by the bertin library. It allows you to draw the entire map using a single function. All the necessary information is stored in a single JSON, containing general parameters and an array of objects describing the layers to be displayed and overlaid. Under the wood, the function draw() use the viz.plot() function. The types available are the same.

Properties

Name	Type	Description
`json`	object	an object containing container parameters and an array for layers description. See example below.

Source: container/draw.js, line 5
See: https://observablehq.com/@neocartocnrs/geoviz-draw

Example

geoviz.draw({
 // SVG container parameters
  params: {
    zoomable: true,
    projection: d3.geoNaturalEarth1()
  },
 // Layers description
  layers: [
    { type: "outline" },
    { type: "graticule", stroke: "white", step: 30, strokeWidth: 2 },
    { type: "base", datum: world, fill: "white", fillOpacity: 0.3 },
    {
      type: "prop",
      data: world,
      symbol: "circle",
      var: "gdp",
      fill: "red",
      tip: true,
      leg_values_factor: 1 / 1000000000,
      leg_title: "Gross Domestic Product"
    },
    { type: "header", text: "World Wealth" }
  ]
})

effect/blur()

The blur function allows to create a svg blur filter. It adds a filter to the defs and returns the id like "url(#id)".

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id
`stdDeviation`	number	<optional>	1.5	standard deviation

Source: effect/blur.js, line 3
See: https://observablehq.com/@neocartocnrs/effect

Example

// There are several ways to use this function
geoviz.effect.blur(svg, { stdDeviation: 0, id: "blur" }) // where svg is the container
svg.effect.blur({ stdDeviation: 0, id: "blur" }) // where svg is the container
svg.plot({ type: "blur", stdDeviation: 0, id: "blur" }) // where svg is the container

effect/clipPath()

The clipPath function allows to create a clip layer. The function adds a clip layer to the SVG container and returns the id like "url(#id)". WARNING - the clip is valid for the entireweb page, not just the map

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		clip id.
`datum`	object	<optional>	{ type: "Sphere" }	datum to clip
`permanent`	string	<optional>	false	boolean to have ore not a static clippath

Source: effect/clippath.js, line 5
See: https://observablehq.com/@neocartocnrs/effect

Example

// There are several ways to use this function
geoviz.effect.clipPath(svg, { datum: world })  // where svg is the container
svg.effect.clipPath({ datum: world })  // where svg is the container
svg.plot({ type:"clipPath", datum: world })  // where svg is the container

effect/radialGradient()

The radialGradient function allows to create a radialGradient. The function adds a filter to the defs and returns the id like "url(#id)".

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id
`color1`	Number	<optional>	"#63b0af"	color 1
`color2`	Number	<optional>	"#428c8b"	color 2
`offset1`	Number	<optional>	50	offset 1
`offset2`	Number	<optional>	100	offset 2
`fx`	Number	<optional>	50	fx
`fy`	Number	<optional>	50	fy

Source: effect/radialgradient.js, line 3
See: https://observablehq.com/@neocartocnrs/effect

Example

// There are several ways to use this function
geoviz.effect.radialGradient(svg, { id: "radial", color1: "red", color2: "blue" }) // where svg is the container
svg.effect.radialGradient({ id: "radial", color1: "red", color2: "blue" }) // where svg is the container
svg.plot({ type:"radialGradient",  id: "radial", color1: "red", color2: "blue" }) // where svg is the container

effect/shadow()

The shadow function allows to create a svg filter. It can be use ta add a shadow effect. The function adds a filter to the defs and returns the id like "url(#id)".

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id
`dx`	string	<optional>	4	shift in x
`dy`	string	<optional>	4	shift in y
`fill`	string	<optional>	"black"	fill color
`fillOpacity`	number	<optional>	0.5	fill-opacity (you can use also opacity)
`stdDeviation`	number	<optional>	1.5	standard deviation
`opacity`	number	<optional>	1	opacity

Source: effect/shadow.js, line 3
See: https://observablehq.com/@neocartocnrs/effect

Example

// There are several ways to use this function
geoviz.effect.shadow(svg, { stdDeviation: 0, id: "blur" }) // where svg is the container
svg.effect.shadow({ stdDeviation: 2, id: "shadow" }) // where svg is the container
svg.plot({type:"shadow", stdDeviation: 2, id: "shadow" }) // where svg is the container

The footer function allows add a source below the map. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`text`	string	<optional>	"Author, source..."	text to be displayed
`fill`	string	<optional>	"#9e9696"	text fill
`background_fill`	string	<optional>	"white"	background fill
`background_stroke`	string	<optional>	"white"	background stroke
`background_strokeWidth`	string	<optional>	1	background stroke-width
`dominantBaseline`	string	<optional>	"central"	text dominant-baseline ("hanging", "middle", "central", "bottom")
`textAnchor`	string	<optional>	"middle"	text text-anchore ("start", "middle", "end")
`lineSpacing`	number	<optional>	0	space between lines
`margin`	number	<optional>	1	margin
`fontSize`	number	<optional>	10	text font-size
`fontFamily`	string	<optional>	fontFamily defined in the contrainer	text font-family
`dx`	number	<optional>	0	shift in x
`dy`	number	<optional>	0	shift in y

Source: mark/footer.js, line 5
See: https://observablehq.com/@neocartocnrs/layout-marks

Example

// There are several ways to use this function
geoviz.footer(svg, { text: "Hello geoviz" }) // where svg is the container
svg.footer({ text: "Hello geoviz" }) // where svg is the container
svg.plot({ type: "footer", text: "Hello geoviz" }) // where svg is the container
geoviz.footer({ text: "Hello geoviz" }) // no container

graticule()

The graticule function allows to create a layer with lat/long lines. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`step`	number \| Array.<number>	<optional>	10	gap between graticules. The value can be a number or an array of two values
`stroke`	string	<optional>	"#9ad5e6"	stroke color
`fill`	string	<optional>	"none"	fill color
`strokeWidth`	string	<optional>	0.8	stroke width
`strokeLinecap`	string	<optional>	"square"	stroke-inecap
`strokeLinejoin`	string	<optional>	"round"	stroke-Linejoin
`strokeDasharray`	number \| Array.<number>	<optional>	2	stroke-dasharray (default: 2)
`*`	*	<optional>		other attributes that can be used to define the svg style (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/graticule.js, line 7
See: https://observablehq.com/@neocartocnrs/layout-marks

Example

// There are several ways to use this function
geoviz.graticule(svg, { step: 2 }) // where svg is the container
svg.graticule({ step: [10,2] }) // where svg is the container
svg.plot({ type: "graticule", step: [10,2] }) // where svg is the container
geoviz.graticule({ step: 2 }) // no container

grid/arbitrary()

The grid.arbitrary function allows to create an arbitrary geoJSON grid in SVG coordinates.

Properties

Name	Type	Attributes	Default	Description
`step`	number	<optional>	50	step of the grid
`width`	number	<optional>	1000	width of the grid
`height`	number	<optional>	500	height of the grid

Source: grid/arbitrary.js, line 4
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.arbitrary({step: 30})

grid/diamond()

The grid.diamond function allows to create a diamond geoJSON grid in SVG coordinates.

Properties

Name	Type	Attributes	Default	Description
`step`	number	<optional>	50	step of the grid
`width`	number	<optional>	1000	width of the grid
`height`	number	<optional>	500	height of the grid

Source: grid/diamond.js, line 4
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.diamond({step: 30})

grid/dot()

The grid.dot function allows to create a geoJSON vith regular dots in SVG coordinates.

Properties

Name	Type	Attributes	Default	Description
`step`	number	<optional>	50	step of the grid
`width`	number	<optional>	1000	width of the grid
`height`	number	<optional>	500	height of the grid

Source: grid/dot.js, line 4
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.dot({step: 30})

grid/h3()

The grid.h3 function allows to create a hexbin geoJSON grid in geographical coordinates.

Properties

Name	Type	Attributes	Default	Description
`level`	number	<optional>	0	level of the grid. Form 0 (large hexagons) to 4 (small hexagons). See: https://h3geo.org
`domain`	object	<optional>		a geoJSON to define an extent
`rewind`	boolen	<optional>		to rewind the output

Source: grid/h3.js, line 11
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.h3({level: 1})
geoviz.grid.h3({level: 4, domain: italy})

grid/hexbin()

The grid.hexbin function allows to create a hexbin geoJSON grid in SVG coordinates.

Properties

Name	Type	Attributes	Default	Description
`step`	number	<optional>	50	step of the grid
`width`	number	<optional>	1000	width of the grid
`height`	number	<optional>	500	height of the grid

Source: grid/hexbin.js, line 4
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.hexbin({step: 30})

grid/make()

The grid.make function allows to create a regular grid geoJSON. For all types, For all grid types (except "h3"), the function returns a geojson with svg coordinates in the layout of the page. For type "h3", the function returns geographic coordinates in latitude and longitude.

Properties

Name	Type	Attributes	Default	Description
`type`	string	<optional>	"square"	Type of grid ("square", "dot", "diamond", "hexbin" (or "hex"), "trangle", "arbitrary" (or "randmon"), "h3" (or "h3geo", "hexgeo", "hexbingeo"))
`step`	number	<optional>	50	step of grids (except for "h3" type)
`level`	number	<optional>	0	level oh geographical hexbin grids ("h3" type only). Form 0 (large hexagons) to 4 (small hexagons). See: https://h3geo.org
`domain`	object	<optional>		a geoJSON to define an extent (h3 only)
`rewind`	boolen	<optional>		to rewind the output (h3 only)

Source: grid/make.js, line 9
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

// There are several ways to use this function
geoviz.grid.make(svg, { type:"diamond", step:100 })  // where svg is the container
svg.grid.make({ type:"diamond", step:100 })  // where svg is the container

grid/square()

The grid.square function allows to create a square geoJSON grid in SVG coordinates.

Properties

Name	Type	Attributes	Default	Description
`step`	number	<optional>	50	step of the grid
`width`	number	<optional>	1000	width of the grid
`height`	number	<optional>	500	height of the grid

Source: grid/square.js, line 4
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.square({step: 30})

grid/triangle()

The grid.triangle function allows to create a triangle geoJSON grid in SVG coordinates.

Properties

Name	Type	Attributes	Default	Description
`step`	number	<optional>	50	step of the grid
`width`	number	<optional>	1000	width of the grid
`height`	number	<optional>	500	height of the grid

Source: grid/triangle.js, line 4
See: https://observablehq.com/@neocartocnrs/regular-grids

Example

geoviz.grid.triangle({step: 30})

halfcircle()

The halfcircle function allows to create a layer with rotable half-circles from a geoJSON. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	[0,0]	position of the half-circle to display a single circle
`dx`	number	<optional>	0	shift in x
`dy`	number	<optional>	0	shift in y
`angle`	number	<optional>	0	angle of the half circle
`r`	number \| string	<optional>	10	a number or the name of a property containing numerical values
`innerRadius`	number	<optional>	10	inner radius
`cornerRadius`	number	<optional>	2	corner radius
`k`	number	<optional>	50	radius of the largest half-circle (or corresponding to the value defined by `fixmax`)
`fixmax`	number	<optional>		value matching the half-circle with radius `k`. Setting this value is useful for making maps comparable with each other
`sort`	string \| function	<optional>		the field to sort circles or a sort function
`descending`	boolean	<optional>		circle sorting order
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>		stroke color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`view`	boolean	<optional>	false	use true and viewof in Observable for this layer to act as Input
`tipstyle`	object	<optional>		tooltip style
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/halfcircle.js, line 27
See: https://observablehq.com/@neocartocnrs/circle-mark

Example

// There are several ways to use this function
geoviz.halfcircle(svg, { pos: [10,20], r: 15 }) // a single half-circle
geoviz.halfcircle(svg, { data: cities, r: "population" }) // where svg is the container
svg.halfcircle({ data: cities, r: "population" }) // where svg is the container
svg.plot({ type: "halfcircle", data: cities, r: "population" }) // where svg is the container
geoviz.halfcircle({ data: cities, r: "population" }) // no container

The header function allows add a title above the map. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`text`	string	<optional>	"Map title"	text to be displayed
`fill`	string	<optional>	"#9e9696"	text fill
`background_fill`	string	<optional>	"white"	background fill
`background_stroke`	string	<optional>	"white"	background stroke
`background_strokeWidth`	string	<optional>	1	background stroke-width
`dominantBaseline`	string	<optional>	"central"	text dominant-baseline ("hanging", "middle", "central", "bottom")
`textAnchor`	string	<optional>	"middle"	text text-anchore ("start", "middle", "end")
`lineSpacing`	number	<optional>	0	space between lines
`margin`	number	<optional>	8	margin
`fontSize`	number	<optional>	26	text font-size
`fontFamily`	string	<optional>	fontFamily defined in the contrainer	text font-family
`dx`	number	<optional>	0	shift in x
`dy`	number	<optional>	0	shift in y
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/header.js, line 5
See: https://observablehq.com/@neocartocnrs/layout-marks

Example

// There are several ways to use this function
geoviz.header(svg, { text: "Hello geoviz" }) // where svg is the container
svg.header({ text: "Hello geoviz" }) // where svg is the container
svg.plot({ type: "header",text: "Hello geoviz" }) // where svg is the container
geoviz.header({ text: "Hello geoviz" }) // no container

legend/box()

The legend.box function allows to add a box legend on a map. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`rect_width`	string	<optional>	25	width of the box
`rect_height`	string	<optional>	17	height of the box
`rect_fill`	string	<optional>	"#5d6266"	box color
`rect_stroke`	string	<optional>	"#303030"	stroke color
`rect_strokeWidth`	string	<optional>	0.1	stroke width
`rect_*`	*	<optional>		other SVG attributes that can be applied on this rect element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`label`	string	<optional>		text diplayed
`label_fill`	string	<optional>	"#363636"	text color
`label_fontSize`	string	<optional>	10	text size
`label_dx`	string	<optional>	5	dx
`label_dominantBaseline`	string	<optional>	"central"	dominant-baseline
`label_*`	*	<optional>		SVG attributes that can be applied on this text element (fill, fontize...)
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/box.js, line 16
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.box(svg, { pos: [10,20], label:"hello" }) // where svg is the container
svg.legend.box(s{ pos: [10,20], label:"hello" }) // where svg is the container
svg.legend.box({type:"leg_box", pos: [10,20], label:"hello" }) // where svg is the container
geoviz.legend.box({ label:"hello" }) // no container

legend/choro_horizontal()

The legend.choro_horizontal function allows to add an horizontal legend on a map for choropleth layers. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`breaks`	Array.<number>	<optional>	[1, 2, 3, 4, 5]	breaks
`colors`	Array.<string>	<optional>	["#fee5d9", "#fcae91", "#fb6a4a", "#cb181d"]	colors
`rect_width`	string	<optional>	50	width of the box
`rect_height`	string	<optional>	14	height of the box
`rect_spacing`	number	<optional>	0	spacing between boxes
`rect_fill`	string	<optional>	"#5d6266"	box color
`rect_stroke`	string	<optional>	"#303030"	stroke color
`rect_strokeWidth`	string	<optional>	0.1	stroke width
`rect_*`	*	<optional>		other SVG attributes that can be applied on this rect element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`values_textAnchor`	string	<optional>	"middle"	text-anchor
`values_dx`	number	<optional>	0	shift in x
`values_dx`	number	<optional>	5	shift in y
`values_fontSize`	string	<optional>	10	text size
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	1°	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/choro-horizontal.js, line 18
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.choro_horizontal(svg, { pos: [10,20], breaks, colors}) // where svg is the container
svg.legend.choro_horizontal({pos: [10,20], breaks, colors} }) // where svg is the container
svg.plot({type: "leg_choro_horizontal", pos: [10,20], breaks, colors} }) // where svg is the container
geoviz.legend.choro_horizontal({ pos: [10,20], breaks, colors}) // no container

legend/choro_vertical()

The legend.choro_vertical function allows to add a vertical legend on a map for choropleth layers. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`breaks`	Array.<number>	<optional>	[1, 2, 3, 4, 5]	breaks
`colors`	Array.<string>	<optional>	["#fee5d9", "#fcae91", "#fb6a4a", "#cb181d"]	colors
`rect_width`	string	<optional>	25	width of the box
`rect_height`	string	<optional>	17	height of the box
`rect_spacing`	number	<optional>	0	spacing between boxes
`rect_fill`	string	<optional>	"#5d6266"	box color
`rect_stroke`	string	<optional>	"#303030"	stroke color
`rect_strokeWidth`	string	<optional>	0.1	stroke width
`rect_*`	*	<optional>		other SVG attributes that can be applied on this rect element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`values_textAnchor`	string	<optional>	"middle"	text-anchor
`values_dx`	number	<optional>	5	shift in x
`values_dx`	number	<optional>	0	shift in y
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	string	<optional>	10	text size
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`values_*`	*	<optional>		SVG attributes that can be applied on this text element (fill, fontSize...)
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/choro-vertical.js, line 18
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.choro_vertical(svg, { pos: [10,20], breaks, colors}) // where svg is the container
svg.legend.choro_vertical({pos: [10,20], breaks, colors} }) // where svg is the container
svg.plot({type:"leg_choro_vertical", pos: [10,20], breaks, colors} }) // where svg is the container
geoviz.legend.choro_vertical({ pos: [10,20], breaks, colors}) // no container

legend/circles()

The legend.circles function allows to add an legend for proportional circles. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`data`	Array.<number>			input values
`k`	number	<optional>	50	radius of the largest circle (or corresponding to the value defined by fixmax )
`fixmax`	Array.<string>	<optional>	null	value matching the circle with radius k . Setting this value is useful for making maps comparable with each other
`nb`	number	<optional>	4	number of circles
`circle_fill`	string	<optional>	"none"	fill color for the circles
`circle_stroke`	string	<optional>	"#363636"	stroke color for the circles
`circle_spacing`	string	<optional>	5	spacing between circles color for the circles
`circle_*`	*	<optional>		SVG attributes that can be applied on this circle element
`line_stroke`	string	<optional>	"#363636"	stroke color for the lines
`line_strokeDasharray`	string	<optional>	1	stroke-dasharray
`line_strokeWidth`	string	<optional>	0.7	stroke-width
`line_length`	string	<optional>	10	length of the line
`line_*`	*	<optional>		SVG attributes that can be applied on this line element
`values_textAnchor`	string	<optional>	"start"	text-anchor
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/circles.js, line 18
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.circles(svg, { pos: [10,20], data, nb:5}) // where svg is the container
svg.legend.circles({pos: [10,20], data, nb: 5} }) // where svg is the container
svg.plot({type: "leg_circles", pos: [10,20], data, nb: 5} }) // where svg is the container
geoviz.legend.circles({ pos: [10,20], data, nb: 5}) // no container

legend/circles_half()

The legend.circles_half function allows to add an legend for mushroom maps. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`data`	Array.<number>	<optional>	[30, 1000]	input values
`k`	number	<optional>	50	radius of the largest half-circle (or corresponding to the value defined by fixmax ) (default: 50)
`fixmax`	Array.<string>	<optional>	null	value matching the circle with radius k . Setting this value is useful for making maps comparable with each other
`nb`	number	<optional>	4	number of half-circles
`circle_fill`	string	<optional>	"none"	fill color for the half-circles
`circle_stroke`	string	<optional>	black	stroke color for the half-circles
`circle_cornerRadius`	number	<optional>	5	circle_cornerRadius (default: 5)
`circle_*`	*	<optional>		SVG attributes that can be applied on this half-circle element
`line_stroke`	string	<optional>	"#363636"	stroke color for the lines
`line_strokeDasharray`	string	<optional>	1	stroke-dasharray
`line_strokeWidth`	string	<optional>	0.7	stroke-width
`line_length`	string	<optional>	10	length of the line
`line_***`	*	<optional>		SVG attributes that can be applied on this line element
`values_textAnchor`	string	<optional>	"middle"	text-anchor
`values_dx`	number	<optional>	0	shift in x
`values_dx`	number	<optional>	5	shift in y
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/circles-half.js, line 18
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.circles_half(svg, { pos: [10,20], data, nb:5}) // where svg is the container
svg.legend.circles_half({pos: [10,20], data, nb: 5} }) // where svg is the container
svg.plot({type: "leg_circles_half", pos: [10,20], data, nb: 5} }) // where svg is the container
geoviz.legend.circles_half({ pos: [10,20], data, nb: 5}) // no container

legend/circles_nested()

The legend.circles_nested function allows to add an legend for proportional circles. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`data`	Array.<number>			input values
`k`	number	<optional>	50	radius of the largest circle (or corresponding to the value defined by fixmax )
`fixmax`	Array.<string>	<optional>	null	value matching the circle with radius k . Setting this value is useful for making maps comparable with each other
`nb`	number	<optional>	4	number of circles
`circle_fill`	string	<optional>	"none"	fill color for the circles
`circle_stroke`	string	<optional>	"#363636"	stroke color for the circles
`circle_*`	*	<optional>		SVG attributes that can be applied on this circle element
`line_stroke`	string	<optional>	"#363636"	stroke color for the lines
`line_strokeDasharray`	string	<optional>	1	stroke-dasharray
`line_strokeWidth`	string	<optional>	0.7	stroke-width
`line_length`	string	<optional>	10	length of the line
`line_***`	*	<optional>		SVG attributes that can be applied on this line element
`values_textAnchor`	string	<optional>	"start"	text-anchor
`values_dx`	number	<optional>	5	shift in x
`values_dy`	number	<optional>	0	shift in y
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/circles-nested.js, line 17
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.circles_nested(svg, { pos: [10,20], data, nb:5}) // where svg is the container
svg.legend.circles_nested({pos: [10,20], data, nb: 5} }) // where svg is the container
svg.plot({type: "leg_circles_nested", pos: [10,20], data, nb: 5} }) // where svg is the container
geoviz.legend.circles_nested({ pos: [10,20], data, nb: 5}) // no container

legend/mushrooms()

The legend.mushrooms function allows to add an legend for proportional half-circles. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`line_stroke`	string	<optional>	"#363636"	stroke color for the lines
`line_strokeDasharray`	string	<optional>	1	stroke-dasharray
`line_strokeWidth`	string	<optional>	0.7	stroke-width
`line_length`	string	<optional>	10	length of the line
`line_*`	*	<optional>		*SVG attributes that can be applied on this line element nt
`top_data`	Array.<number>	<optional>		input values (top for circles)
`top_k`	number	<optional>	50	radius of the largest top half-circle (or corresponding to the value defined by fixmax)
`top_fixmax`	Array.<string>	<optional>	null	value matching the top circle with radius k . Setting this value is useful for making maps comparable with each other
`top_nb`	number	<optional>	4	number of top half-circles
`top_circle_fill`	string	<optional>	"none"	fill color for the top half-circles
`top_circle_stroke`	string	<optional>	"black"	stroke color for the top half-circles
`top_circle_cornerRadius`	number	<optional>	5	top circle_cornerRadius
`top_circle_*`	*	<optional>		SVG attributes that can be applied on this top half-circle element
`top_values_textAnchor`	string	<optional>	"middle"	top text-anchor
`top_values_dx`	number	<optional>	5	shift in x
`top_values_dy`	number	<optional>	0	shift in y
`top_values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`top_values_decimal`	string	<optional>	"."	separator for decimals
`top_values_thousands`	string	<optional>	" "	separator for thousands
`top_values_*`	*	<optional>		SVG attributes that can be applied on this text element (fill, fontSize...)
`top_title`	string	<optional>	"top_title"	title of the top elment
`bottom_data`	Array.<number>	<optional>		input values (bottom for circles)
`bottom_k`	number	<optional>	50	radius of the largest bottom half-circle (or corresponding to the value defined by fixmax)
`bottom_fixmax`	Array.<string>	<optional>	null	value matching the bottom circle with radius k . Setting this value is useful for making maps comparable with each other
`bottom_nb`	number	<optional>	4	number of bottom half-circles
`bottom_circle_fill`	string	<optional>	"none"	fill color for the bottom half-circles
`bottom_circle_stroke`	string	<optional>	"black"	stroke color for the bottom half-circles
`bottom_circle_cornerRadius`	number	<optional>	5	bottom circle_cornerRadius
`bottom_circle_*`	*	<optional>		SVG attributes that can be applied on this bottom half-circle element
`bottom_values_textAnchor`	string	<optional>	"middle"	bottom text-anchor
`bottom_values_dx`	number	<optional>	5	shift in x
`bottom_values_dy`	number	<optional>	0	shift in y
`bottom_values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`bottom_values_decimal`	string	<optional>	"."	separator for decimals
`bottom_values_thousands`	string	<optional>	" "	separator for thousands
`bottom_values_*`	*	<optional>		SVG attributes that can be applied on this text element (fill, fontSize...)
`bottom_title`	string	<optional>	"bottom_title"	title of the bottom elment
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/mushrooms.js, line 18
See: https://observablehq.com/@neocartocnrs/legends
https://observablehq.com/@neocartocnrs/half-circle-mark

Example

// There are several ways to use this function
geoviz.legend.mushrooms(svg, { pos: [10,20],top_data, bottom_data}) // where svg is the container
svg.legend.mushrooms({pos: [10,20], top_data, bottom_data} }) // where svg is the container
svg.plot({ type: "leg_mushrooms", pos: [10,20], top_data, bottom_data} }) // where svg is the container
geoviz.legend.mushrooms({ pos: [10,20], top_data, bottom_data}) // no container

legend/spikes()

The legend.spikes function allows to add an legend for spike marks. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`data`	Array.<number>	<optional>	[1, 1000]	input values
`k`	number	<optional>	50	height of the highest spike (or corresponding to the value defined by fixmax ) (default: 100)
`fixmax`	Array.<string>	<optional>	null	value matching the spike with height k . Setting this value is useful for making maps comparable with each other
`nb`	number	<optional>	4	number of spikes
`spike_width`	number	<optional>	30	a number defining the width of the spikes
`spike_straight`	number	<optional>	0	a number between 0 and 1 defining the curve of the spikes. 0 = curved ; 1 = straight
`spike_spacing`	number	<optional>	3	spacing between spikes (default: 3)
`spike_fill`	string	<optional>	"none"	fill color for the cspikesrcles
`spike_stroke`	string	<optional>	"black"	stroke color for the spikes
`spike_*`	*	<optional>		SVG attributes that can be applied on this spike element
`values_textAnchor`	string			text-anchor (default: "middle")
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/spikes.js, line 18
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.spikes(svg, { pos: [10,20], data, nb:5}) // where svg is the container
svg.legend.spikes({pos: [10,20], data, nb: 5} }) // where svg is the container
svg.plot({type: "spikes", pos: [10,20], data, nb: 5} }) // where svg is the container
geoviz.legend.spikes({ pos: [10,20], data, nb: 5}) // no container

legend/squares()

The legend.squares function allows to add an legend for proportional squares. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`data`	Array.<number>			input values
`k`	number	<optional>	100	side of the largest square (or corresponding to the value defined by fixmax )
`fixmax`	Array.<string>	<optional>	null	value matching the square with size k . Setting this value is useful for making maps comparable with each other
`nb`	number	<optional>	4	number of squares
`square_fill`	string	<optional>	"none"	fill color for the squares
`square_stroke`	string	<optional>	"#363636"	stroke color for the squares
`square_spacing`	string	<optional>	5	spacing between squares
`square_*`	*	<optional>		SVG attributes that can be applied on this square element
`line_stroke`	string	<optional>	"#363636"	stroke color for the lines
`line_strokeDasharray`	string	<optional>	1	stroke-dasharray
`line_strokeWidth`	string	<optional>	0.7	stroke-width
`line_length`	string	<optional>	10	length of the line
`line_*`	*	<optional>		SVG attributes that can be applied on this line element
`values_textAnchor`	string	<optional>	"start"	text-anchor
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/squares.js, line 18
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.squares(svg, { pos: [10,20], data, nb:5}) // where svg is the container
svg.legend.squares({pos: [10,20], data, nb: 5} }) // where svg is the container
svg.plot({type: "leg_squares", pos: [10,20], data, nb: 5} }) // where svg is the container
geoviz.legend.squares({ pos: [10,20], data, nb: 5}) // no container

legend/squares_nested()

The legend.squares_nested function allows to add an legend for proportional squares. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`data`	Array.<number>			input values
`k`	number	<optional>	100	side of the largest square (or corresponding to the value defined by fixmax )
`fixmax`	Array.<string>	<optional>	null	value matching the square with size k . Setting this value is useful for making maps comparable with each other
`nb`	number	<optional>	4	number of squares
`square_fill`	string	<optional>	"none"	fill color for the squares
`square_stroke`	string	<optional>	"#363636"	stroke color for the squares
`square_spacing`	string	<optional>	5	spacing between squares
`square_*`	*	<optional>		SVG attributes that can be applied on this square element
`line_stroke`	string	<optional>	"#363636"	stroke color for the lines
`line_strokeDasharray`	string	<optional>	1	stroke-dasharray
`line_strokeWidth`	string	<optional>	0.7	stroke-width
`line_length`	string	<optional>	10	length of the line
`line_*`	*	<optional>		SVG attributes that can be applied on this line element
`values_textAnchor`	string	<optional>	"start"	text-anchor
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`values_factor`	number	<optional>	1	allow to multiply values to display in the legend. e.g 0.001 to convert into thousands
`values_decimal`	string	<optional>	"."	separator for decimals
`values_thousands`	string	<optional>	" "	separator for thousands
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/squares-nested.js, line 17
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.squares_nested(svg, { pos: [10,20], data, nb:5}) // where svg is the container
svg.legend.squares_nested({pos: [10,20], data, nb: 5} }) // where svg is the container
svg.plot({type: "leg_squares_nested", pos: [10,20], data, nb: 5} }) // where svg is the container
geoviz.legend.squares_nested({ pos: [10,20], data, nb: 5}) // no container

legend/symbol_horizontal()

The legend.symbol_horizontal function allows to add an vertical legend on a map for symbol layers. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`types`	Array.<string>	<optional>	["A", "B", "C", "D"]	types
`symbols`	Array.<string>	<optional>	["circle", "square", "triangle", "pentagon"]	symbols
`alphabetical`	boolean	<optional>	true	alphabetical order
`symbol_size`	number	<optional>	10	size of the symbol (radius)
`symbol_rotate`	number	<optional>	0	angle of the symbols
`symbol_spacing`	number	<optional>	4	spacing between symbols
`symbol_fill`	string	<optional>	"#2e2e2e"	box color
`symbol_stroke`	string	<optional>	"#303030"	stroke color
`symbol_strokeWidth`	string	<optional>	0.5	stroke width
`symbol_foo`	*			other SVG attributes that can be applied on this symbol element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`symbol_background`	boolen	<optional>	false	circles under the symbol
`symbol_background_foo`	*			*other SVG attributes that can be applied on this circle element (fill, stroke, fillOpacity...)
`values_textAnchor`	string			text-anchor (default: "middle")
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/symbol-horizontal.js, line 15
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.typo_horizontal(svg, { pos: [10,20], types, colors}) // where svg is the container
svg.legend.typo_horizontal({pos: [10,20], types, colors} }) // where svg is the container
svg.plot({type: "leg_typo_horizontal", pos: [10,20], types, colors} }) // where svg is the container
geoviz.legend.typo_horizontal({ pos: [10,20], types, colors}) // no container

legend/symbol_vertical()

The legend.symbol_vertical function allows to add an vertical legend on a map for symbol layers. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`types`	Array.<string>	<optional>	["A", "B", "C", "D"]	types
`symbols`	Array.<string>	<optional>	["circle", "square", "triangle", "pentagon"]	symbols
`alphabetical`	boolean	<optional>	true	alphabetical order
`symbol_size`	number	<optional>	10	size of the symbol (radius)
`symbol_rotate`	number	<optional>	0	angle of the symbols
`symbol_spacing`	number	<optional>	4	spacing between symbols
`symbol_fill`	string	<optional>	"#2e2e2e"	box color
`symbol_stroke`	string	<optional>	"#303030"	stroke color
`symbol_strokeWidth`	string	<optional>	0.5	stroke width
`symbol_foo`	*			other SVG attributes that can be applied on this symbol element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`symbol_background`	boolen	<optional>	false	circles under the symbol
`symbol_background_foo`	*			*other SVG attributes that can be applied on this circle element (fill, stroke, fillOpacity...)
`values_textAnchor`	string			text-anchor (default: "middle")
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/symbol-vertical.js, line 15
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.typo_vertical(svg, { pos: [10,20], types, colors}) // where svg is the container
svg.legend.typo_vertical({pos: [10,20], types, colors} }) // where svg is the container
svg.plot({type: "leg_typo_vertical", pos: [10,20], types, colors} }) // where svg is the container
geoviz.legend.typo_vertical({ pos: [10,20], types, colors}) // no container

legend/typo_horizontal()

The legend.typo_horizontal function allows to add an horizontal legend on a map for typo layers. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`types`	Array.<string>	<optional>	["A", "B", "C", "D"]	types
`colors`	Array.<string>	<optional>	["#e41a1c", "#377eb8", "#4daf4a", "#984ea3"]	colors
`alphabetical`	boolean	<optional>	true	alphabetical order
`rect_width`	number	<optional>	50	width of the box
`rect_height`	number	<optional>	14	height of the box
`rect_spacing`	number	<optional>	0	spacing between boxes
`rect_fill`	string	<optional>	"#5d6266"	box color
`rect_stroke`	string	<optional>	"#303030"	stroke color
`rect_strokeWidth`	string	<optional>	0.1	stroke width
`rect_foo`	*			other SVG attributes that can be applied on this rect element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`values_textAnchor`	string			text-anchor (default: "middle")
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/typo-horizontal.js, line 15
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function

legend/typo_vertical()

The legend.typo_vertical function allows to add an vertical legend on a map for typo layers. The function adds a legend layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		unique id
`pos`	Array.<number>	<optional>	[0,0]	legend position
`gap`	number	<optional>	2	gap between elements
`types`	Array.<string>	<optional>	["A", "B", "C", "D"]	types
`colors`	Array.<string>	<optional>	["#e41a1c", "#377eb8", "#4daf4a", "#984ea3"]	colors
`alphabetical`	boolean	<optional>	true	alphabetical order
`rect_width`	number	<optional>	25	width of the box
`rect_height`	number	<optional>	17	height of the box
`rect_spacing`	number	<optional>	3	spacing between boxes
`rect_fill`	string	<optional>	"#5d6266"	box color
`rect_stroke`	string	<optional>	"#303030"	stroke color
`rect_strokeWidth`	string	<optional>	0.1	stroke width
`rect_foo`	*			other SVG attributes that can be applied on this rect element (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`values_textAnchor`	string			text-anchor (default: "middle")
`values_dx`	number			shift in x (default: 0)
`values_dx`	number			shift in y (default: 5)
`values_fill`	number	<optional>	"#363636"	fill
`values_fontSize`	number	<optional>	10	fontSize
`title`	string	<optional>	"Legend"	title of the legend
`title_fill`	string	<optional>	"#363636"	title color
`title_fontSize`	string	<optional>	16	title font size
`title_*`	*	<optional>		SVG attributes that can be applied on this text element
`subtitle`	string	<optional>		subtitle of the legend
`subtitle_fill`	string	<optional>	"#363636"	subtitle color
`subtitle_fontSize`	string	<optional>	12	subtitle font size
`subtitle_*`	*	<optional>		SVG attributes that can be applied on this text element
`note`	string	<optional>		note displayed above the legend
`note_fill`	string	<optional>	"#363636"	note color
`note_fontSize`	string	<optional>	1O	note font size
`note_*`	*	<optional>		SVG attributes that can be applied on this text element
`frame`	boolean	<optional>	false	frame around the legend
`frame_margin`	boolean	<optional>	15	frame margin
`frame_fill`	boolean	<optional>	"white"	frame fill
`frame_stroke`	boolean	<optional>	"black"	frame fill
`frame_fillOpacity`	boolean	<optional>	0.5	frame fill-opacity
`frame_*`	*	<optional>		SVG attributes that can be applied on this frame element (rect)
`text_*`	*	<optional>		SVG attributes that can be applied directly on all text elements of this legend

Source: legend/typo-vertical.js, line 15
See: https://observablehq.com/@neocartocnrs/legends

Example

// There are several ways to use this function
geoviz.legend.typo_vertical(svg, { pos: [10,20], types, colors}) // where svg is the container
svg.legend.typo_vertical({pos: [10,20], types, colors} }) // where svg is the container
svg.plot({type: "leg_typo_vertical", pos: [10,20], types, colors} }) // where svg is the container
geoviz.legend.typo_vertical({ pos: [10,20], types, colors}) // no container

north()

The north function allows add a North arrow. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	[svg.width - 30, 30]	position [x,y] on the page. The scale value is relevant for this location on the map
`scale`	number	<optional>	1	a number to rescale the arrow
`rotate`	number	<optional>	null	an angle to rotate the arrow. By dedault, il is automaticaly calculated
`fill`	string	<optional>	"black"	fill color
`fillOpacity`	string	<optional>	1	fill-opacity
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/north.js, line 7
See: https://observablehq.com/@neocartocnrs/layout-marks
https://observablehq.com/@neocartocnrs/geoviz-scalebar

Example

// There are several ways to use this function
geoviz.north(svg, { pos: [100, 300], fill: "brown" }) // where svg is the container
svg.north({ pos: [100, 300], fill: "brown" }) // where svg is the container
svg.plot({ type: "north", pos: [100, 300], fill: "brown" }) // where svg is the container
geoviz.north( { pos: [100, 300], fill: "brown" }) // no container

outline()

The outline function allows to create a layer with Earth outline in the projection. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`stroke`	string	<optional>	"none"	stroke color
`strokeWidth`	number	<optional>	1	stroke width
`fill`	string	<optional>	"#B5DFFD"	fill color
`*`	*	<optional>		other attributes that can be used to define the svg style (strokeDasharray, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/outline.js, line 7
See: https://observablehq.com/@neocartocnrs/layout-marks

Example

// There are several ways to use this function
geoviz.outline(svg, { fill: "yelllow" }) // where svg is the container
svg.outline({ fill: "yelllow" }) // where svg is the container
svg.plot({ type: "outline", fill: "yelllow" }) // where svg is the container
geoviz.outline({ fill: "yelllow" }) // no container

path()

The path function generates SVG paths from a geoJSON. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`datum`	object			GeoJSON FeatureCollection. Use datum if you don't need to iterate.
`id`	string	<optional>		id of the layer
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document
`clip`	boolean	<optional>	true	use true to clip the path with the outline
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>		stroke color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`strokeWidth`	string \| function	<optional>	1	stroke-width (default: 1)
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`view`	boolean	<optional>		= false] - use true and viewof in Observable for this layer to act as Input
`tipstyle`	object	<optional>		tooltip style
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/path.js, line 18
See: https://observablehq.com/@neocartocnrs/path-mark

Example

// There are several ways to use this function
geoviz.path(svg, { data: world, fill: "red" }) // where svg is the container
svg.path({ data: world, fill: "red" }) // where svg is the container
svg.plot({ type: "path", data: world, fill: "red" }) // where svg is the container
geoviz.path({ data: world, fill: "red" }) // no container

plot()

The plot() function in geoviz allows you to call up all the layer types available in the library via a single function. To do this, you need to define the type in the parameter.

For example: geoviz.plot({type: "graticule", step: 30})

Properties

Name	Type	Attributes	Description
`choro`	string		Usage: `geoviz.plot({type: "choro", ...})` or `{type: "choropleth"}`. See plot/choro
`typo`	string		Usage: `geoviz.plot({type: "typo", ...})` or `{type: "typology"}`. See plot/typo
`prop`	string		Usage: `geoviz.plot({type: "prop", ...})`. See plot/prop
`propchoro`	string		Usage: `geoviz.plot({type: "propchoro", ...})`. See plot/propchoro
`proptypo`	string		Usage: `geoviz.plot({type: "proptypo", ...})`. See plot/proptypo
`outline`	string		Usage: `geoviz.plot({type: "outline", ...})`. See outline
`graticule`	string		Usage: `geoviz.plot({type: "graticule", ...})`. See graticule
`path`	string		Usage: `geoviz.plot({type: "path", ...})` or `{type: "base"}` or `{type: "simple"}`. See path
`text`	string		Usage: `geoviz.plot({type: "text", ...})` or `{type: "label"}`. See text
`circle`	string		Usage: `geoviz.plot({type: "circle", ...})`. See circle
`symbol`	string		Usage: `geoviz.plot({type: "symbol", ...})`. See symbol
`square`	string		Usage: `geoviz.plot({type: "square", ...})`. See square
`halfcircle`	string		Usage: `geoviz.plot({type: "halfcircle", ...})`. See halfcircle
`spike`	string		Usage: `geoviz.plot({type: "spike", ...})`. See spike
`tile`	string		Usage: `geoviz.plot({type: "tile", ...})`. See tile
`header`	string		Usage: `geoviz.plot({type: "header", ...})`. See header
`footer`	string		Usage: `geoviz.plot({type: "footer", ...})`. See footer
`scalebar`	string		Usage: `geoviz.plot({type: "scalebar", ...})`. See scalebar
`north`	string		Usage: `geoviz.plot({type: "north", ...})`. See north
`leg_box`	string		Usage: `geoviz.plot({type: "leg_box", ...})` or `{type: "legbox"}`. See legend.box
`leg_choro_horizontal`	string		Usage: `geoviz.plot({type: "leg_choro_horizontal", ...})` or `{type: "legchorohorizontal"}`. See legend.choro_horizontal
`leg_choro_vertical`	string		Usage: `geoviz.plot({type: "leg_choro_vertical", ...})` or `{type: "legchorovertical"}` or `{type: "leg_choro"}` or `{type: "legchoro"}`. See legend.choro_vertical
`leg_typo_horizontal`	string		Usage: `geoviz.plot({type: "leg_typo_horizontal", ...})` or `{type: "legtypohorizontal"}`. See legend.typo_horizontal
`leg_typo_vertical`	string		Usage: `geoviz.plot({type: "leg_typo_vertical", ...})` or `{type: "legtypovertical"}` or `{type: "leg_typo"}` or `{type: "legtypo"}`. See legend.choro_vertical
`leg_spikes`	string		Usage: `geoviz.plot({type: "leg_spikes", ...})` or `{type: "leg_spikes"}` or `{type: "legspikes"}` or `{type: "legspike"}`. See legend.spikes
`leg_circles`	string		Usage: `geoviz.plot({type: "leg_circles", ...})` or `{type: "legcircle"}` or `{type: "legcircle"}` or `{type: "legcircles"}`. See legend.circles
`leg_circle_nested`	string		Usage: `geoviz.plot({type: "leg_circle_nested", ...})` or `{type: "legcirclenested"}` or `{type: "legcirclesnested"}`. See legend.circles_nested
`leg_mushrooms`	string		Usage: `geoviz.plot({type: "leg_mushrooms", ...})` or `{type: "leg_mushroom"}` or `{type: "legmushrooms"}` or `{type: "legmushroom"}`. See legend.mushrooms
`effect_clipPath`	string		Usage: `geoviz.plot({type: "effect_clipPath", ...})` or `{type: "clipPath"}`. See effect.clipPath
`effect_blur`	string		Usage: `geoviz.plot({type: "effect_blur", ...})` or `{type: "blur"}`. See effect.blur
`effect_shadow`	string		Usage: `geoviz.plot({type: "effect_shadow", ...})` or `{type: "shadow"}`. See effect.shadow
`effect_radialGradient`	string		Usage: `geoviz.plot({type: "effect_radialGradient", ...})` or `{type: "radialGradient"}`. See effect.radialGradient
`svg_*`	*	<optional>	parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot.js, line 42

Example

let svg = geoviz.create({projection: d3.geoNaturalEarth1()})
svg.plot({ type = "outline" }) // outline layer
svg.plot({ type = "graticule", step:30, stroke: "white" }) // graticule layer
svg.plot({ type = "path", datum: world, fill: "white", fillOpacity:0.3 }) // path layer
svg.plot({ type = "header", text: "Hello World" }) // Map title
return svg.render()

plot/choro()

With the plot({type = "choro"}) function, you can quickly draw a choropleth map.

choro

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`var`	string			a variable name in a geoJSON containig numeric values. You can also use `fill` or `stroke` argument.
`method`	string	<optional>	quantile	classification method ('quantile', 'q6', 'equal', 'jenks', 'msd', 'geometric', 'headtail', 'pretty', 'arithmetic' or 'nestedmeans').
`nb`	number	<optional>	6	number of classes
`breaks`	array	<optional>		you can define classes manually. In this case, the parameters `nb` and `method` are not taken into account.
`colors`	string \| array	<optional>		an array of colors or name of a color palette available in dicopal. For example "ArmyRose_7", "Earth_7", "Fall_7", "Geyser_7", "TealRose_7", "Temps_7", "Tropic_7", "BluGrn_7", "BluYl_7", "BrwnYl_7", "BurgYl_7", "Burg_7", "DarkMint_7", "Emrld_7", "Magenta_7", "Mint_7", "OrYel_7", "Peach_7", "PinkYl_7", "PurpOr_7"...
`reverse`	boolean	<optional>	false	reverse the color palette
`missing`	string \| boolean	<optional>	"white"	missing data color
`legend`	boolean	<optional>	true	boolean to add or not the legend
`leg_type`	string	<optional>	"vertical"	legend orientation ("horizontal" or "vertical")
`leg_pos`	array	<optional>	[10, 10]	position of the legend
`*`	*	<optional>		You can also modify numerous parameters to customize the map. To do this, you can use all the parameters of the path and tool.choro functions. For example: `strokeWidth: 0.3`.
`leg_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend. To do this, you can use all the parameters of the legend.choro_horizontal and legend.choro_vertical functions with the prefix `"leg_"`. For example: `leg_missing_text: "not available"` or `leg_values_fill: "red"`.
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot_choro.js, line 9
See: https://observablehq.com/@neocartocnrs/choropleth

Example

// Usage
geoviz.plot({type:"choro", data: world, var: "gdppc"})

plot/prop()

With the plot({type = "prop"}) function, you can quickly draw a choropleth map.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`var`	string			a variable name in a geoJSON containig numeric values.
`symbol`	string	<optional>	"circle"	choice of the mark to plot ("circle", "square", "spike", "halfcircle")
`k`	number	<optional>	50	size of the largest symbol
`fixmax`	number	<optional>	null	value matching the symbol with value = k . Setting this value is useful for making maps comparable with each other.
`width`	number	<optional>	30	a number defining the width of the spikes
`straight`	number	<optional>	0	a number between 0 and 1 defining the curve of the spikes. 0 = curved ; 1 = straight
`dodge`	boolean	<optional>	false	to avoid circle overlap (noot relevant fot other marks)
`legend`	boolean	<optional>	true	boolean to add or not the legend
`leg_type`	string	<optional>	"nested"	legend style ("nested" or "separate")
`leg_pos`	array	<optional>	[10, 10]	position of the legend
`*`	*	<optional>		You can also modify numerous parameters to customize the map. To do this, you can use all the parameters of the path and tool.typo functions. For example: `strokeWidth: 0.3`.
`leg_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend. To do this, you can use all the parameters of the legend.circles_nested, legend.circles_half, legend.circles_nested and legend.spikes functions with the prefix `"leg_"`. For example: `leg_missing_text: "not available"` or `leg_values_fill: "red"`.
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot_prop.js, line 5
See: https://observablehq.com/@neocartocnrs/prop

Example

// Usage
geoviz.plot({type:"prop", data: world, var: "pop"})

plot/propchoro()

With the plot({type = "propchoro"}) function, you can quickly draw a proportional symbols with a color gradation/

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`var1`	string			a variable name in a geoJSON containig numeric values (absolute quantitative data).
`var2`	string			a variable name in a geoJSON containig numeric values (relative quantitative data. e.g. %).
`var`	string	<optional>		If you set var instead of var1 and var2, then the same variable is mapped twice in two different ways.
`symbol`	string	<optional>	"circle"	choice of the mark to plot ("circle", "spike", "halfcircle")
`k`	number	<optional>	50	size of the largest symbol
`fixmax`	number	<optional>	null	value matching the symbol with value = k . Setting this value is useful for making maps comparable with each other.
`dodge`	boolean	<optional>	false	to avoid circle overlap (noot relevant fot other marks)
`width`	number	<optional>	30	a number defining the width of the spikes
`straight`	number	<optional>	0	a number between 0 and 1 defining the curve of the spikes. 0 = curved ; 1 = straight
`method`	string	<optional>	quantile	classification method ('quantile', 'q6', 'equal', 'jenks', 'msd', 'geometric', 'headtail', 'pretty', 'arithmetic' or 'nestedmeans').
`nb`	number	<optional>	6	number of classes
`breaks`	array	<optional>		you can define classes manually. In this case, the parameters `nb` and `method` are not taken into account.
`colors`	string \| array	<optional>		an array of colors or name of a color palette available in dicopal
`reverse`	boolean	<optional>	false	reverse the color
`missing`	string \| boolean	<optional>	"white"	missing data color
`*`	*	<optional>		You can also modify numerous parameters to customize the map. For example: `strokeWidth: 0.3`.
`legend`	boolean	<optional>	true	boolean to add or not the legend
`leg1_type`	string	<optional>	"nested"	legend style ("nested" or "separate")
`leg2_type`	string	<optional>	"vertical"	legend style ("vertical" or "horizontal")
`leg1_pos`	array	<optional>	[10, 10]	position of the legend
`leg1_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend. To do this, you can use all the parameters of the legend.circles_nested, legend.circles_half, legend.circles_nested and legend.spikes functions with the prefix `"leg1_"`. For example: `leg1_values_fill: "red"`.
`leg2_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend (choro). To do this, you can use all the parameters of the legend.choro_horizontal and legend.choro_vertical functions with the prefix `"leg2_"`. For example: `leg2_missing_text: "not available"`.
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot_propchoro.js, line 9
See: https://observablehq.com/@neocartocnrs/prop

Example

// Usage
geoviz.plot({type:"propchoro", data: world, var1: "pop", var2: "gdppc"})

plot/proptypo()

With the plot({type = "proptypo"}) function, you can quickly draw a proportional symbols with qualitative colors (hues)

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`var1`	string			a variable name in a geoJSON containig numeric values (absolute quantitative data).
`var2`	string			a variable name in a geoJSON containig numeric values (relative quantitative data. e.g. %).
`var`	string	<optional>		If you set var instead of var1 and var2, then the same variable is mapped twice in two different ways.
`symbol`	string	<optional>	"circle"	choice of the mark to plot ("circle", "spike", "halfcircle")
`k`	number	<optional>	50	size of the largest symbol
`fixmax`	number	<optional>	null	value matching the symbol with value = k . Setting this value is useful for making maps comparable with each other.
`dodge`	boolean	<optional>	false	to avoid circle overlap (noot relevant fot other marks)
`width`	number	<optional>	30	a number defining the width of the spikes
`straight`	number	<optional>	0	a number between 0 and 1 defining the curve of the spikes. 0 = curved ; 1 = straight
`colors`	string \| array	<optional>		an array of colors or name of a color palette available in dicopal
`order`	array	<optional>		an array of values qualitative values.
`alphabetical`	boolean	<optional>	true	to order the items in the legend in alphabetical order
`missing`	string \| boolean	<optional>	"white"	missing data color
`*`	*	<optional>		You can also modify numerous parameters to customize the map. For example: `strokeWidth: 0.3`.
`legend`	boolean	<optional>	true	boolean to add or not the legend
`leg1_type`	string	<optional>	"nested"	legend style ("nested" or "separate")
`leg2_type`	string	<optional>	"vertical"	legend style ("vertical" or "horizontal")
`leg1_pos`	array	<optional>	[10, 10]	position of the legend
`leg1_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend. To do this, you can use all the parameters of the legend.circles_nested, legend.circles_half, legend.circles_nested and legend.spikes functions with the prefix `"leg1_"`. For example: `leg1_values_fill: "red"`.
`leg2_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend (choro). To do this, you can use all the parameters of the legend.typo_horizontal and legend.typo_vertical functions with the prefix `"leg2_"`. For example: `leg2_missing_text: "not available"`.
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot_proptypo.js, line 9
See: https://observablehq.com/@neocartocnrs/prop

Example

// Usage
geoviz.plot({type:"propchoro", data: world, var1: "pop", var2: "gdppc"})

plot/symbol()

With the plot({type = "symbol"}) function, you can quickly draw a layer with symbols.

choro

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`var`	string			a variable name in a geoJSON containig qualitative values. Or the name of a symbol.
`symbols`	array	<optional>		an array of symbols.
`alphabetical`	boolean	<optional>	true	to order the items in the legend in alphabetical order
`legend`	boolean	<optional>	true	boolean to add or not the legend
`leg_type`	string	<optional>	"vertical"	legend orientation ("horizontal" or "vertical")
`leg_pos`	array	<optional>	[10, 10]	position of the legend
`*`	*	<optional>		You can also modify numerous parameters to customize the map. To do this, you can use all the parameters of the path and tool.typo functions. For example: `strokeWidth: 0.3`.
`leg_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend. To do this, you can use all the parameters of the legend.typo_horizontal and legend.typo_vertical functions with the prefix `"leg_"`. For example: `leg_missing_text: "not available"` or `leg_values_fill: "red"`.
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot_symbol.js, line 6
See: https://observablehq.com/@neocartocnrs/symbols

Example

// Usage
geoviz.plot({type:"symbol", data: usa, var: "states"})

plot/typo()

With the plot({type = "typo"}) function, you can quickly draw a typlogy from qualitative data.

choro

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection. Use data to be able to iterate
`var`	string			a variable name in a geoJSON containig numeric values. You can also use `fill` or `stroke` argument.
`colors`	string \| array	<optional>		an array of colors or name of a color palette available in dicopal. For example : "Antique_7", "Bold_7", "Pastel_7", "Prism_7", "Safe_7", "Vivid_7", "Accent_7", "Dark2_7", "Paired_7", "Pastel1_7", "Pastel2_7", "Set1_7", "Set2_7", "Set3_7"
`order`	array	<optional>		an array of values qualitative values.
`alphabetical`	boolean	<optional>	true	to order the items in the legend in alphabetical order
`missing`	string \| boolean	<optional>	"white"	missing data color
`legend`	boolean	<optional>	true	boolean to add or not the legend
`leg_type`	string	<optional>	"vertical"	legend orientation ("horizontal" or "vertical")
`leg_pos`	array	<optional>	[10, 10]	position of the legend
`*`	*	<optional>		You can also modify numerous parameters to customize the map. To do this, you can use all the parameters of the path and tool.typo functions. For example: `strokeWidth: 0.3`.
`leg_*`	*	<optional>		You can also modify a wide range of parameters to customize the legend. To do this, you can use all the parameters of the legend.typo_horizontal and legend.typo_vertical functions with the prefix `"leg_"`. For example: `leg_missing_text: "not available"` or `leg_values_fill: "red"`.
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: plot/plot_typo.js, line 9
See: https://observablehq.com/@neocartocnrs/typo

Example

// Usage
geoviz.plot({type:"typo", data: usa, var: "states"})

render()

The render function returns the svg document. It returns a pretty map in SVG format :-)

Properties

Name	Type	Attributes	Description
`svg`	SVGSVGElement		SVG container to display. This can be generated using the `create` function.
`order`	Array.<object>	<optional>	array determining the order of layers. This option is only useful in Observable notebooks (because of its topological nature).

Source: container/render.js, line 8
See: https://observablehq.com/@neocartocnrs/geoviz

Example

geoviz.render(svg, {order: [basemap, roads, cities]}) // where svg is the container
svg.render({order: [basemap, roads, cities]}) // where svg is the container

scalebar()

The scalebar function allows add a scalebar. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	10, svg.height - 20	position [x,y] on the page. The scale value is relevant for this location on the map
`translate`	Array.<number>	<optional>	null	an array of two values to move the scalebar without change its size
`units`	string	<optional>	"km"	"ft" (feet), "km" (kilometers), "m" (meters) or "mi" (miles)
`label`	string	<optional>		label to display
`tickSize`	string	<optional>	5	tick padding
`tickPadding`	string	<optional>	0.2	tick size
`distance`	number	<optional>		distance represented by the scalebar
`tickFormat`	function	<optional>	d => d	a function to format values
`tickValues`	Array.<number>	<optional>		values to display on the scalebar
`labelAnchor`	string	<optional>	"start"	position of the label ("start", "middle" or "end")
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/scalebar.js, line 8
See: https://observablehq.com/@neocartocnrs/layout-marks
https://observablehq.com/@neocartocnrs/geoviz-scalebar

Example

// There are several ways to use this function
geoviz.scalebar(svg, { units:"km", distance: 500, pos: [100, 200] }) // where svg is the container
svg.scalebar({ units:"km", distance: 500, pos: [100, 200] }) // where svg is the container
svg.plot({type: "scalebar", units:"km", distance: 500, pos: [100, 200] }) // where svg is the container

spike()

The spike function allows to create a layer with spikes from a geoJSON. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	[0,0]	position of the sîkes to display a single spike
`height`	number \| string	<optional>	10	a number or the name of a property containing numerical values
`width`	number	<optional>	30	a number defining the width of the spikes
`straight`	number	<optional>	0	a number between 0 and 1 defining the curve of the spikes. 0 = curved ; 1 = straight
`k`	number	<optional>	100	height of the highest spike (or corresponding to the value defined by `fixmax`)
`fixmax`	number	<optional>		value matching the spikes with height `k`. Setting this value is useful for making maps comparable with each other
`sort`	string \| function	<optional>		the field to sort spikes or a sort function
`descending`	boolean	<optional>		spikes sorting order
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document (default: "geo")
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>		stroke color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`view`	boolean	<optional>	false	use true and viewof in Observable for this layer to act as Input
`tipstyle`	object	<optional>		tooltip style
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/spike.js, line 25
See: https://observablehq.com/@neocartocnrs/spike-mark

Example

// There are several ways to use this function
geoviz.spike(svg, { pos: [10,20], height: 15 }) // a single circle
geoviz.spike(svg, { data: cities, height: "population" }) // where svg is the container
svg.spike({ data: cities, height: "population" }) // where svg is the container
svg.plot({ type: "spike", data: cities, height: "population" }) // where svg is the container
geoviz.spike({ data: cities, height: "population" }) // no container

square()

The square function allows to create a layer with rotable squares from a geoJSON. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	[0,0]	position of the square to display a single square
`dx`	number	<optional>	0	shift in x
`dy`	number	<optional>	0	shift in y
`angle`	number	<optional>	0	angle of the square
`side`	number \| string	<optional>	20	a number or the name of a property containing numerical values
`k`	number	<optional>	100	size of the largest square(or corresponding to the value defined by `fixmax`)
`fixmax`	number	<optional>		value matching the square with size `k`. Setting this value is useful for making maps comparable with each other
`sort`	string \| function	<optional>		the field to sort squares or a sort function
`descending`	boolean	<optional>		sorting order
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>		stroke color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`view`	boolean	<optional>	false	use true and viewof in Observable for this layer to act as Input
`tipstyle`	object	<optional>		tooltip style
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/square.js, line 27
See: https://observablehq.com/@neocartocnrs/square-mark

Example

// There are several ways to use this function
geoviz.square(svg, { pos: [10,20], side: 15 }) // a single square
geoviz.square(svg, { data: cities, side: "population" }) // where svg is the container
svg.square({ data: cities, side: "population" }) // where svg is the container
svg.plot({ type: "square", data: cities, side: "population" }) // where svg is the container
geoviz.square({ data: cities, side: "population" }) // no container

symbol()

The symbol function allows to create a layer with symbols from a geoJSON. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection
`id`	string	<optional>		id of the layer
`pos`	Array.<number>	<optional>	[0,0]	position of the sîkes to display a single spike
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>	"white"	stroke color
`strokeWidth`	string \| function	<optional>	0.2	stroke-width
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document (default: "geo")
`r`	number \| string	<optional>	12	a radius to set the size one the symbol (encompassing circle)
`scale`	number	<optional>		the scale parameter allows you to change the scale of the symbol.
`symbol`	string	<optional>	"star"	the name of the symbol to display (use viz.tool.symbols() to get the list of available symbols). Iy you use a fied, then a different symbol is assigned to each modality.
`missing`	string	<optional>	"missing"	the name of the symbol for missig values. Use `null` to remove these symbols.
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document (default: "geo")
`rotate`	number	<optional>	0	to rotate symbols
`skewX`	number	<optional>	0	skewX
`skewX`	number	<optional>	0	skewY
`background`	boolean	<optional>	false	to add a circle below the symbol
`background_*`	*	<optional>		parameters of the background. You can use paramers like `background_fill`, `background_stroke`...
`fill`	string \| function	<optional>		fill color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`stroke`	string \| function	<optional>		stroke color. To create choropleth maps or typologies, use the `tool.choro` and `tool.typo` functions
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`view`	boolean	<optional>	false	use true and viewof in Observable for this layer to act as Input
`tipstyle`	object	<optional>		tooltip style
`k`	number	<optional>	50	radius of the largest circle (or corresponding to the value defined by `fixmax`)
`fixmax`	number	<optional>	null	value matching the circle with radius `k`. Setting this value is useful for making maps comparable with each other
`dodge`	boolean	<optional>	false	to avoid circle overlap
`iteration`	number	<optional>	200	number of iteration to dodge circles
`sort`	string \| function	<optional>		the field to sort circles or a sort function
`descending`	boolean	<optional>		circle sorting order
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/symbol.js, line 28
See: https://observablehq.com/@neocartocnrs/symbols

Example

// There are several ways to use this function
geoviz.symbol(svg, { pos: [10,20], r: 15 }) // a single circle
geoviz.symbol(svg, { data: cities, r: "type" }) // where svg is the container
svg.symbol({ data: cities, r: "type" }) // where svg is the container
svg.plot({ type: "symbol", data: poi, r: "type" }) // where svg is the container
geoviz.symbol({ data: poi, r: "type" }) // no container

text()

The text function allows to add a text on the map. It allow also to create a layer with labels from a geoJSON. The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`data`	object			GeoJSON FeatureCollection
`id`	string	<optional>		id of the layer
`text`	string \| function	<optional>	"text"	text to be displayed
`textAnchor`	string \| function	<optional>		text anchor ("start", "middle", "end")
`dominantBaseline`	string \| function	<optional>		dominant-baseline ("auto", "middle", "central", "hanging")
`fontFamily`	string	<optional>	fontFamily defined in the svg container	font-family
`fontSize`	number	<optional>	12	font-size
`lineSpacing`	number	<optional>	0	line spacinf
`pos`	Array.<number>	<optional>	[0,0]	position to display a single text element
`dx`	number	<optional>	0	shift in x
`dy`	number	<optional>	0	shift in y
`sort`	string \| function	<optional>		the field to sort labels or a sort function
`descending`	boolean	<optional>		text sorting order
`coords`	string	<optional>	"geo"	use "svg" if the coordinates are already in the plan of the svg document
`fill`	string \| function	<optional>		fill color
`stroke`	string \| function	<optional>		stroke color
`strokeWidth`	number	<optional>	1	stroke width
`strokeLinejoin`	string \| function	<optional>	"round"	stroke-linejoin
`tip`	boolean \| function	<optional>	false	a function to display the tip. Use true tu display all fields
`tipstyle`	object	<optional>	false	tooltip style
`*`	*	<optional>		other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/text.js, line 18
See: https://observablehq.com/@neocartocnrs/text-mark

Example

// There are several ways to use this function
geoviz.text(svg, { pos: [10,20], text: "Hello World" }) // a single text
geoviz.text(svg, { data: cities, text: "name" }) // labels where svg is the container
svg.text({ data: cities, text: "name" }) // labels where svg is the container
svg.plot({ type: "text", data: cities, text: "name" }) // labels where svg is the container
geoviz.text({ data: cities, text: "name" }) // labels with no container

tile()

The tile function allows to display raster tiles. To use this mark, you must use the projection d3.geoMercator() (or directly "mercator"). The function adds a layer to the SVG container and returns the layer identifier. If the container is not defined, then the layer is displayed directly.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional>		id of the layer
`tileSize`	number	<optional>	512	tile size
`zoomDelta`	number	<optional>	1	zoom offset
`opacity`	number	<optional>	1	tile opacity
`url`	function \| string	<optional>	"openstreetmap"	function like (x, y, z) => `https://something/${z}/${x}/${y}.png`. You can also enter the following strings directly: "openstreetmap", "opentopomap", "worldterrain", "worldimagery", "worldStreet", "worldphysical", "shadedrelief", "stamenterrain", "cartodbvoyager", "stamentoner","stamentonerbackground","stamentonerlite","stamenwatercolor","hillshade","worldocean","natgeo" or "worldterrain".
`clipPath`	string	<optional>		clip-path. e.g. "url(#myclipid)"
`svg_*`	*	<optional>		parameters of the svg container created if the layer is not called inside a container (e.g svg_width)

Source: mark/tile.js, line 7
See: https://observablehq.com/@neocartocnrs/tile-mark

Example

// There are several ways to use this function
geoviz.tile() // no container
geoviz.tile(svg, {url: "worldterrain"}) // where svg is the container
svg.tile({url: "worldterrain"}) // where svg is the container
svg.plot({type: "tile", url: "worldterrain"}) // where svg is the container

tool/addonts()

The tool.addonts function allows add font to the document from an url.

Properties

Name	Type	Description
`fontFamily`	string	font family name
`url`	string	tff- file url

Source: tool/addfonts.js, line 1

tool/centroid()

The tool.centroid function calculate the centroid of all the geometries given in a GeoJSON FeatureCollection. It returns a GeoJSON FeatureCollection (points)

Properties

Name	Type	Attributes	Default	Description
`data`	object			a GeoJSON FeatureCollection
`options.largest`	boolean	<optional>	true	place the centroid in the largest polygon.
`options.latlong`	boolean	<optional>	true	use `true` if input coordinates are in latitude ans longitude. Use `false` if the coordinates are already defined in the page plan

Source: tool/centroid.js, line 5
See: https://observablehq.com/@neocartocnrs/handle-geometries

Example

let dots = geoviz.tool.centroid(world, { largest: true })

tool/choro()

The tool.choro function discretizes an array of numbers. It returns an object containing breaks, colors, the color of the missing value and a function.

Properties

Name	Type	Attributes	Default	Description
`data`	Array.<number>			an array of numerical values.
`options.breaks`	Array.<number>	<optional>		class breaks including min and max
`options.colors`	string \| Array.<string>	<optional>	"Algae"	an array of colors or name of a color palette available in dicopal
`options.reverse`	boolean	<optional>	false	reverse colors
`options.missing`	string	<optional>	"white"	a color for missings values
`options.method`	string	<optional>	"quantile"	classification method ('quantile', 'q6', 'equal', 'jenks', 'msd', 'geometric', 'headtail', 'pretty', 'arithmetic' or 'nestedmeans')
`options.nb`	number	<optional>	6	number of classes desired
`options.precision`	number	<optional>	2	number of digits
`options.minmax`	boolean	<optional>		to keep or delete min and max
`options.k`	number	<optional>	1	number of standard deviations taken into account (msd method only)
`options.middle`	boolean	<optional>		to have the average as a class center (msd method only)

Source: tool/choro.js, line 16

Example

geoviz.tool.choro(world.features.map((d) => d.properties.gdppc), {method: "equal", nb: 4})

tool/dissolve()

The tool.dissolve function aims to transform multi part features into single parts feature. It a GeoJSON FeatureCollection (without multi part features)

Properties

Name	Type	Attributes	Default	Description
`data`	object			a GeoJSON FeatureCollection
`options.areashare`	boolean	<optional>	"_share"	name of the field containing the share area of the part

Source: tool/dissolve.js, line 4
See: https://observablehq.com/@neocartocnrs/handle-geometries

Example

let dots = geoviz.tool.dissolve(world)

tool/dodge()

The tool.dodge function use d3.forceSimulation to spread dots or circles of given in a GeoJSON FeatureCollection (points). It returns the coordinates in the page map. It can be used to create a dorling cartogram. The function returns a GeoJSON FeatureCollection (points) with coordinates in the page map.

Properties

Name	Type	Attributes	Default	Description
`data`	object			a GeoJSON FeatureCollection
`options.projection`	function	<optional>	d => d	d3 projection function
`options.r`	number \| string	<optional>	10	a number or the name of a property containing numerical values.
`options.k`	number	<optional>	50	radius of the largest circle (or corresponding to the value defined by `fixmax`)
`options.fixmax`	number	<optional>	null	value matching the circle with radius `k`. Setting this value is useful for making maps comparable with each other
`options.iteration`	number	<optional>	200	number of iterations
`options.gap`	number	<optional>	0	space between points/circles

Source: tool/dodge.js, line 10
See: https://observablehq.com/@neocartocnrs/world-population

Example

let dots = geoviz.tool.dodge(world, { projection: d3.geoOrthographic(), r: "population", k: 40 })

tool/dotstogrid()

dotstogrid is a function to create a regular grid in the SVG plan count the number of dots inside

Properties

Name	Type	Attributes	Default	Description
`svg`	object			A geoviz SVG container
`options.type`	string	<optional>	"hex"	type of grid ("hex", "square", "triangle","random")
`options.step`	number	<optional>	50	grid resolution (in pixels)
`options.data`	geoJSON	<optional>		dots to count in the grid
`options.var`	string	<optional>		field to sum

Source: tool/dotstogrid.js, line 8
See: https://observablehq.com/@neocartocnrs/bees

Example

geoviz.tool.dotstogrid(svg, {type:"triangle", step:30, data: dots, var: "mayvar"})

tool/featurecollection()

tool.featurecollection is a function to create a valid GeoJSON FeatureCollection, from geometries, features or coordinates. It returns a GeoJSON FeatureCollection.

Properties

Name	Type	Description
`data`	object \| Array	A GeoJSON FeatureCollection, an array of GeoJSON features, a single feature, an array of geometries, a single geometry or a array defining a bbox. You can also use an array of properties containing latitude and longitude coordinates. In this case, you need to specify the field names in the options.
`options.latitude`	string	name of field containing latitudes. You can also use `lat`
`options.longitude`	string	name of field containing longitudes. You can also use `lon`
`options.coordinates`	string	name of field containing géographic coordinates. You can also use `coords`
`options.geometry`	string	name of field containing geoJSON geometries

Source: tool/featurecollection.js, line 5
See: https://observablehq.com/@neocartocnrs/handle-geometries

tool/geotable()

geotable is a function to create an array on objects containing properties and geomeytries, froam a GeoJSON FeatureCollection. This makes it easy to sort, extract data, etc. tool.featurecollection(geotable, { geometry: "geometry" }) can be used to rebuild a valid geoJSON. The function returns an array of an array of FeatureCollections.

Properties

Name	Type	Description
`data`	object	A GeoJSON FeatureCollection
`options.geometry`	string	name of field containing GEOJSON geometries

Source: tool/geotable.js, line 1
See: https://observablehq.com/@neocartocnrs/handle-geometries

tool/height()

This function return a function to calculate radius of circles from data. It returns an object containing a radius function.

Properties

Name	Type	Attributes	Default	Description
`data`	Array.<number>			an array of numerical values.
`options.fixmax`	Array.<string>	<optional>		to fix the value corresponding to the circle with radius = k
`options.k`	Array.<string>	<optional>	50	radius if the greater circle

Source: tool/height.js, line 6

tool/merge()

tool.merge is a function to join a geoJSON and a data file. It returns a GeoJSON FeatureCollection.

Properties

Name	Type	Attributes	Description
`geom`	Array		a GeoJSON FeatureCollection
`geom_id`	string		geom id
`data`	Array		array containg data
`data_id`	string		data id
`id`	string	<optional>	id (if ids are the same in data and geometries)

Source: tool/merge.js, line 3
See: https://observablehq.com/@neocartocnrs/handle-geometries

tool/proj4d3()

proj4d3 is a function developped by Philippe Rivière to allow tu use proj4js projections with d3. It returns a d3js projection function. See https://observablehq.com/@fil/proj4js-d3

Properties

Name	Type	Description
`proj4`	library	the proj4 lib that you have to load
`proj4string`	string	a proj4 projection

Source: tool/proj4d3.js, line 4
See: https://observablehq.com/@neocartocnrs/handle-geometries

Example

geoviz.tool.proj4d3(proj4, `+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs` )

tool/project()

The function tool.project use geoproject from d3-geo-projection to project a geoJSON. It returns a GeoJSON FeatureCollection with coordinates in the page map.

Properties

Name	Type	Description
`data`	object	a GeoJSON FeatureCollection
`options.projection`	function	projection definition. See d3-geo & d3-geo-projection

Source: tool/project.js, line 4
See: https://observablehq.com/@neocartocnrs/handle-geometries

Example

let newGeoJSON = geoviz.tool.project(world, { projection: d3.geoOrthographic()})

tool/radius()

The tool.radius function return a function to calculate radius of circles from data

Properties

Name	Type	Attributes	Default	Description
`data`	Array.<number>			an array of numerical values.
`options.fixmax`	Array.<string>	<optional>		to fix the value corresponding to the circle with radius = k
`option.k`	Array.<string>	<optional>	50	radius if the greater circle

Source: tool/radius.js, line 6

tool/random()

The tool.random function returns a random color among 20 predefined colors.

Source: tool/random.js, line 1

tool/replicate()

Data-driven features replication. This function can be used to create "dots cartograms". The function returns a GeoJSON FeatureCollection with overlapping features

Properties

Name	Type	Description
`data`	object	a GeoJSON FeatureCollection
`options.field`	string	property name containing numeric data
`options.targetvalue`	number	Feature target value

Source: tool/replicate.js, line 4
See: https://observablehq.com/@neocartocnrs/geoviz-dotscartogram

Example

let dots = geoviz.tool.replicate(world, { field: "population", targetvalue: 10000 })

tool/rewind()

The tool.rewind function allows to generate compliant Polygon and MultiPolygon geometries. Adapted from MapBox geojson-rewind code (https://github.com/mapbox/grojson-rewind) under ISC license

Properties

Name	Type	Attributes	Default	Description
`data`	object			a GeoJSON FeatureCollection
`options.outer`	boolean	<optional>	false	rewind Rings Outer
`options.mutate`	boolean	<optional>	false	mutate the Input geoJSON

Source: tool/rewind.js, line 1
See: https://observablehq.com/@neocartocnrs/handle-geometries

tool/ridge()

The tool.ridge function convert a regular grid (x,y,z) to a GeoJSON FeatureCollection (LineString). The aim is to draw a rideline map.

Properties

Name	Type	Attributes	Default	Description
`grid`	array			an array of object containig x,y,z values
`options.x`	string	<optional>	"x"	field containg x values
`options.y`	string	<optional>	"y"	field containg y values
`options.z`	string	<optional>	"z"	field containg z values
`options.k`	number	<optional>	100	height of highest peak
`options.fixmax`	number	<optional>	null	a fixed value corresponding to the k
`options.projection`	boolean	<optional>	d => d	projection

Source: tool/ridge.js, line 5
See: https://observablehq.com/@neocartocnrs/ridge-lines

tool/symbols()

Display symbols available in geoviz

Properties

Name	Type	Attributes	Default	Description
`options.width`	number	<optional>	800	width

Source: tool/symbols.js, line 5
See: https://observablehq.com/@neocartocnrs/symbols

Example

geoviz.tool.symbols({ width: 500 })

tool/typo()

The tool.typo function allows you to assign colors to qualitative data. It can be used to create typology maps. It returs an object containing types, colors, the color of the missing value and a function.

Properties

Name	Type	Attributes	Default	Description
`data`	Array.<number>			an array of numerical values.
`options.colors`	Array.<string>	<optional>	"Set3"	an array of colors or name of a color palette available in dicopal
`options.missing`	string	<optional>	"white"	a color for missings values

Source: tool/typo.js, line 5

Example

geoviz.tool.typo(world.features.map((d) => d.properties.region), {palette: "Pastel"})

tool/unproject()

The tool.unproject function allow to unproject geometries. It returns a GeoJSON FeatureCollection with wgs84 coordinates

Properties

Name	Type	Description
`data`	object	a GeoJSON FeatureCollection
`options.projection`	function	projection definition. See d3-geo & d3-geo-projection

Source: tool/unproject.js, line 1
See: https://observablehq.com/@neocartocnrs/handle-geometries

Example

let newGeoJSON = geoviz.tool.unproject(world, { projection: d3.geoOrthographic()})

Members

tip

Methods

circle()

create()

draw()

effect/blur()

effect/clipPath()

effect/radialGradient()

effect/shadow()

footer()

graticule()

grid/arbitrary()

grid/diamond()

grid/dot()

grid/h3()

grid/hexbin()

grid/make()

grid/square()

grid/triangle()

halfcircle()

header()

legend/box()

legend/choro_horizontal()

legend/choro_vertical()

legend/circles()

legend/circles_half()

legend/circles_nested()

legend/mushrooms()

legend/spikes()

legend/squares()

legend/squares_nested()

legend/symbol_horizontal()

legend/symbol_vertical()

legend/typo_horizontal()

legend/typo_vertical()

north()

outline()

path()

plot()

plot/choro()

plot/prop()

plot/propchoro()

plot/proptypo()

plot/symbol()

plot/typo()

render()

scalebar()

spike()

square()

symbol()

text()

tile()

tool/addonts()

tool/centroid()

tool/choro()

tool/dissolve()

tool/dodge()

tool/dotstogrid()

tool/featurecollection()

tool/geotable()

tool/height()

tool/merge()

tool/proj4d3()

tool/project()

tool/radius()

tool/random()

tool/replicate()

tool/rewind()

tool/ridge()

tool/symbols()

tool/typo()

tool/unproject()