<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
<script type='text/javascript' src="http://micropolar.org/micropolar-v0.2.2.js"></script>
</head>
<body>
<script>
var config = {
"data": [{
"t": ["a", "b", "c", "d"], // theta values (x axis)
"r": [5, 10, 15, 20], // radial values (y axis)
"name": "Layer1", // name for the legend
"visible": true,
"color": "lime", // color of data element
"opacity": 0.8,
"strokeColor": "red",
"strokeDash": "dash", // solid, dot, dash (default)
"strokeSize": 5,
"visibleInLegend": true,
"geometry": "AreaChart" // AreaChart, BarChart, DotPlot, LinePlot (default)
}, {
"t": ["a", "b", "c", "d"],
"r": [10, 20, 30, 40],
"name": "Layer3",
"color": "orange",
"geometry": "BarChart"
}, {
"t": ["a", "b", "c", "d"],
"r": [10, 20, 30, 40],
"name": "Layer4",
"color": "red",
"dotType": "triangle-down", // LinePlot only, cross, diamond, square, triangle-down, triangle-up, circle (default)
"dotSize": 512, // in square pixels https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size
"geometry": "DotPlot"
}, {
"t": ["a", "b", "c", "d"],
"r": [10, 20, 30, 40],
"name": "Layer5",
"color": "none",
"strokeColor": "red",
"geometry": "LinePlot",
"groupId": 0 // when you want to stack geometry, set the same groupId
}, {
"t": ["a", "b", "c", "d"],
"r": [10, 20, 30, 40],
"name": "Layer6",
"color": "none",
"strokeColor": "green",
"geometry": "LinePlot",
"dotVisible": true,
"groupId": 0
}],
"layout": {
"title": "Title", // (default: null)
"height": 500, // (default: 450)
"width": 500, // (default: 500)
"font": { // axes labels font
"size": 31, // (default:12)
"color": "orange", // (default: gray)
"family": "Tahoma, sans-serif", // (default: "Tahoma, sans-serif")
"outlineColor": "red" // (default: white)
},
"direction": "counterclockwise", // clockwise (default), counterclockwise
"orientation": 10, // 0-360 (default: 0, starts at 3 O'clock)
"opacity": 0.8, // 0-1 (default: 1)
"legend": {
"reverseOrder": false // true|false (default: false)
},
"showLegend": true, // (default: true)
"margin": { // in pixel (default: 40)
"top": 60,
"right": 60,
"bottom": 30,
"left": 60
},
"backgroundColor": "ghostwhite", // (default: none)
"radialAxis": {
"domain": µ.DATAEXTENT, // µ.DATAEXTENT alias for null (default) | [min, max] as floats
"orientation": -45, // 0-360 (default: 0)
"visible": true, // true|false (default: true)
"gridLinesVisible": true, // true|false (default: true)
"tickOrientation": 'angular', // 'angular', 'horizontal' (default)
"ticksSuffix": "$" // string (default: '')
},
"angularAxis": {
"domain": null, // µ.DATAEXTENT alias for null (default) | [min, max] as floats
"visible": true, // true|false (default: true)
"gridLinesVisible": true, // true|false (default: true)
"labelsVisible": true, // true|false (default: true)
"tickOrientation": "radial", // radial, angular, horizontal (default)
"ticksSuffix": "%" // string (default: '')
},
"labelOffset": 20, // in pixel (default: 10)
"defaultColorRange": [ // used by geometries
"#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
],
"tickLength": 30, // null (default, means full length) | value in pixel
"tickColor": "orange" // axes, ticks and grid
}
};
micropolar.Axis() // instantiate a new axis
.config(config) // configure it
.render(d3.select('body').append('div')); // render it
</script>
</body>
</html>