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