Skip to content

Instantly share code, notes, and snippets.

@KoGor

KoGor/.block

Last active February 15, 2018 16:40
Show Gist options
  • Save KoGor/c53f7edd768b607cdd994cfd645c2d09 to your computer and use it in GitHub Desktop.
Save KoGor/c53f7edd768b607cdd994cfd645c2d09 to your computer and use it in GitHub Desktop.
Download ZIP
Radial Double Bar Chart
Raw
.block
license: gpl-3.0
height: 800
Raw
README.md

Radial double 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 = 180,
outerRadius = Math.min(width, height) / 2,
borderRadius = innerRadius + (outerRadius - innerRadius) / 2,
dmz = 60,
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 y1 = d3.scaleLinear()
.range([innerRadius, borderRadius - dmz/2]);
var y2 = d3.scaleLinear()
.range([borderRadius, outerRadius - dmz/2]);
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; }));
y1.domain([0, d3.max(data, function(d) { return d.left_lane; })]);
y2.domain([0, d3.max(data, function(d) { return d.right_lane; })]);
ringChart(data, 'left_lane', x, y1, z, g, innerRadius, d3.ticks(0, 20, 4), '');
ringChart(data, 'right_lane', x, y2, z, g, borderRadius, d3.ticks(0, 20, 4), 'МКАД, аварийность');
function ringChart(data, key, x, y, z, g, baseRadius, ticks, tittle) {
var meanAccidents = d3.mean(data, function(d) { return d[key]; });
// Accidents
var lane = g.append('g')
.selectAll("path")
.data(data)
.enter().append("path")
.attr("fill", function(d) { return z(key); })
.attr("d", d3.arc()
.innerRadius(function(d) { return y(0); })
.outerRadius(function(d) { return y(d[key]); })
.startAngle(function(d) { return x(d.km); })
.endAngle(function(d) { return x(d.km) + x.bandwidth(); })
.padAngle(0.01)
.padRadius(innerRadius));
//yAxis and Mean
var yAxis = g.append("g")
.attr("text-anchor", "middle");
var yTicksValues = ticks;
console.log('Среднее: ', meanAccidents);
// Mean value line
var yMeanTick = yAxis
.append("g")
.datum([meanAccidents]);
yMeanTick.append("circle")
.attr("fill", "none")
.attr("stroke", "#C0625E")
.attr("stroke-dasharray", "5 3")
.attr("r", y);
var yTick = yAxis
.selectAll("g")
.data(yTicksValues)
.enter().append("g");
yTick.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccdcea")
.attr("r", y);
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(y.tickFormat(5, "s"));
yTick.append("text")
.attr("y", function(d) { return -y(d); })
.attr("dy", "0.35em")
.text(y.tickFormat(5, "s"));
yAxis.append("text")
.attr("y", function(d) { return -y(yTicksValues.pop()); })
.attr("dy", "-2em")
.text(tittle);
// 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(" + baseRadius + ",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; });
};
// 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; });
});
</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