dbox-radar

A radar layer for dbox.

Example

var visitors = [
  {"month": "Ene", "state": "Yucatán", "visitors": 121},
  {"month": "Feb", "state": "Yucatán", "visitors": 189},
  {"month": "Mar", "state": "Yucatán", "visitors": 123},
  {"month": "Abr", "state": "Yucatán", "visitors": 70},
  {"month": "May", "state": "Yucatán", "visitors": 40},
  {"month": "Ene", "state": "Quintana Roo", "visitors": 94},
  {"month": "Feb", "state": "Quintana Roo", "visitors": 125},
  {"month": "Mar", "state": "Quintana Roo", "visitors": 201},
  {"month": "Abr", "state": "Quintana Roo", "visitors": 229},
  {"month": "May", "state": "Quintana Roo", "visitors": 248},
  {"month": "Ene", "state": "Puebla", "visitors": 78},
  {"month": "Feb", "state": "Puebla", "visitors": 85},
  {"month": "Mar", "state": "Puebla", "visitors": 104},
  {"month": "Abr", "state": "Puebla", "visitors": 107},
  {"month": "May", "state": "Puebla", "visitors": 133},
  {"month": "Ene", "state": "San Luis Potosí", "visitors": 92},
  {"month": "Feb", "state": "San Luis Potosí", "visitors": 156},
  {"month": "Mar", "state": "San Luis Potosí", "visitors": 182},
  {"month": "Abr", "state": "San Luis Potosí", "visitors": 214},
  {"month": "May", "state": "San Luis Potosí", "visitors": 243}
];

var cfg = {
  bindTo: '#chart',
  size: {
    width: 800,
    height: 600,
    margin: {
      top: 40,
      bottom: 40,
      left: 30,
      right: 30
    },
  },
  data: {raw: visitors},
  legend: {
    enabled: true,
    at: {
      x: 600,
      y: 40
    }
  },
  axesFrom: 'month',
  polygonsFrom: 'state',
  valuesFrom: 'visitors',
  colors: ['red', 'yellow', 'green', 'blue'],
  ticks: 5,
  xAxis: {enabled: false},
  yAxis: {enabled: false},
  axisLabelMargin: 30
};

var chrt = dbox.chart(cfg)
  .layer(dbox.radar)
  .end()
  .draw();

Configuration options

Sample data:

[
  {"month": "Ene", "state": "Yucatán", "visitors": 421},
  {"month": "Feb", "state": "Yucatán", "visitors": 53},
  {"month": "Mar", "state": "Yucatán", "visitors": 28},
  {"month": "Ene", "state": "Quintana Roo", "visitors": 234},
  {"month": "Feb", "state": "Quintana Roo", "visitors": 198},
  {"month": "Mar", "state": "Quintana Roo", "visitors": 201},
  {"month": "Ene", "state": "Puebla", "visitors": 78},
  {"month": "Feb", "state": "Puebla", "visitors": 85},
  {"month": "Mar", "state": "Puebla", "visitors": 104},
  {"month": "Ene", "state": "San Luis Potosí", "visitors": 92},
  {"month": "Feb", "state": "San Luis Potosí", "visitors": 156},
  {"month": "Mar", "state": "San Luis Potosí ", "visitors": 182}
]

legend.at

Default: {x: 20, y: 20}

Set the coordinates of the legend list. Set to an object with top and left properties indicating the position of the first legend, e.g., {x: 40, y: 30}.

axesFrom

Required

What field to obtain the axes from, e.g., 'month'.

polygonsFrom

Required

What field to use to group the data in the chart's polygons representation, e.g., 'state'.

valuesFrom

Required

The field where values are found, e.g., 'visitors'. This value is used to calculate the distance of the current record's point to the center of the chart.

ticks

Default: 10

Tell the underlying D3 scale how many ticks, i.e. circles, you prefer to be displayed (see d3-scale for more details).

transitionDuration

Default: 400

Duration in milliseconds of the transitions of this chart. I you filter() then draw() an (already rendered) chart, this is the time the animation will take until getting to the chart's new visual state.

axisLabelMargin

Default: 24

How far each label will be from it's axis.

defaultStyles

Default: true

Determine whether to use the default styling in the chart. If set to false, this setting will disable almost all the chart's predefined styles.

Style

dbox-radar defines as few styles as possible, so you can manipulate the aspect of the chart in a bunch of aspects. However, some styles such as the stroke color of the axes and ticks, or the font family of every text is written directly to the SVG elements in the chart. The good news is that you can deactivate these defaults by passing the defaultStyles configuration.

Use the following selectors to manipulate the style of the chart:

Selector	Description
circle.tick	The circular levels of the radar
line.axis	The axes of the radar
text.axis-label	The labels of the axes
text.tick-label	The labels the ticks
circle.vertex	The vertexes of the polygons in the chart
polygon.category	The polygons in the chart
rect.tooltip-background	The rect which acts as background for the tooltip
g.tooltip	The tooltip container
g.legend-item	The legend of the chart (one for each polygon)
g.polygon-container	Each polygon and its vertexes are contained in an element like this
g.ticks-labels	Ticks' labels are grouped in this single element
g.ticks	Thicks circles are contained in this single element