Skip to content

Commit a77fdf0

Browse files
rinrikorinriko
committed
add spider
1 parent 158f839 commit a77fdf0

File tree

9 files changed

+21533
-0
lines changed

9 files changed

+21533
-0
lines changed

‎src/spider/.DS_Store‎

6 KB
Binary file not shown.

‎src/spider/RadarBoxplot.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
d3.RadarBox = function () {
2+
let svg;
3+
let g;
4+
let data = [];
5+
let RadarBox ={};
6+
let id;
7+
let cfg ={
8+
width: 600, //Width of the circle
9+
height: 600, //Height of the circle
10+
margin: {top: 10, right: 55, bottom: 0, left: 55}, //The margins of the SVG
11+
levels: 3, //How many levels or inner circles should there be drawn
12+
labelFactor: 1.1, //How much farther than the radius of the outer circle should the labels be placed
13+
minValue:0,
14+
maxValue:1
15+
};
16+
let first = false;
17+
RadarBox.draw = function() {
18+
19+
// remove contain old svg
20+
d3.select(id).selectAll("svg").nodes().forEach(d=>{
21+
if (d3.select(d).attr("class")!==("radarbox"+id.replace(".","")))
22+
d3.select(d).remove();
23+
});
24+
svg = d3.select(id).select(".radar"+id.replace(".",""));
25+
g = svg.select("#radarGroup");
26+
// check exist svg
27+
if (svg.empty()) {
28+
first = true;
29+
svg = d3.select(id).append("svg")
30+
.attr("width", cfg.w + cfg.margin.left + cfg.margin.right)
31+
.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
32+
.attr("class", "radar" + id.replace(".",""));
33+
//Append a g element
34+
g = svg.append("g")
35+
.attr("id","radarGroup")
36+
.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");
37+
}
38+
39+
if (first) {
40+
var allAxis = (data[0].map(function(i, j){return i.axis})), //Names of each axis
41+
total = allAxis.length, //The number of different axes
42+
radius = Math.min(cfg.w/2, cfg.h/2), //Radius of the outermost circle
43+
Format = d3.format(''), //Percentage formatting
44+
// angleSlice = Math.PI * 2 / total; //The width in radians of each "slice"
45+
angle1= Math.PI * 2 / total;
46+
angle2= Math.PI * 2 / (total+4);
47+
angleSlice = [];
48+
for (var i=0;i<total;i++){
49+
if (i==0 || i==1 || i==2) // Temperatures
50+
angleSlice.push(angle2*(i-1));
51+
else if (i==5 || i==6 || i==7 || i==8) // Fan speeds
52+
angleSlice.push(Math.PI/4.62+angle2*(i-1));
53+
else if (i==9) // Power consumption
54+
angleSlice.push(Math.PI * 1.5);
55+
else
56+
angleSlice.push(angle1*(i-1));
57+
} //TOMMY DANG
58+
//Scale for the radius
59+
var rScale = d3.scaleLinear()
60+
.range([0, radius])
61+
.domain([cfg.minValue, cfg.maxValue]);
62+
/////////////////////////////////////////////////////////
63+
////////// Glow filter for some extra pizzazz ///////////
64+
/////////////////////////////////////////////////////////
65+
//Filter for the outside glow
66+
var filter = g.append('defs').append('filter').attr('id', 'glow'),
67+
feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation', '2.5').attr('result', 'coloredBlur'),
68+
feMerge = filter.append('feMerge'),
69+
feMergeNode_1 = feMerge.append('feMergeNode').attr('in', 'coloredBlur'),
70+
feMergeNode_2 = feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
71+
72+
//Filter for the outside glow
73+
var filter = g.append('defs').append('filter').attr('id', 'glow2'),
74+
feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation', '1').attr('result', 'coloredBlur'),
75+
feMerge = filter.append('feMerge'),
76+
feMergeNode_1 = feMerge.append('feMergeNode').attr('in', 'coloredBlur'),
77+
feMergeNode_2 = feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
78+
79+
/////////////////////////////////////////////////////////
80+
/////////////// Draw the Circular grid //////////////////
81+
/////////////////////////////////////////////////////////
82+
83+
//Wrapper for the grid & axes
84+
var axisGrid = g.append("g").attr("class", "axisWrapper");
85+
86+
//Draw the background circles
87+
axisGrid.selectAll(".levels")
88+
.data(d3.range(1, (cfg.levels + 1)).reverse())
89+
.enter()
90+
.append("circle")
91+
.attr("class", "gridCircle")
92+
.attr("r", function (d, i) {
93+
return radius / cfg.levels * d;
94+
})
95+
//.style("fill", function(d){
96+
// var v = (maxValue-minValue) * d/cfg.levels +minValue;
97+
// return colorTemperature(v);
98+
//})
99+
.style("fill", "#CDCDCD")
100+
.style("stroke", function (d) {
101+
var v = (maxValue - minValue) * d / cfg.levels + minValue;
102+
return colorTemperature(v);
103+
})
104+
.style("stroke-width", 0.3)
105+
.style("stroke-opacity", 1)
106+
.style("fill-opacity", cfg.opacityCircles)
107+
.style("filter", "url(#glow)")
108+
.style("visibility", (d, i) => (cfg.bin && i == 0) ? "hidden" : "visible");
109+
110+
/////////////////////////////////////////////////////////
111+
//////////////////// Draw the axes //////////////////////
112+
/////////////////////////////////////////////////////////
113+
114+
//Create the straight lines radiating outward from the center
115+
var axis = axisGrid.selectAll(".axis")
116+
.data(allAxis)
117+
.enter()
118+
.append("g")
119+
.attr("class", "axis");
120+
//Append the lines
121+
axis.append("line")
122+
.attr("x1", 0)
123+
.attr("y1", 0)
124+
.attr("x2", function (d, i) {
125+
return rScale(maxValue * 1.05) * Math.cos(angleSlice[i] - Math.PI / 2);
126+
})
127+
.attr("y2", function (d, i) {
128+
return rScale(maxValue * 1.05) * Math.sin(angleSlice[i] - Math.PI / 2);
129+
})
130+
.attr("class", "line")
131+
.style("stroke", "white")
132+
.style("stroke-width", "1px");
133+
}
134+
135+
}
136+
137+
RadarBox.attrs = function (_) {
138+
if (arguments.length)
139+
for(var i in _){
140+
if('undefined' !== typeof _[i]){ cfg[i] = _[i]; }
141+
}//for i
142+
return RadarBox;
143+
};
144+
145+
RadarBox.attr = function(n, v) {
146+
// debugger;
147+
if (arguments.length < 2 && typeof n === 'string') {
148+
return cfg[n];
149+
} else {
150+
cfg[n] = v;
151+
}
152+
return RadarBox;
153+
};
154+
RadarBox.data = function (_) {
155+
return arguments.length ? (data = _, RadarBox) : data;
156+
157+
};
158+
RadarBox.svg = function (_) {
159+
return arguments.length ? (svg = _, RadarBox) : svg;
160+
161+
};
162+
RadarBox.id = function (_) {
163+
return arguments.length ? (id = _, RadarBox) : id;
164+
165+
};
166+
// Make the DIV element draggable: from W3 code
167+
168+
return RadarBox;
169+
}

0 commit comments

Comments
 (0)