Basic Radar chart layout code can be found here : /nbremer/6506614
The purpose of this block is to explore the ability to update radar chart axes. This block is not complete, as removing an axis out of order (ie, not at 0 deg) throws off the animation. If anyone knows how to fix this bug, please let me know.
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Axis Addition/Removal</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
overflow: hidden;
margin: 0;
font-size: 14px;
font-family: "proxima_nova_reg", sans-serif;
}
body .add-skill {
position: absolute;
left: 100px;
top: 50px;
height: 20px;
background-color: #a8a8a8;
color: white;
border-radius: 40px;
padding: 8px 16px 7px 13px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#chart {
position: absolute;
left: 100px;
}
.yaxis, .xaxis {
font: 10px sans-serif;
width: 100px;
}
.yaxis path,
.yaxis line,
.yaxis tick {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.xaxis path,
.xaxis line {
fill: none;
stroke: black;
stroke-dasharray: 10,10;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="body">
<div id="chart"></div>
<div class="add-skill">Add New Axis</div>
</div>
</body>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js