Skip to content

Instantly share code, notes, and snippets.

@KoGor

KoGor/.block

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

Radial column (bar) chart with linear scale.

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) / 3,
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]);
d3.csv("simple_stat.csv", function(d, i, columns) {
d.accidents = (+d.left_lane) + (+d.right_lane);
delete(d.left_lane);delete(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 d.accidents; })]);
var meanAccidents = d3.mean(data, function(d) { return d.accidents; });
// Accidents
g.append('g')
.selectAll("path")
.data(data)
.enter().append("path")
.attr("fill", "#91bfdb")
.attr("d", d3.arc()
.innerRadius(function(d) { return y(0); })
.outerRadius(function(d) { return y(d.accidents); })
.startAngle(function(d) { return x(d.km); })
.endAngle(function(d) { return x(d.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(" + innerRadius + ",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");
var yTicksValues = d3.ticks(0, 50, 5);
console.log('Mean: ', 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("МКАД, аварийность");
});
</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