Skip to content

Instantly share code, notes, and snippets.

@KoGor

KoGor/.block

Last active February 15, 2018 17:08
Show Gist options
  • Save KoGor/5ffc6ac508f55433bd0b89d9f0aaf07e to your computer and use it in GitHub Desktop.
Save KoGor/5ffc6ac508f55433bd0b89d9f0aaf07e to your computer and use it in GitHub Desktop.
Download ZIP
Radial Opposing Stacked Bar Chart I
Raw
.block
license: gpl-3.0
height: 800
Raw
README.md

Radial opposing stacked bar chart for two data columns.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="800" font-family="sans-serif" font-size="10"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
innerRadius = 210,
outerRadius = Math.min(width, height) / 2.5,
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var xScaleOffset = Math.PI * 75/180;
var x = d3.scaleBand()
.range([xScaleOffset, 2 * Math.PI + xScaleOffset])
.align(0);
var y = d3.scaleLinear()
.range([innerRadius, outerRadius]);
var z = d3.scaleOrdinal()
.range(["#a1d76a", "#91bfdb"]);
var zClasses = ['внешняя сторона', 'внутренняя сторона'];
d3.csv("simple_stat.csv", function(d, i, columns) {
d.left_lane = (-d.left_lane);
d.right_lane = (+d.right_lane);
return d;
}, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.km; }));
y.domain([0, d3.max(data, function(d) { return Math.abs(d.left_lane); }) + d3.max(data, function(d) { return Math.abs(d.right_lane); })]);
z.domain(data.columns.slice(1));
// Accidents
g.append('g')
.selectAll("g")
.data(d3.stack().keys(data.columns.slice(1)).offset(stackOffsetOpposing)(data))
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("path")
.data(function(d) { return d; })
.enter().append("path")
.attr("d", d3.arc()
.innerRadius(function(d) { return y(d[0]); })
.outerRadius(function(d) { return y(d[1]); })
.startAngle(function(d) { return x(d.data.km); })
.endAngle(function(d) { return x(d.data.km) + x.bandwidth(); })
.padAngle(0.01)
.padRadius(innerRadius));
// Labels for xAxis
var label = g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "rotate(" + ((x(d.km) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")translate(" + y(0) + ",0)"; });
label.append("line")
.attr("x2", function(d) { return (((d.km % 5) == 0) | (d.km == '1')) ? -7 : -4 })
.attr("stroke", "#000");
label.append("text")
.attr("transform", function(d) { return (x(d.km) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI ? "rotate(90)translate(0,16)" : "rotate(-90)translate(0,-9)"; })
.text(function(d) {
var xlabel = (((d.km % 5) == 0) | (d.km == '1')) ? d.km : '';
return xlabel; });
//yAxis and Mean
var yAxis = g.append("g")
.attr("text-anchor", "middle");
// Max tick must match max y value!
var yTicksValues = d3.ticks(0, 40, 4);
var borderTick = yTicksValues.slice(-1)[0];
var yTick = yAxis
.selectAll("g")
.data(yTicksValues)
.enter().append("g");
yTick.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccdcea")
.attr("r", y);
// Hallo
yTick.append("text")
.attr("y", function(d) { return -y(d); })
.attr("dy", "0.35em")
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 5)
.text(function(d, i) {
var format = y.tickFormat(5, "s")((d > borderTick/2) == true ? (borderTick - 10 * i) : 10*i);
return ((d == 0) | (d == borderTick)) ? '' : format;
});
// Text
yTick.append("text")
.attr("y", function(d) { return -y(d); })
.attr("dy", "0.35em")
.text(function(d, i) {
var format = y.tickFormat(5, "s")((d > borderTick/2) == true ? (borderTick - 10 * i) : 10*i);
return ((d == 0) | (d == borderTick)) ? '' : format;
});
yAxis.append("text")
.attr("y", function(d) { return -y(yTicksValues.pop()); })
.attr("dy", "-2em")
.text("МКАД, аварийность");
// Legend
var legend = g.append("g")
.selectAll("g")
.data(zClasses)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(-50," + (i - (zClasses.length - 1) / 2) * 25+ ")"; });
legend.append("circle")
.attr("r", 8)
.attr("fill", z);
legend.append("text")
.attr("x", 15)
.attr("y", 0)
.attr("dy", "0.35em")
.text(function(d) { return d; });
});
function stackOffsetOpposing(series, order) {
// Check if no staks (amount of series < 1)
if (!((n = series.length) > 1)) return;
// find max sum
var stackSums = [];
var stackMaxes = [];
for (var i = 0, n = series.length; i < n; i++) {
var stackMax = d3.max(series[i], function(d) { return Math.abs(d[1] - d[0])});
stackMaxes.push(stackMax);
}
var max = d3.sum(stackMaxes);
// Redifining baselines
for (var i, j = 0, d, dy, yp, yn, n, m = series[order[0]].length; j < m; ++j) {
for (yp = 0, yn = max, i = 0; i < n; ++i) {
if ((dy = (d = series[order[i]][j])[1] - d[0]) >= 0) {
//d[0] -bottom; d[1] -top
d[0] = yp, d[1] = yp += dy;
} else if (dy < 0) {
d[1] = yn;
yn += dy;
d[0] = yn;
} else {
d[0] = yp;
}
}
}
}
</script>
Raw
simple_stat.csv
km left_lane right_lane
1 6 3
2 1 16
3 19 11
4 13 17
5 9 3
6 17 14
7 5 20
8 12 1
9 19 6
10 8 0
11 10 4
12 6 19
13 18 1
14 18 12
15 14 0
16 18 16
17 14 7
18 18 20
19 1 6
20 20 1
21 16 19
22 6 1
23 7 18
24 15 0
25 8 1
26 6 8
27 14 13
28 13 18
29 4 3
30 0 17
31 9 5
32 11 7
33 2 13
34 7 16
35 4 3
36 11 17
37 3 9
38 9 3
39 2 19
40 2 16
41 18 3
42 13 2
43 8 14
44 15 4
45 10 14
46 1 15
47 12 0
48 4 0
49 20 14
50 14 6
51 4 2
52 16 13
53 20 8
54 11 20
55 10 13
56 8 9
57 17 8
58 4 6
59 0 7
60 1 11
61 5 2
62 10 12
63 12 18
64 8 16
65 17 7
66 17 0
67 19 12
68 0 17
69 6 3
70 1 10
71 2 12
72 3 7
73 15 13
74 10 6
75 18 12
76 4 6
77 12 0
78 10 12
79 9 7
80 12 14
81 3 18
82 13 9
83 7 6
84 3 5
85 3 9
86 18 20
87 12 15
88 0 17
89 2 5
90 13 1
91 1 7
92 8 8
93 2 14
94 14 5
95 16 4
96 19 0
97 10 5
98 15 16
99 20 18
100 16 9
101 16 6
102 1 10
103 20 16
104 10 20
105 12 16
106 17 7
107 15 5
108 4 16
109 7 20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment