Skip to content

Instantly share code, notes, and snippets.

@basilesimon

basilesimon/.block

Last active June 17, 2017 14:30
Show Gist options
  • Save basilesimon/5e00bd6facd10543b087f78ef02daa82 to your computer and use it in GitHub Desktop.
Save basilesimon/5e00bd6facd10543b087f78ef02daa82 to your computer and use it in GitHub Desktop.
Download ZIP
Line of circles
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/d3-annotation.min.js"></script>
<style>
body { background-color: #fff; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
circle { fill: steelblue; stroke: lightgrey}
g.tick { opacity: .6 }
g path.domain { opacity: .1}
g.tick line { opacity: .1 }
:root {
--annotation-color: #555;
}
.annotation path {
stroke: var(--annotation-color);
fill: none;
}
.annotation path.connector-arrow,
.annotation path.connector-dot,
.title text, .annotation text {
fill: var(--annotation-color);
}
.annotation-note-bg {
fill: rgba(0, 0, 0, 0);
}
.annotation-note-title, text.title {
font-weight: bold;
font-family: sans-serif;
}
.annotation-note-label { font-family: sans-serif; }
h4 { color: #555; margin-top: -1em;}
h4, h1 { margin-left: 20px; }
</style>
</head>
<body>
<h1>Daily Coalition strikes in Iraq and Syria</h1>
<h4>In days, August 2014 to June 2017</h4>
<script>
const width = window.innerWidth;
let data = [];
const radius = d3.scaleLinear().range([0,50]).domain([0,70]);
const opacityScale = d3.scaleSqrt().range([0,.15]).domain([0,100]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", 500);
function render(data, x, annotations) {
let circles = svg.selectAll('circle')
.data(data);
circles
.enter()
.append('circle')
.attr('cx', (d,i) => x(i))
.attr('cy', 100)
.transition()
.attr('r', d => radius(d.t))
.style('opacity', d => opacityScale(d.t));
svg.append('g')
.attr("transform", "translate(0,100)")
.call(d3.axisBottom(x).ticks(5));
const makeAnnotations = d3.annotation()
.type(d3.annotationLabel)
.annotations(annotations)
svg.append("g")
.attr("class", "annotation-group")
.call(makeAnnotations)
};
setTimeout(function() {
d3.csv('only.csv', function(data) {
const x = d3.scaleLinear()
.range([50, width-100])
.domain([0, data.length]);
const annotations = [{
type: d3.annotationCalloutCircle,
note: {
label: "TKTKTKTK",
title: "2017",
wrap: 190
},
subject: {
radius: 40
},
x: x(850),
y: 100,
dy: 50,
dx: -102
},{
type: d3.annotationCalloutCircle,
note: {
label: "CENTCOM reports strikes fortnightly",
title: "2014",
wrap: 130
},
subject: {
radius: 60
},
x: x(110),
y: 100,
dy: 80,
dx: 102
}];
render(data, x, annotations);
});
}, 500);
</script>
</body>
Raw
only.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
t
7
3
4
6
4
1
1
4
1
9
14
15
2
14
6
3
1
2
0
2
3
5
4
8
2
3
1
3
4
2
5
5
5
6
2
2
2
0
2
5
7
2
3
1
5
2
4
29
21
12
12
11
22
8
9
14
9
6
13
28
16
9
9
8
23
23
14
9
25
24
12
8
18
15
19
23
17
11
13
14
14
8
9
14
0
19
14
41
23
36
31
31
24
17
15
55
25
46
27
18
67
11
15
13
16
22
16
9
12
29
24
7
12
17
13
11
15
19
27
11
18
22
11
29
24
26
19
23
31
25
26
34
34
19
18
6
27
34
27
14
17
12
18
26
12
9
12
15
15
13
11
15
14
16
15
15
6
27
21
15
14
31
9
9
14
12
12
16
17
13
14
12
15
13
11
11
17
19
13
19
8
9
14
14
19
29
16
22
15
7
8
14
7
12
15
15
13
15
6
19
16
17
13
17
18
23
21
13
36
28
18
21
15
23
31
21
21
18
19
17
22
13
11
18
14
28
26
18
25
16
31
24
21
26
25
21
25
18
27
28
35
19
17
26
24
22
17
23
15
22
17
17
21
22
21
23
21
29
23
15
13
19
25
11
22
24
22
21
29
16
9
16
28
21
27
23
18
17
28
24
23
38
31
25
22
31
34
27
48
27
33
31
26
31
25
23
28
18
27
31
33
26
32
15
31
41
24
29
19
29
27
15
19
23
29
19
24
31
22
18
26
29
33
27
26
36
25
22
12
18
13
24
21
33
21
15
17
16
28
25
25
22
17
14
22
14
17
11
28
22
29
22
24
23
23
17
23
22
28
27
16
21
24
23
15
25
24
14
18
25
24
19
23
18
17
18
24
16
21
22
15
13
15
13
12
21
25
27
22
25
23
23
31
24
31
28
48
26
27
18
24
23
29
27
42
27
33
26
23
27
18
22
15
14
17
32
26
23
29
31
26
23
25
17
22
16
14
18
18
22
21
14
15
25
32
24
31
21
13
18
15
24
31
26
26
37
26
26
26
26
23
23
24
29
29
35
24
14
16
19
24
23
19
19
14
22
33
23
18
26
31
22
16
17
11
21
14
27
18
21
19
21
25
38
19
26
18
22
22
24
24
27
21
29
14
14
19
18
24
17
14
17
18
15
17
11
22
18
26
16
11
15
25
34
13
26
14
4
24
27
17
26
26
24
25
23
27
26
23
25
18
13
9
21
36
18
26
18
25
24
29
28
14
25
23
22
22
24
27
25
22
22
18
23
17
25
25
29
14
19
23
16
14
12
14
17
17
25
21
17
19
17
25
34
31
24
24
34
32
29
25
23
22
35
25
34
19
31
36
28
26
27
22
27
34
23
36
35
34
28
32
32
24
32
26
16
18
23
23
28
31
19
23
26
23
27
27
18
23
17
23
31
16
17
23
13
22
25
31
21
14
12
17
14
19
16
14
15
25
27
18
14
11
14
21
22
19
14
28
23
18
16
21
14
17
17
17
15
16
22
16
14
6
18
12
14
17
12
14
16
24
25
24
17
25
28
29
22
29
27
27
22
18
24
23
17
34
26
26
27
24
24
26
16
17
18
19
22
18
19
16
25
14
14
18
15
14
11
11
18
9
4
16
16
13
8
18
23
15
27
18
28
24
23
15
21
21
22
18
28
24
23
21
24
17
21
18
23
28
21
21
13
4
8
4
16
21
11
18
23
12
19
27
19
15
7
7
18
13
8
16
25
14
19
12
18
49
48
42
46
52
27
26
24
27
25
29
38
34
34
26
23
17
33
22
21
18
17
23
27
31
26
31
42
19
28
27
23
9
17
15
22
16
41
38
32
25
24
43
28
23
35
17
26
22
24
41
29
26
28
38
36
21
41
24
31
21
16
11
13
17
31
32
22
32
28
22
13
25
24
19
15
23
25
28
29
17
35
14
34
28
29
18
11
16
27
26
29
24
21
26
27
31
16
14
12
29
33
23
33
35
35
47
36
33
39
27
28
42
32
29
18
13
21
32
35
31
31
34
26
36
23
29
32
36
29
25
23
19
42
28
28
29
32
24
33
37
31
36
29
48
28
1
1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment