Maps can be customized through the accessors documented here. If an accessor is called with a value the value will be set and the map object returned. If called without an argument the current value of the corresponding property will be returned.
In addition map properties can be accessed via attributes to allow for customizations beyond the capabilities of this library. The attributes are accessible once the map is rendered. You can make use of them in a function that you pass to the
postUpdate accessor, when creating a map.
This section documents accessors that can/must be set when a
d3.geomap object is created.
The TopoJSON file to load for drawing the map units, for example countries on a world map.
The content of a TopoJSON file that was already loaded. This is useful for creating multiple maps on one page for example.
The height of the map. By default will be calculated based on width.
A function to run when the update process is completed, i. e. the map is rendered. This can be used to draw symbols or provide your own zoom function for example.
The rotation of the map. Defaults to
[0, 0, 0], i. e. the rotation you are most likely to expect.
A numeric value to set the size of the map. By default will be calculated based on width.
An array of x and y coordinates in pixels to center the map. By default will be calculated based on width.
A property of the unit that is unique, e. g. the
iso3 code of a country, which is also the default value.
The value of
unitPrefix is used to prefix CSS classes of units. It defaults to
unit-, e. g. Spain would get a CSS class of
The name of the
topojson.objects property that contains the geographic units to display on the map.
A function that receives the TopoJSON feature object for the corresponding map unit, when the mouse is moved over it. The return value of this functions is the text shown in the standard browser tooltip. Defaults to
(d) => d.properties.name.
The width of the map. By default will be set to the width of the containing element, i. e. the element passed to the selection.
The zoom factor to use when a map unit is clicked. Defaults to 4.
The loaded TopoJSON data, which gets assigned during the draw method.
A d3.geoPath object in the projection of the created map.
The d3-selection for the map object.
In addition to the accessors from
d3.choropleth objects provide the accessors listed below..
The column from the CSV file that contains the values to be displayed on the map. You provide the appropriate column heading as a string value to the
An array of color values. A sequential orange-red scheme with 9 different color values is set by default. The d3-scale-chromatic package provides many other color scales you can use.
Specify the array of values used to determine appropriate color values. Defaults to the extent of values from the data series set via the
The number format used for values displayed in the legend and in tooltips. Defaults to
false, so you can create your own legend by providing the code to draw it as a callback function to the
If set to
true the built-in legend will be displayed. You can set the width and height of the legend by passing an object with
height attributes set to numeric values.
If set countries will be colored using a transition of the specified duration in milliseconds. Defaults to
null, i. e. no transition animation.
The D3 scale function to use to determine colors based on the domain, i. e. the input values, and the color range. Defaults to d3.scaleQuantize.
The data object created from the loaded CSV file.
A function that returns the color from the range of colors for the numeric value passed as its argument.
The extent of the data range, i. e. minimum and maximum value in the given column of the CSV data file.