<!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>
<style>
div{
float: left;
border: #eee 1px solid;
margin: 5px;
}
</style>
</head>
<body>
<div id="container1"></div>
<script>
function superformulaGenerator(params) {
var n = 360, step = 1, i = -1, r = 0, dt = 2 * Math.PI / n, t, x, y, points = {x: [], y: []};
d3.range(0, 360, 3).forEach(function(d, i){
t = params.m * (d * dt - Math.PI) / 4;
t = Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(t) / params.a), params.n2) + Math.pow(Math.abs(Math.sin(t) / params.b), params.n3)), -1 / params.n1);
if (t > r) r = t;
points.x.push(Math.round(d*100)/100);
points.y.push(t);
});
points.y = points.y.map(function(d, i){ return Math.round(d / r*100)/100; });
return points;
}
var superformula1 = superformulaGenerator({m: 3, n1: 1, n2: 30, n3: 3, a: 1, b: 1});
var superformula2 = superformulaGenerator({m: 10, n1: 4, n2: -10, n3: 50, a: 1, b: 1});
var superformula3 = superformulaGenerator({m: 10, n1: 3, n2: 0.6, n3: 0, a: 1, b: 1});
var configs = [
{data:[{t:d3.range(0, 360 + 6, 6), r:d3.range(0, 360 + 6, 6).map(function(deg){ return Math.abs(Math.cos(deg * Math.PI / 180));}),color:"none",strokeColor:"peru",geometry:"LinePlot",name:"Figure8"},
{t:d3.range(0, 360 + 6, 6), r:d3.range(0, 360 + 6, 6).map(function(deg){ return Math.abs(0.5 + 0.5 * Math.cos(deg * Math.PI / 180));}),color:"none",strokeColor:"darkviolet",geometry:"LinePlot",name:"Cardioid"},
{t:d3.range(0, 360 + 6, 6), r:d3.range(0, 360 + 6, 6).map(function(deg){ return Math.abs(0.25 + 0.75 * Math.cos(deg * Math.PI / 180));}),color:"none",strokeColor:"deepskyblue",geometry:"LinePlot",name:"Hypercardioid"},
{t:d3.range(0, 360 + 6, 6), r:d3.range(0, 360 + 6, 6).map(function(deg){ return Math.abs(0.7 + 0.3 * Math.cos(deg * Math.PI / 180));}),color:"none",strokeColor:"orangered",geometry:"LinePlot",name:"Subcardioid"},
{t:d3.range(0, 360 + 6, 6), r:d3.range(0, 360 + 6, 6).map(function(deg){ return Math.abs(0.37 + 0.63 * Math.cos(deg * Math.PI / 180));}),color:"none",strokeColor:"green",geometry:"LinePlot",name:"Supercardioid"}],
layout:{title:"Line Chart",orientation:-90,angularAxis:{ticksSuffix:"°"},radialAxis:{ticksSuffix:"dB"},needsEndSpacing:false,backgroundColor:"ghostwhite"}},
{data: [{t: superformula1.x, r: superformula1.y, geometry: µ.DOT, name: 'm12-na.3-nb0-nc10', dotType:"triangle-down", dotSize: 35, opacity: 0.8},
{t: superformula2.x, r: superformula2.y, geometry: µ.DOT, name: 'm19-na100-nb50-nc50', dotType:"cross", dotSize: 35, opacity: 0.8},
{t: superformula3.x, r: superformula3.y, geometry: µ.DOT, name: 'm5-na2-nb7-nc7', dotSize: 35, opacity: 0.8}],
layout: {title: 'Dot Plot', margin: {top: 0, bottom: 0, left: 5, right: 10}, angularAxis: {visible: false}, radialAxis: {visible: false}}},
{data: [{t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'], r: [40, 19, 25, 27, 60, 39, 18, 99], name: 'Layer0', geometry: 'AreaChart', groupId: 0},
{t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'], r: [92, 30, 40, 51, 33, 88, 74, 56], name: 'Layer1', geometry: 'AreaChart', groupId: 0},
{t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'], r: [85, 68, 61, 56, 98, 6, 53, 42], name: 'Layer2', geometry: 'AreaChart', groupId: 0},
{t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'], r: [22, 45, 20, 53, 93, 99, 46, 97], name: 'Layer3', geometry: 'AreaChart', groupId: 0},
{t: ['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'], r: [85, 43, 90, 37, 48, 31, 82, 66], name: 'Layer4', geometry: 'AreaChart', groupId: 0}],
layout: { title: 'Polar Area Chart', width: 350, height: 350, margin: { left: 30, right: 30, top: 30, bottom: 30, pad: 0 },
angularAxis: { domain: null }, font: { family: 'Arial, sans-serif', size: 12, color: 'grey' },
direction: 'clockwise', orientation: 270, barmode: 'stack', backgroundColor: 'ghostwhite', showLegend: false }},
{data: [{t: d3.range(10).map(function(d, i){ return d*36; }), r: d3.range(90).map(function(d, i){ return Math.random()+1; }), geometry: µ.BAR, opacity: 0.8, groupId: 1},
{t: d3.range(10).map(function(d, i){ return d*36; }), r: d3.range(90).map(function(d, i){ return Math.random()+1; }), geometry: µ.BAR, opacity: 0.8, groupId: 1},
{t: d3.range(10).map(function(d, i){ return d*36; }), r: d3.range(90).map(function(d, i){ return Math.random()+1; }), geometry: µ.BAR, opacity: 0.8, groupId: 1},
{t: d3.range(10).map(function(d, i){ return d*36; }), r: d3.range(90).map(function(d, i){ return Math.random()+1; }), geometry: µ.BAR, opacity: 0.8, groupId: 1}],
layout: {title: "Stacked Bar Chart", radialAxis: {domain: [-2, 8], orientation: -90}, angularAxis: {ticksCount: 10}, showLegend: false}},
{data: [{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.AREA, name: 'Area'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.LINE, name: 'Line'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.BAR, name: 'Bar'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.DOT, name: 'Dot'}], layout: {title: "Multiple Types"}},
{data: [{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.LINE, lineInterpolation: 'basis', name: 'basis'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.LINE, lineInterpolation: 'step', name: 'step'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.LINE, lineInterpolation: 'monotone', name: 'monotone'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.LINE, lineInterpolation: 'cardinal', name: 'cardinal'},
{t: [0, 90, 180, 270], r: [10, 20, 30, 40], geometry: µ.LINE, name: 'linear'}], layout: {title: "Line Interpolation"}},
];
configs.forEach(function(_config){
var config = {layout: {width: 400, height: 400}};
µ.util.deepExtend(config, _config);
console.log(JSON.stringify(µ.adapter.plotly().convert(config, true)));
micropolar.Axis().config(config).render(d3.select('body').append('div'));
});
</script>
</body>
</html>