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.
This section documents accessors that can/must be set when a d3.geomap object is created.
The topojson file loaded to draw the map units, for example countries on a world map.
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.
The d3.selection for the map object.
In addition to the accessors from d3.geomap, d3.geomap.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 column method.
An array of color values. You can use color brewer schemes available via the
colorbrewer object, e. g.
colorbrewer.OrRd for a sequential orange-red scheme with 9 different color values, which is the default.
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.scale.quantize.
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.