minicharts

Polarchart

Represent data with a polar chart

Polar charts are nice looking charts especially on a map, but individual values are hard to compare on these charts: the human eye is good to compare lengths, but not to compare agnles, radius or areas. Polar charts should only be used when one wants to point out qualitative results and does not need a precise representation of data. Another limitation compared to barcharts is that polar charts cannot represent negative values.

Constructor

new Polarchart(el, data, options)

Name Type Description
el string CSS selector representing the element that will hold the chart.
data Array.<number> Data the chart has to represent.
options PolarchartOptions Options controling graphical aspects of the chart.

Options

Name Type Default Description
maxValue number | "auto" "auto" Maximum value data could take.It is important to set this option explicitely if one wants to compare charts and use the same scale on each one. By default it equals to the maximum value of the data.
type "area" | "radius" | "angle" "area" What kind of scale to use to represent the data? `angle` produces a pie chart and should be used only to visualize proportions. In other cases, `area` (the default) should generally be prefered. `radius` should only be used when one wants to magnify differences.
width number 60 Width of the chart.
height number 60 Height of the chart.
transitionTime number 750 Duration of the transitions, in milliseconds.
colors Array.<string> | function d3.schemeCategory10 Either an array of colors or a function `(d, i) -> color` where `d` is a data value and `i` is the index of the value.If it is an array with length less than the length of data, then the colors are recycled.
labels Array.<string> | "none" | "auto" | function "none" Labels to display in slices. It can be an array with same length as the data. It can also be a function `(d, i) -> labelText` where `d` is a data value and `i` is the index of the value. Finally it can be equal to "none" to hide labels or "auto" to display in a compact way values.
labelColors string | Array.<string> | "auto" | function "auto" Color of the labels. It can be a single value or an array with same length as the data. It can also be a function `(d, i) -> color` where `d` is a data value and `i` is the index of the value. Finally it can be equal to "auto". In this case, the most readable color is choosen depding on the color of the slice.
labelMinSize number 8 Label minimum size in pixels. If there is not enough space for a given label, then it is hidden.
labelMaxSize number 24 Label maximum size in pixels.
labelClass string "" Labels CSS class.
shapeClass string "" slices CSS class.

Methods

setData(data)

Update the data represented by the chart
Name Type Description
data Array.<number> Data the chart has to represent.

setOptions(options)

Update the graphical options of a chart
Name Type Description
options PolarchartOptions Options controling graphical aspects of the chart.

update(data, options)

Update simulatenously data and options of a polar chart.
Name Type Description
data Array.<number> Data the chart has to represent.
options PolarchartOptions Options controling graphical aspects of the chart.