Skip to content

Instantly share code, notes, and snippets.

@ssmaroju

ssmaroju/RadarChart_dyn.js

Last active May 15, 2017 22:48
Show Gist options
  • Save ssmaroju/88eba1730ec2aaa985590b416a9d82df to your computer and use it in GitHub Desktop.
Save ssmaroju/88eba1730ec2aaa985590b416a9d82df to your computer and use it in GitHub Desktop.
Download ZIP
Wind Speed Probability of Exceedance
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Radar chart</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
overflow: hidden;
margin: 20px 120px 60px 100px;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
#chart {
position: relative; /*absolute;*/
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<h2>Wind Probability of Exceedance</h2>
<p>This plot shows the Wind data at Claire Ridge covering the last 10-20 years. Maximum velocity from the CFD simulations were carried out at this location for two scenarios. Those carried out at a reference speed (10 m above sea
level) of 8.4 m/s and 16.6 m/s.</p>
<p>Calculation of the exceedance speed, i.e. reference speed at 10 m above sea level results in greater than 5 m/s, 10 m/s etc at the location were computed. Finally the % of time the exceedance speed is exceeded is computed and presented in the radar chart.</p>
<div id="body">
<div id="chart"></div>
</div>
<script src="RadarChart_dyn.js"></script>
<script type="text/javascript" src="script_dyn.js"></script>
</body>
</html>
Raw
RadarChart_dyn.js
/**
* Created by smaroju on 3/13/2017.
*/
//Practically all this code comes from https://github.com/alangrafu/radar-chart-d3
//I only made some additions and aesthetic adjustments to make the chart look better
//(of course, that is only my point of view)
//Such as a better placement of the titles at each line end,
//adding numbers that reflect what each circular level stands for
//Not placing the last level and slight differences in color
//
//For a bit of extra information check the blog about it:
//http://nbremer.blogspot.nl/2013/09/making-d3-radar-chart-look-bit-better.html
var RadarChart = {
draw: function(id, d, options){
var cfg = {
radius: 2,
w: 600,
h: 600,
factor: 1,
factorLegend: .80,
levels: 3,
maxValue: 0,
radians: 2 * Math.PI,
opacityArea: 0.5,
ToRight: 5,
TranslateX: 80,
TranslateY: 30,
ExtraWidthX: 100,
ExtraWidthY: 100,
color: d3.scale.category10()
};
if('undefined' !== typeof options){
for(var ind in options){
if('undefined' !== typeof options[ind]){
cfg[ind] = options[ind];
}
}
}
cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i){return d3.max(i.map(function(o){return o.value;}))}));
var allAxis = (d[0].map(function(i, j){return i.axis}));
var total = allAxis.length;
var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2);
var Format = d3.format('%');
d3.select(id).select("svg").remove();
var g = d3.select(id)
.append("svg")
.attr("width", cfg.w+cfg.ExtraWidthX)
.attr("height", cfg.h+cfg.ExtraWidthY)
.append("g")
.attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")");
var tooltip;
//Circular segments
for(var j=0; j<cfg.levels-1; j++){
var levelFactor = cfg.factor*radius*((j+1)/cfg.levels);
g.selectAll(".levels")
.data(allAxis)
.enter()
.append("svg:line")
.attr("x1", function(d, i){return levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total));})
.attr("y1", function(d, i){return levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total));})
.attr("x2", function(d, i){return levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total));})
.attr("y2", function(d, i){return levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total));})
.attr("class", "line")
.style("stroke", "grey")
.style("stroke-opacity", "0.75")
.style("stroke-width", "0.3px")
.attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")");
}
//Text indicating at what % each level is
for(var j=0; j<cfg.levels; j++){
var levelFactor = cfg.factor*radius*((j+1)/cfg.levels);
g.selectAll(".levels")
.data([1]) //dummy data
.enter()
.append("svg:text")
.attr("x", function(d){return levelFactor*(1-cfg.factor*Math.sin(0));})
.attr("y", function(d){return levelFactor*(1-cfg.factor*Math.cos(0));})
.attr("class", "legend")
.style("font-family", "sans-serif")
.style("font-size", "10px")
.attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")")
.attr("fill", "#737373")
.text(Format((j+1)*cfg.maxValue/cfg.levels));
}
series = 0;
var axis = g.selectAll(".axis")
.data(allAxis)
.enter()
.append("g")
.attr("class", "axis");
axis.append("line")
.attr("x1", cfg.w/2)
.attr("y1", cfg.h/2)
.attr("x2", function(d, i){return cfg.w/2*(1-cfg.factor*Math.sin(-i*cfg.radians/total));})
.attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));})
.attr("class", "line")
.style("stroke", "grey")
.style("stroke-width", "1px");
axis.append("text")
.attr("class", "legend")
.text(function(d){return d + String.fromCharCode(176)})
.style("font-family", "sans-serif")
.style("font-size", "11px")
.attr("text-anchor", "middle")
.attr("dy", "1.5em")
.attr("transform", function(d, i){return "translate(0, -10)"})
.attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(-i*cfg.radians/total))-60*Math.sin(-i*cfg.radians/total);})
.attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);});
d.forEach(function(y, x){
dataValues = [];
g.selectAll(".nodes")
.data(y, function(j, i){
dataValues.push([
cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(-i*cfg.radians/total)),
cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
]);
});
dataValues.push(dataValues[0]);
g.selectAll(".area")
.data([dataValues])
.enter()
.append("polygon")
.attr("class", "radar-chart-serie"+series)
.style("stroke-width", "2px")
.style("stroke", cfg.color(series))
.attr("points",function(d) {
var str="";
for(var pti=0;pti<d.length;pti++){
str=str+d[pti][0]+","+d[pti][1]+" ";
}
return str;
})
.style("fill", function(j, i){return cfg.color(series)})
.style("fill-opacity", cfg.opacityArea)
.on('mouseover', function (d){
z = "polygon."+d3.select(this).attr("class");
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", 0.1);
g.selectAll(z)
.transition(200)
.style("fill-opacity", .7);
})
.on('mouseout', function(){
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", cfg.opacityArea);
});
series++;
});
series=0;
/*d.forEach(function(y, x){
g.selectAll(".nodes")
.data(y).enter()
.append("svg:circle")
.attr("class", "radar-chart-serie"+series)
.attr('r', cfg.radius)
.attr("alt", function(j){return Math.max(j.value, 0)})
.attr("cx", function(j, i){
dataValues.push([
cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)),
cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
]);
return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(-i*cfg.radians/total));
})
.attr("cy", function(j, i){
return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total));
})
.attr("data-id", function(j){return j.axis})
.style("fill", cfg.color(series)).style("fill-opacity", .9)
.on('mouseover', function (d){
newX = parseFloat(d3.select(this).attr('cx')) - 10;
newY = parseFloat(d3.select(this).attr('cy')) - 5;
tooltip
.attr('x', newX)
.attr('y', newY)
.text(Format(d.value))
.transition(200)
.style('opacity', 1);
z = "polygon."+d3.select(this).attr("class");
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", 0.1);
g.selectAll(z)
.transition(200)
.style("fill-opacity", .7);
})
.on('mouseout', function(){
tooltip
.transition(200)
.style('opacity', 0);
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", cfg.opacityArea);
})
.append("svg:title")
.text(function(j){return Math.max(j.value, 0)});
series++;
});*/
//Tooltip
tooltip = g.append('text')
.style('opacity', 0)
.style('font-family', 'sans-serif')
.style('font-size', '13px');
}
};
Raw
script_dyn.js
/**
* Created by smaroju on 3/13/2017.
*/
var w = 600,
h = 600;
var colorScale = d3.scale.category10();
//Legend titles
var LegendOptions = ['5 m/s','10 m/s','15 m/s','20 m/s'];
//Data
var t = {
'January': [
[
{axis: 0.0, value: 0.051390299},
{axis: 22.5, value: 0.03989155},
{axis: 45.0, value: 0.028082358},
{axis: 67.5, value: 0.0284898},
{axis: 90.0, value: 0.03195},
{axis: 112.5, value: 0.030067543},
{axis: 135.0, value: 0.046373481},
{axis: 157.5, value: 0.064718014},
{axis: 180.0, value: 0.078227929},
{axis: 202.5, value: 0.08662502},
{axis: 225.0, value: 0.091846214},
{axis: 247.5, value: 0.082526003},
{axis: 270.0, value: 0.07090381},
{axis: 292.5, value: 0.067370698},
{axis: 315.0, value: 0.052120248},
{axis: 337.5, value: 0.053915768}
], [
{axis: 0.0, value: 0.037232325},
{axis: 22.5, value: 0.024603897},
{axis: 45.0, value: 0.015279859},
{axis: 67.5, value: 0.014284505},
{axis: 90.0, value: 0.009782353},
{axis: 112.5, value: 0.006749063},
{axis: 135.0, value: 0.013990055},
{axis: 157.5, value: 0.035793756},
{axis: 180.0, value: 0.057635531},
{axis: 202.5, value: 0.06884312},
{axis: 225.0, value: 0.070206284},
{axis: 247.5, value: 0.064785452},
{axis: 270.0, value: 0.054805145},
{axis: 292.5, value: 0.050920948},
{axis: 315.0, value: 0.034520559},
{axis: 337.5, value: 0.040680118}
], [
{axis: 0.0, value: 0.017558602},
{axis: 22.5, value: 0.009934413},
{axis: 45.0, value: 0.005677596},
{axis: 67.5, value: 0.004242188},
{axis: 90.0, value: 0},
{axis: 112.5, value: 0.000665778},
{axis: 135.0, value: 0.00208453},
{axis: 157.5, value: 0.014251535},
{axis: 180.0, value: 0.032858417},
{axis: 202.5, value: 0.041208366},
{axis: 225.0, value: 0.040094965},
{axis: 247.5, value: 0.036236538},
{axis: 270.0, value: 0.031454792},
{axis: 292.5, value: 0.004563591},
{axis: 315.0, value: 0.017350116},
{axis: 337.5, value: 0.021222717}
], [
{axis: 0.0, value: 0.006650314},
{axis: 22.5, value: 0.002979327},
{axis: 45.0, value: 0.001543716},
{axis: 67.5, value: 0.000788411},
{axis: 90.0, value: 0},
{axis: 112.5, value: 0},
{axis: 135.0, value: 0},
{axis: 157.5, value: 0.003801817},
{axis: 180.0, value: 0.016684872},
{axis: 202.5, value: 0.020827932},
{axis: 225.0, value: 0.019451366},
{axis: 247.5, value: 0.016729599},
{axis: 270.0, value: 0.014878005},
{axis: 292.5, value: 0},
{axis: 315.0, value: 0.007204422},
{axis: 337.5, value: 0.008663799}
]],
'February': [
[
{axis: 0, value: 0.045219552},
{axis: 22.5, value: 0.037003249},
{axis: 45, value: 0.028465886},
{axis: 67.5, value: 0.026435417},
{axis: 90, value: 0.02497},
{axis: 112.5, value: 0.028292421},
{axis: 135, value: 0.040240442},
{axis: 157.5, value: 0.063311771},
{axis: 180, value: 0.084863724},
{axis: 202.5, value: 0.101461368},
{axis: 225, value: 0.117317713},
{axis: 247.5, value: 0.100333411},
{axis: 270, value: 0.082511862},
{axis: 292.5, value: 0.07262414},
{axis: 315, value: 0.057333732},
{axis: 337.5, value: 0.052473173}
],
[
{axis: 0, value: 0.036079112},
{axis: 22.5, value: 0.026131518},
{axis: 45, value: 0.017912881},
{axis: 67.5, value: 0.016633767},
{axis: 90, value: 0.012618235},
{axis: 112.5, value: 0.010748689},
{axis: 135, value: 0.019927182},
{axis: 157.5, value: 0.049370931},
{axis: 180, value: 0.077251327},
{axis: 202.5, value: 0.093719077},
{axis: 225, value: 0.103602311},
{axis: 247.5, value: 0.090069231},
{axis: 270, value: 0.073167722},
{axis: 292.5, value: 0.064062145},
{axis: 315, value: 0.045784282},
{axis: 337.5, value: 0.044670803}
],
[
{axis: 0, value: 0.021126277},
{axis: 22.5, value: 0.013216456},
{axis: 45, value: 0.007610851},
{axis: 67.5, value: 0.006589063},
{axis: 90, value: 0.000544314},
{axis: 112.5, value: 0.002231556},
{axis: 135, value: 0.005030663},
{axis: 157.5, value: 0.025416633},
{axis: 180, value: 0.056275144},
{axis: 202.5, value: 0.071213127},
{axis: 225, value: 0.076527096},
{axis: 247.5, value: 0.065501304},
{axis: 270, value: 0.053439128},
{axis: 292.5, value: 0.012650923},
{axis: 315, value: 0.030123243},
{axis: 337.5, value: 0.029314457}
],
[
{axis: 0, value: 0.012128162},
{axis: 22.5, value: 0.005671649},
{axis: 45, value: 0.001859016},
{axis: 67.5, value: 0.00148967},
{axis: 90, value: 0},
{axis: 112.5, value: 8.77666E-05},
{axis: 135, value: 0.000284309},
{axis: 157.5, value: 0.007898311},
{axis: 180, value: 0.032999255},
{axis: 202.5, value: 0.044822095},
{axis: 225, value: 0.046719781},
{axis: 247.5, value: 0.03975398},
{axis: 270, value: 0.033656379},
{axis: 292.5, value: 0.000190474},
{axis: 315, value: 0.01758481},
{axis: 337.5, value: 0.017496016}
]],
'March': [
[
{axis: 0, value: 0.051079701},
{axis: 22.5, value: 0.04035662},
{axis: 45, value: 0.02873427},
{axis: 67.5, value: 0.026056424},
{axis: 90, value: 0.02268},
{axis: 112.5, value: 0.032171571},
{axis: 135, value: 0.052849558},
{axis: 157.5, value: 0.068700358},
{axis: 180, value: 0.081611637},
{axis: 202.5, value: 0.093565919},
{axis: 225, value: 0.104300804},
{axis: 247.5, value: 0.092527659},
{axis: 270, value: 0.07937271},
{axis: 292.5, value: 0.071244838},
{axis: 315, value: 0.055501769},
{axis: 337.5, value: 0.054217165}
],
[
{axis: 0, value: 0.043079112},
{axis: 22.5, value: 0.028366678},
{axis: 45, value: 0.015635129},
{axis: 67.5, value: 0.013566059},
{axis: 90, value: 0.008769412},
{axis: 112.5, value: 0.009541412},
{axis: 135, value: 0.019850939},
{axis: 157.5, value: 0.044647646},
{axis: 180, value: 0.067421257},
{axis: 202.5, value: 0.081500907},
{axis: 225, value: 0.087387065},
{axis: 247.5, value: 0.079235719},
{axis: 270, value: 0.067035876},
{axis: 292.5, value: 0.059785087},
{axis: 315, value: 0.042584282},
{axis: 337.5, value: 0.046370803}
],
[
{axis: 0, value: 0.024023252},
{axis: 22.5, value: 0.012694094},
{axis: 45, value: 0.006913115},
{axis: 67.5, value: 0.005240885},
{axis: 90, value: 0.000172157},
{axis: 112.5, value: 0.000449467},
{axis: 135, value: 0.001738398},
{axis: 157.5, value: 0.018645138},
{axis: 180, value: 0.04198948},
{axis: 202.5, value: 0.054042893},
{axis: 225, value: 0.055948267},
{axis: 247.5, value: 0.050233512},
{axis: 270, value: 0.043691532},
{axis: 292.5, value: 0.007696658},
{axis: 315, value: 0.026812645},
{axis: 337.5, value: 0.029574929}
],
[
{axis: 0, value: 0.006401579},
{axis: 22.5, value: 0.002178737},
{axis: 45, value: 0.001463388},
{axis: 67.5, value: 0.000746094},
{axis: 90, value: 0},
{axis: 112.5, value: 8.77666E-05},
{axis: 135, value: 0.000246077},
{axis: 157.5, value: 0.004909519},
{axis: 180, value: 0.020745524},
{axis: 202.5, value: 0.028602611},
{axis: 225, value: 0.028985574},
{axis: 247.5, value: 0.024732776},
{axis: 270, value: 0.021550463},
{axis: 292.5, value: 0},
{axis: 315, value: 0.012712987},
{axis: 337.5, value: 0.01226226}
]],
'April': [
[
{axis: 0, value: 0.064206567},
{axis: 22.5, value: 0.054363199},
{axis: 45, value: 0.043610226},
{axis: 67.5, value: 0.045665191},
{axis: 90, value: 0.04995},
{axis: 112.5, value: 0.039346931},
{axis: 135, value: 0.053518398},
{axis: 157.5, value: 0.062287564},
{axis: 180, value: 0.065157704},
{axis: 202.5, value: 0.069250023},
{axis: 225, value: 0.068946214},
{axis: 247.5, value: 0.064243813},
{axis: 270, value: 0.056439827},
{axis: 292.5, value: 0.057444838},
{axis: 315, value: 0.045585058},
{axis: 337.5, value: 0.057393772}
],
[
{axis: 0, value: 0.050170628},
{axis: 22.5, value: 0.036311436},
{axis: 45, value: 0.02511452},
{axis: 67.5, value: 0.02461059},
{axis: 90, value: 0.017987647},
{axis: 112.5, value: 0.006962867},
{axis: 135, value: 0.012976685},
{axis: 157.5, value: 0.030050563},
{axis: 180, value: 0.045574104},
{axis: 202.5, value: 0.053266708},
{axis: 225, value: 0.051705706},
{axis: 247.5, value: 0.049535719},
{axis: 270, value: 0.042994674},
{axis: 292.5, value: 0.041704688},
{axis: 315, value: 0.028095407},
{axis: 337.5, value: 0.044048441}
],
[
{axis: 0, value: 0.027835035},
{axis: 22.5, value: 0.015360115},
{axis: 45, value: 0.006933021},
{axis: 67.5, value: 0.006784896},
{axis: 90, value: 0.000172157},
{axis: 112.5, value: 0.000166311},
{axis: 135, value: 0.000475359},
{axis: 157.5, value: 0.007887206},
{axis: 180, value: 0.018808596},
{axis: 202.5, value: 0.026958366},
{axis: 225, value: 0.025426347},
{axis: 247.5, value: 0.025299967},
{axis: 270, value: 0.023556002},
{axis: 292.5, value: 0.002454264},
{axis: 315, value: 0.013365105},
{axis: 337.5, value: 0.024322717}
],
[
{axis: 0, value: 0.012027211},
{axis: 22.5, value: 0.005561017},
{axis: 45, value: 0.002613115},
{axis: 67.5, value: 0.001576823},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0.000731372},
{axis: 180, value: 0.006044438},
{axis: 202.5, value: 0.009050657},
{axis: 225, value: 0.007480601},
{axis: 247.5, value: 0.008883679},
{axis: 270, value: 0.010711461},
{axis: 292.5, value: 0},
{axis: 315, value: 0.004663538},
{axis: 337.5, value: 0.010229772}
]],
'May': [
[
{axis: 0, value: 0.066840746},
{axis: 22.5, value: 0.056199754},
{axis: 45, value: 0.044015379},
{axis: 67.5, value: 0.044481163},
{axis: 90, value: 0.05218},
{axis: 112.5, value: 0.032272997},
{axis: 135, value: 0.044018398},
{axis: 157.5, value: 0.053567503},
{axis: 180, value: 0.05376886},
{axis: 202.5, value: 0.058252299},
{axis: 225, value: 0.058581639},
{axis: 247.5, value: 0.058924348},
{axis: 270, value: 0.055601351},
{axis: 292.5, value: 0.060493117},
{axis: 315, value: 0.0494836},
{axis: 337.5, value: 0.06090922}
],
[
{axis: 0, value: 0.041425255},
{axis: 22.5, value: 0.027644315},
{axis: 45, value: 0.018270023},
{axis: 67.5, value: 0.018755208},
{axis: 90, value: 0.013856078},
{axis: 112.5, value: 0.00217817},
{axis: 135, value: 0.004678674},
{axis: 157.5, value: 0.019075793},
{axis: 180, value: 0.031205539},
{axis: 202.5, value: 0.037552205},
{axis: 225, value: 0.035665027},
{axis: 247.5, value: 0.037324548},
{axis: 270, value: 0.035662828},
{axis: 292.5, value: 0.037715162},
{axis: 315, value: 0.026184888},
{axis: 337.5, value: 0.038905583}
],
[
{axis: 0, value: 0.01725564},
{axis: 22.5, value: 0.009854307},
{axis: 45, value: 0.006086417},
{axis: 67.5, value: 0.004189583},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0.000146133},
{axis: 157.5, value: 0.00271479},
{axis: 180, value: 0.009981955},
{axis: 202.5, value: 0.015450023},
{axis: 225, value: 0.014662084},
{axis: 247.5, value: 0.01385903},
{axis: 270, value: 0.013578288},
{axis: 292.5, value: 0.000515262},
{axis: 315, value: 0.009645725},
{axis: 337.5, value: 0.016906787}
],
[
{axis: 0, value: 0.004819301},
{axis: 22.5, value: 0.001681099},
{axis: 45, value: 0.001437158},
{axis: 67.5, value: 0.000717882},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0.000289355},
{axis: 180, value: 0.002453732},
{axis: 202.5, value: 0.004206497},
{axis: 225, value: 0.003995191},
{axis: 247.5, value: 0.003591839},
{axis: 270, value: 0.003293716},
{axis: 292.5, value: 0},
{axis: 315, value: 0.001507184},
{axis: 337.5, value: 0.004530496}
]],
'June': [
[
{axis: 0, value: 0.075324478},
{axis: 22.5, value: 0.05442315},
{axis: 45, value: 0.033239344},
{axis: 67.5, value: 0.032266753},
{axis: 90, value: 0.03685},
{axis: 112.5, value: 0.021685793},
{axis: 135, value: 0.032222873},
{axis: 157.5, value: 0.046042938},
{axis: 180, value: 0.053817254},
{axis: 202.5, value: 0.061079586},
{axis: 225, value: 0.062206276},
{axis: 247.5, value: 0.067216388},
{axis: 270, value: 0.067677196},
{axis: 292.5, value: 0.071765536},
{axis: 315, value: 0.054474802},
{axis: 337.5, value: 0.06831437}
],
[
{axis: 0, value: 0.048291964},
{axis: 22.5, value: 0.027372633},
{axis: 45, value: 0.013792506},
{axis: 67.5, value: 0.012361372},
{axis: 90, value: 0.00649},
{axis: 112.5, value: 0.000828357},
{axis: 135, value: 0.001757901},
{axis: 157.5, value: 0.011628199},
{axis: 180, value: 0.026096959},
{axis: 202.5, value: 0.035378616},
{axis: 225, value: 0.035437354},
{axis: 247.5, value: 0.03981311},
{axis: 270, value: 0.040624973},
{axis: 292.5, value: 0.042999352},
{axis: 315, value: 0.025590209},
{axis: 337.5, value: 0.045576386}
],
[
{axis: 0, value: 0.014455577},
{axis: 22.5, value: 0.006751403},
{axis: 45, value: 0.003382123},
{axis: 67.5, value: 0.002195833},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0.001557472},
{axis: 180, value: 0.007212661},
{axis: 202.5, value: 0.012259547},
{axis: 225, value: 0.011380328},
{axis: 247.5, value: 0.013479164},
{axis: 270, value: 0.015886724},
{axis: 292.5, value: 0.00011187},
{axis: 315, value: 0.006241334},
{axis: 337.5, value: 0.01426726}
],
[
{axis: 0, value: 0.002546834},
{axis: 22.5, value: 0.000892912},
{axis: 45, value: 0.000439344},
{axis: 67.5, value: 0.000143576},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0.000194678},
{axis: 180, value: 0.002267029},
{axis: 202.5, value: 0.003333769},
{axis: 225, value: 0.003397596},
{axis: 247.5, value: 0.003075853},
{axis: 270, value: 0.003987431},
{axis: 292.5, value: 0},
{axis: 315, value: 0.000969061},
{axis: 337.5, value: 0.002298913}
]],
'July': [
[
{axis: 0, value: 0.043517164},
{axis: 22.5, value: 0.032403167},
{axis: 45, value: 0.021982358},
{axis: 67.5, value: 0.025132899},
{axis: 90, value: 0.03562},
{axis: 112.5, value: 0.017233184},
{axis: 135, value: 0.02799},
{axis: 157.5, value: 0.056072364},
{axis: 180, value: 0.073786113},
{axis: 202.5, value: 0.07844778},
{axis: 225, value: 0.074947822},
{axis: 247.5, value: 0.075110635},
{axis: 270, value: 0.070202027},
{axis: 292.5, value: 0.069262095},
{axis: 315, value: 0.043247525},
{axis: 337.5, value: 0.046972094}
],
[
{axis: 0, value: 0.028230911},
{axis: 22.5, value: 0.017121477},
{axis: 45, value: 0.009957377},
{axis: 67.5, value: 0.008359896},
{axis: 90, value: 0.003657451},
{axis: 112.5, value: 0.000492723},
{axis: 135, value: 0.00137326},
{axis: 157.5, value: 0.011269959},
{axis: 180, value: 0.034142591},
{axis: 202.5, value: 0.044386857},
{axis: 225, value: 0.042159969},
{axis: 247.5, value: 0.044483144},
{axis: 270, value: 0.041802482},
{axis: 292.5, value: 0.03949601},
{axis: 315, value: 0.022684888},
{axis: 337.5, value: 0.030316764}
],
[
{axis: 0, value: 0.007767423},
{axis: 22.5, value: 0.003610648},
{axis: 45, value: 0.001893208},
{axis: 67.5, value: 0.000846615},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0.000714483},
{axis: 180, value: 0.00524647},
{axis: 202.5, value: 0.011584558},
{axis: 225, value: 0.009185433},
{axis: 247.5, value: 0.010972441},
{axis: 270, value: 0.012716237},
{axis: 292.5, value: 6.78304E-06},
{axis: 315, value: 0.005202576},
{axis: 337.5, value: 0.009962835}
],
[
{axis: 0, value: 0.001560126},
{axis: 22.5, value: 0.000396456},
{axis: 45, value: 0.000204372},
{axis: 67.5, value: 7.17882E-05},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0},
{axis: 180, value: 0.000533514},
{axis: 202.5, value: 0.001872729},
{axis: 225, value: 0.002409781},
{axis: 247.5, value: 0.001957258},
{axis: 270, value: 0.001745287},
{axis: 292.5, value: 0},
{axis: 315, value: 0.000369061},
{axis: 337.5, value: 0.001399094}
]],
'August': [
[
{axis: 0, value: 0.047586269},
{axis: 22.5, value: 0.033503167},
{axis: 45, value: 0.020401327},
{axis: 67.5, value: 0.021138542},
{axis: 90, value: 0.02857},
{axis: 112.5, value: 0.016658775},
{axis: 135, value: 0.026706354},
{axis: 157.5, value: 0.059093808},
{axis: 180, value: 0.08554422},
{axis: 202.5, value: 0.094459124},
{axis: 225, value: 0.097937034},
{axis: 247.5, value: 0.080805987},
{axis: 270, value: 0.059287706},
{axis: 292.5, value: 0.069165536},
{axis: 315, value: 0.055054864},
{axis: 337.5, value: 0.055729819}
],
[
{axis: 0, value: 0.029221335},
{axis: 22.5, value: 0.017680837},
{axis: 45, value: 0.010168384},
{axis: 67.5, value: 0.008699913},
{axis: 90, value: 0.004905294},
{axis: 112.5, value: 0.001071268},
{axis: 135, value: 0.002209392},
{axis: 157.5, value: 0.018108802},
{axis: 180, value: 0.04926256},
{axis: 202.5, value: 0.061285786},
{axis: 225, value: 0.058345301},
{axis: 247.5, value: 0.050546087},
{axis: 270, value: 0.035306261},
{axis: 292.5, value: 0.039689776},
{axis: 315, value: 0.026332289},
{axis: 337.5, value: 0.033995024}
],
[
{axis: 0, value: 0.009058602},
{axis: 22.5, value: 0.004344627},
{axis: 45, value: 0.002633255},
{axis: 67.5, value: 0.001746094},
{axis: 90, value: 8.60784E-05},
{axis: 112.5, value: 0},
{axis: 135, value: 0.000146133},
{axis: 157.5, value: 0.002857625},
{axis: 180, value: 0.014742048},
{axis: 202.5, value: 0.022530993},
{axis: 225, value: 0.019423419},
{axis: 247.5, value: 0.016332843},
{axis: 270, value: 0.011755397},
{axis: 292.5, value: 0.00021187},
{axis: 315, value: 0.00833384},
{axis: 337.5, value: 0.012194693}
],
[
{axis: 0, value: 0.001764556},
{axis: 22.5, value: 0.000694094},
{axis: 45, value: 0.000624044},
{axis: 67.5, value: 0.000243576},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0},
{axis: 157.5, value: 0.000336694},
{axis: 180, value: 0.003660652},
{axis: 202.5, value: 0.005605199},
{axis: 225, value: 0.005122022},
{axis: 247.5, value: 0.003675853},
{axis: 270, value: 0.001936229},
{axis: 292.5, value: 0},
{axis: 315, value: 0.001222653},
{axis: 337.5, value: 0.002431945}
]],
'September': [
[
{axis: 0, value: 0.039944776},
{axis: 22.5, value: 0.028683183},
{axis: 45, value: 0.017012724},
{axis: 67.5, value: 0.024621615},
{axis: 90, value: 0.03566},
{axis: 112.5, value: 0.032211383},
{axis: 135, value: 0.048619779},
{axis: 157.5, value: 0.064961617},
{axis: 180, value: 0.074123274},
{axis: 202.5, value: 0.082588655},
{axis: 225, value: 0.087280835},
{axis: 247.5, value: 0.087478328},
{axis: 270, value: 0.084542962},
{axis: 292.5, value: 0.076396559},
{axis: 315, value: 0.054305881},
{axis: 337.5, value: 0.049998921}
],
[
{axis: 0, value: 0.024513174},
{axis: 22.5, value: 0.013645677},
{axis: 45, value: 0.005513115},
{axis: 67.5, value: 0.00997526},
{axis: 90, value: 0.009719216},
{axis: 112.5, value: 0.003485072},
{axis: 135, value: 0.008574696},
{axis: 157.5, value: 0.034085517},
{axis: 180, value: 0.05257699},
{axis: 202.5, value: 0.063358921},
{axis: 225, value: 0.063213076},
{axis: 247.5, value: 0.066605217},
{axis: 270, value: 0.064747031},
{axis: 292.5, value: 0.057253466},
{axis: 315, value: 0.034570861},
{axis: 337.5, value: 0.034937882}
],
[
{axis: 0, value: 0.009270448},
{axis: 22.5, value: 0.004141723},
{axis: 45, value: 0.000797736},
{axis: 67.5, value: 0.001196354},
{axis: 90, value: 0},
{axis: 112.5, value: 0.0001},
{axis: 135, value: 0.000521492},
{axis: 157.5, value: 0.009858547},
{axis: 180, value: 0.028872754},
{axis: 202.5, value: 0.03594527},
{axis: 225, value: 0.033465761},
{axis: 247.5, value: 0.032142241},
{axis: 270, value: 0.030391532},
{axis: 292.5, value: 0.003957656},
{axis: 315, value: 0.017426346},
{axis: 337.5, value: 0.016706197}
],
[
{axis: 0, value: 0.003046834},
{axis: 22.5, value: 0.000995275},
{axis: 45, value: 6.55738E-06},
{axis: 67.5, value: 7.17882E-05},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 9.21547E-05},
{axis: 157.5, value: 0.001304759},
{axis: 180, value: 0.012641521},
{axis: 202.5, value: 0.016510399},
{axis: 225, value: 0.015048907},
{axis: 247.5, value: 0.013347625},
{axis: 270, value: 0.012217376},
{axis: 292.5, value: 9.04738E-05},
{axis: 315, value: 0.007788953},
{axis: 337.5, value: 0.007264252}
]],
'October': [
[
{axis: 0, value: 0.046156119},
{axis: 22.5, value: 0.039266612},
{axis: 45, value: 0.032354489},
{axis: 67.5, value: 0.030435417},
{axis: 90, value: 0.03028},
{axis: 112.5, value: 0.041880576},
{axis: 135, value: 0.06784663},
{axis: 157.5, value: 0.082528045},
{axis: 180, value: 0.092829775},
{axis: 202.5, value: 0.089906826},
{axis: 225, value: 0.08584541},
{axis: 247.5, value: 0.077574783},
{axis: 270, value: 0.068836693},
{axis: 292.5, value: 0.06272414},
{axis: 315, value: 0.051445756},
{axis: 337.5, value: 0.04986974}
],
[
{axis: 0, value: 0.037528405},
{axis: 22.5, value: 0.028442477},
{axis: 45, value: 0.02174637},
{axis: 67.5, value: 0.018904514},
{axis: 90, value: 0.013010588},
{axis: 112.5, value: 0.01131268},
{axis: 135, value: 0.023019227},
{axis: 157.5, value: 0.051329222},
{axis: 180, value: 0.07394692},
{axis: 202.5, value: 0.077090524},
{axis: 225, value: 0.070527744},
{axis: 247.5, value: 0.066443077},
{axis: 270, value: 0.058778193},
{axis: 292.5, value: 0.053491322},
{axis: 315, value: 0.03810242},
{axis: 337.5, value: 0.041675772}
],
[
{axis: 0, value: 0.021952742},
{axis: 22.5, value: 0.014120328},
{axis: 45, value: 0.00964637},
{axis: 67.5, value: 0.007289063},
{axis: 90, value: 0.000902549},
{axis: 112.5, value: 0.000765245},
{axis: 135, value: 0.002576796},
{axis: 157.5, value: 0.017902456},
{axis: 180, value: 0.041589837},
{axis: 202.5, value: 0.046714324},
{axis: 225, value: 0.040913958},
{axis: 247.5, value: 0.039191906},
{axis: 270, value: 0.036662019},
{axis: 292.5, value: 0.003476309},
{axis: 315, value: 0.019782669},
{axis: 337.5, value: 0.024938646}
],
[
{axis: 0, value: 0.010919301},
{axis: 22.5, value: 0.005071649},
{axis: 45, value: 0.002480874},
{axis: 67.5, value: 0.001717882},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 4.60773E-05},
{axis: 157.5, value: 0.003067503},
{axis: 180, value: 0.017035687},
{axis: 202.5, value: 0.020655856},
{axis: 225, value: 0.018044044},
{axis: 247.5, value: 0.016750234},
{axis: 270, value: 0.017102035},
{axis: 292.5, value: 0},
{axis: 315, value: 0.006059395},
{axis: 337.5, value: 0.010496378}
]],
'November': [
[
{axis: 0, value: 0.055870746},
{axis: 22.5, value: 0.037443298},
{axis: 45, value: 0.019286105},
{axis: 67.5, value: 0.021984635},
{axis: 90, value: 0.0259},
{axis: 112.5, value: 0.036201902},
{axis: 135, value: 0.05701221},
{axis: 157.5, value: 0.078385824},
{axis: 180, value: 0.097129775},
{axis: 202.5, value: 0.100750008},
{axis: 225, value: 0.103459258},
{axis: 247.5, value: 0.090757525},
{axis: 270, value: 0.077250338},
{axis: 292.5, value: 0.0629},
{axis: 315, value: 0.045812909},
{axis: 337.5, value: 0.051462874}
],
[
{axis: 0, value: 0.047906426},
{axis: 22.5, value: 0.029255718},
{axis: 45, value: 0.013945433},
{axis: 67.5, value: 0.014378385},
{axis: 90, value: 0.012101961},
{axis: 112.5, value: 0.01051268},
{axis: 135, value: 0.022787072},
{axis: 157.5, value: 0.055481627},
{axis: 180, value: 0.084405539},
{axis: 202.5, value: 0.089941822},
{axis: 225, value: 0.085715894},
{axis: 247.5, value: 0.079224281},
{axis: 270, value: 0.068013386},
{axis: 292.5, value: 0.056049227},
{axis: 315, value: 0.033795407},
{axis: 337.5, value: 0.045070181}
],
[
{axis: 0, value: 0.028252679},
{axis: 22.5, value: 0.014621296},
{axis: 45, value: 0.005942077},
{axis: 67.5, value: 0.005289583},
{axis: 90, value: 0},
{axis: 112.5, value: 0.000965245},
{axis: 135, value: 0.003698287},
{axis: 157.5, value: 0.025231423},
{axis: 180, value: 0.059863196},
{axis: 202.5, value: 0.060510751},
{axis: 225, value: 0.050398642},
{axis: 247.5, value: 0.047173779},
{axis: 270, value: 0.04274575},
{axis: 292.5, value: 0.005486484},
{axis: 315, value: 0.019457611},
{axis: 337.5, value: 0.027294693}
],
[
{axis: 0, value: 0.012688288},
{axis: 22.5, value: 0.005264561},
{axis: 45, value: 0.001852459},
{axis: 67.5, value: 0.000917882},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 0.000146077},
{axis: 157.5, value: 0.006898311},
{axis: 180, value: 0.03133623},
{axis: 202.5, value: 0.031125989},
{axis: 225, value: 0.023248962},
{axis: 247.5, value: 0.020707492},
{axis: 270, value: 0.019711092},
{axis: 292.5, value: 0},
{axis: 315, value: 0.00891713},
{axis: 337.5, value: 0.012829409}
]],
'December': [
[
{axis: 0, value: 0.055210597},
{axis: 22.5, value: 0.042573273},
{axis: 45, value: 0.029201327},
{axis: 67.5, value: 0.02751849},
{axis: 90, value: 0.02696},
{axis: 112.5, value: 0.033449294},
{axis: 135, value: 0.050424088},
{axis: 157.5, value: 0.065755374},
{axis: 180, value: 0.07893443},
{axis: 202.5, value: 0.097895465},
{axis: 225, value: 0.115007728},
{axis: 247.5, value: 0.091639164},
{axis: 270, value: 0.066789489},
{axis: 292.5, value: 0.06302414},
{axis: 315, value: 0.053933732},
{axis: 337.5, value: 0.055773173}
],
[
{axis: 0, value: 0.043172042},
{axis: 22.5, value: 0.029310517},
{axis: 45, value: 0.018968384},
{axis: 67.5, value: 0.01741684},
{axis: 90, value: 0.013418235},
{axis: 112.5, value: 0.01193451},
{axis: 135, value: 0.021975691},
{axis: 157.5, value: 0.047442784},
{axis: 180, value: 0.067911311},
{axis: 202.5, value: 0.0865719},
{axis: 225, value: 0.09650007},
{axis: 247.5, value: 0.080035719},
{axis: 270, value: 0.058374847},
{axis: 292.5, value: 0.054636309},
{axis: 315, value: 0.042452118},
{axis: 337.5, value: 0.046806827}
],
[
{axis: 0, value: 0.024088028},
{axis: 22.5, value: 0.014589253},
{axis: 45, value: 0.008433021},
{axis: 67.5, value: 0.00703776},
{axis: 90, value: 0.000888627},
{axis: 112.5, value: 0.001514712},
{axis: 135, value: 0.00455674},
{axis: 157.5, value: 0.022444831},
{axis: 180, value: 0.047344081},
{axis: 202.5, value: 0.061567889},
{axis: 225, value: 0.065299391},
{axis: 247.5, value: 0.055350301},
{axis: 270, value: 0.042748775},
{axis: 292.5, value: 0.006498354},
{axis: 315, value: 0.024073887},
{axis: 337.5, value: 0.028062835}
],
[
{axis: 0, value: 0.012332592},
{axis: 22.5, value: 0.00587283},
{axis: 45, value: 0.002059016},
{axis: 67.5, value: 0.001748611},
{axis: 90, value: 0},
{axis: 112.5, value: 0},
{axis: 135, value: 9.21547E-05},
{axis: 157.5, value: 0.007119601},
{axis: 180, value: 0.025542064},
{axis: 202.5, value: 0.032825989},
{axis: 225, value: 0.031556339},
{axis: 247.5, value: 0.025808629},
{axis: 270, value: 0.022307581},
{axis: 292.5, value: 0.000180948},
{axis: 315, value: 0.012560776},
{axis: 337.5, value: 0.014230134}
]
]
};
//Options for the Radar chart, other than default
var myCfg = {
w: w,
h: h,
maxValue: 0.1,
levels: 10,
ExtraWidthX: 300
};
//Call function to draw the Radar chart
//Will expect that data is in %'s
// RadarChart.draw("#chart", t['January'], myCfg);
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
RadarChart.draw("#chart", t[months[0]], myCfg);
////////////////////////////////////////////
/////////// Initiate legend ////////////////
////////////////////////////////////////////
var counter = 1;
var svg = d3.select('#body')
.selectAll('svg')
.append('svg')
.attr("width", w+300)
.attr("height", h);
//Create the title for the legend
var text = svg.append("text")
.attr("class", "title")
.attr('transform', 'translate(90,0)')
.attr("x", w - 70)
.attr("y", 10)
.attr("font-size", "12px")
.attr("fill", "#404040")
.attr("text-anchor", "middle")
.text("% of time the exceedance speed is exceeded in " + months[counter-1].substr(0,3) + ", 2017");
//Initiate Legend
var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 300)
.attr('transform', 'translate(150,20)')
;
//Create colour squares
legend.selectAll('rect')
.data(LegendOptions)
.enter()
.append("rect")
.attr("x", w - 65)
.attr("y", function(d, i){ return i * 20;})
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d, i){ return colorScale(i);})
;
//Create text next to squares
legend.selectAll('text')
.data(LegendOptions)
.enter()
.append("text")
.attr("x", w - 52)
.attr("y", function(d, i){ return i * 20 + 9;})
.attr("font-size", "11px")
.attr("fill", "#737373")
.text(function(d) { return d; })
;
var i = setInterval(function(){
// do your thing
RadarChart.draw("#chart", t[months[counter]], myCfg);
counter++;
////////////////////////////////////////////
/////////// Initiate legend ////////////////
////////////////////////////////////////////
var svg = d3.select('#body')
.selectAll('svg')
.append('svg')
.attr("width", w+300)
.attr("height", h);
//Create the title for the legend
var text = svg.append("text")
.attr("class", "title")
.attr('transform', 'translate(90,0)')
.attr("x", w - 70)
.attr("y", 10)
.attr("font-size", "12px")
.attr("fill", "#404040")
.attr("text-anchor", "middle")
.text("% of time the exceedance speed is exceeded in " + months[counter-1].substr(0,3) + ", 2017");
//Initiate Legend
var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 300)
.attr('transform', 'translate(150,20)')
;
//Create colour squares
legend.selectAll('rect')
.data(LegendOptions)
.enter()
.append("rect")
.attr("x", w - 65)
.attr("y", function(d, i){ return i * 20;})
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d, i){ return colorScale(i);})
;
//Create text next to squares
legend.selectAll('text')
.data(LegendOptions)
.enter()
.append("text")
.attr("x", w - 52)
.attr("y", function(d, i){ return i * 20 + 9;})
.attr("font-size", "11px")
.attr("fill", "#737373")
.text(function(d) { return d; })
;
if(counter === 12) {
counter = 0;
// clearInterval(i);
}
}, 5000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment