Skip to content

Instantly share code, notes, and snippets.

@tlfrd

tlfrd/.block

Last active October 22, 2019 12:25
Show Gist options
  • Save tlfrd/fd6991b2d1947a3cb9e0bd20053899d6 to your computer and use it in GitHub Desktop.
Save tlfrd/fd6991b2d1947a3cb9e0bd20053899d6 to your computer and use it in GitHub Desktop.
Download ZIP
Radial Line Chart
Raw
.block
license: mit
Raw
README.md

A radial line chart showing how Twitter's stock has changed over the last year - from July 2016 to July 2017. Not particularly useful - both axes need work to improve legibility (and I'm not sure using d3.extent is a good idea here).

Raw
d3-scale-radial.js
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) :
typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) :
(factory(global.d3 = global.d3 || {}, global.d3));
}(this, function(exports, d3Scale) {
'use strict';
function square(x) {
return x * x;
}
function radial() {
var linear = d3Scale.scaleLinear();
function scale(x) {
return Math.sqrt(linear(x));
}
scale.domain = function(_) {
return arguments.length ? (linear.domain(_), scale) : linear.domain();
};
scale.nice = function(count) {
return (linear.nice(count), scale);
};
scale.range = function(_) {
return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt);
};
scale.ticks = linear.ticks;
scale.tickFormat = linear.tickFormat;
return scale;
}
exports.scaleRadial = radial;
Object.defineProperty(exports, '__esModule', {value: true});
}));
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-scale-radial.js"></script>
<style>
text {
font-size: 14px;
font-family: monospace;
}
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var innerRadius = 100,
outerRadius = Math.min(width, height) / 2 - 6;
var parseTime = d3.timeParse("%d-%b-%y");
var formatMonth = d3.timeFormat("%b");
var fullCircle = 2 * Math.PI;
var x = d3.scaleTime()
.range([0, fullCircle]);
var y = d3.scaleRadial()
.range([innerRadius, outerRadius]);
var line = d3.lineRadial()
.angle(function(d) { return x(d.Date); })
.radius(function(d) { return y(d.Close); });
d3.csv("twtr.csv" ,function(d) {
d.Date = parseTime(d.Date);
d.Close = +d.Close;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.Date; }));
y.domain(d3.extent(data, function(d) { return d.Close; }));
var linePlot = g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#4099ff")
.attr("d", line);
var yAxis = g.append("g")
.attr("text-anchor", "middle");
var yTick = yAxis
.selectAll("g")
.data(y.ticks(5))
.enter().append("g");
yTick.append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("opacity", 0.2)
.attr("r", y);
yAxis.append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("opacity", 0.2)
.attr("r", function() { return y(y.domain()[0])});
var labels = yTick.append("text")
.attr("y", function(d) { return -y(d); })
.attr("dy", "0.35em")
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 5)
.attr("stroke-linejoin", "round")
.text(function(d) { return "$" + d; });
yTick.append("text")
.attr("y", function(d) { return -y(d); })
.attr("dy", "0.35em")
.text(function(d) { return "$" + d; });
var xAxis = g.append("g");
var xTick = xAxis
.selectAll("g")
.data(x.ticks(12))
.enter().append("g")
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "rotate(" + ((x(d)) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)";
});
xTick.append("line")
.attr("x2", -5)
.attr("stroke", "#000");
xTick.append("text")
.attr("transform", function(d) {
var angle = x(d);
return ((angle < Math.PI / 2) || (angle > (Math.PI * 3 / 2))) ? "rotate(90)translate(0,22)" : "rotate(-90)translate(0, -15)"; })
.text(function(d) {
return formatMonth(d);
})
.style("font-size", 10)
.attr("opacity", 0.6)
var title = g.append("g")
.attr("class", "title")
.append("text")
.attr("dy", "-0.2em")
.attr("text-anchor", "middle")
.text("Twitter")
var subtitle = g.append("text")
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr("opacity", 0.6)
.text("16/17");
var lineLength = linePlot.node().getTotalLength();
linePlot
.attr("stroke-dasharray", lineLength + " " + lineLength)
.attr("stroke-dashoffset", -lineLength)
.transition()
.duration(2000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0);
});
</script>
</body>
Raw
twtr.csv
Date Open High Low Close Volume
19-Jul-17 20.03 20.21 19.83 20.12 13469807
18-Jul-17 19.76 19.99 19.41 19.98 15554456
17-Jul-17 19.80 20.24 19.73 19.94 24152845
14-Jul-17 19.35 19.97 19.33 19.64 20835473
13-Jul-17 19.54 19.67 19.08 19.32 17517365
12-Jul-17 18.92 19.54 18.91 19.25 30008052
11-Jul-17 18.14 18.66 18.10 18.64 18110911
10-Jul-17 18.05 18.15 17.78 18.08 8606718
7-Jul-17 18.00 18.34 17.97 18.02 13433882
6-Jul-17 17.65 18.58 17.63 17.92 18661111
5-Jul-17 17.68 17.96 17.42 17.82 8816038
3-Jul-17 17.94 18.01 17.41 17.65 9040399
30-Jun-17 17.66 18.08 17.47 17.87 13427025
29-Jun-17 17.93 17.94 17.23 17.65 18796467
28-Jun-17 18.22 18.24 17.75 17.95 17396147
27-Jun-17 18.43 18.60 18.12 18.12 14748853
26-Jun-17 18.55 19.01 18.11 18.29 17421403
23-Jun-17 18.15 18.63 18.15 18.50 24821433
22-Jun-17 17.85 18.38 17.66 18.15 20734456
21-Jun-17 17.11 18.04 17.11 17.78 23734826
20-Jun-17 17.15 17.15 16.84 16.91 8524617
19-Jun-17 16.77 17.08 16.75 17.06 11318878
16-Jun-17 16.75 16.81 16.55 16.67 9939429
15-Jun-17 16.53 16.89 16.46 16.83 11890455
14-Jun-17 17.05 17.13 16.57 16.76 12660518
13-Jun-17 17.12 17.22 16.76 16.97 13224916
12-Jun-17 16.73 17.19 16.27 17.04 20518301
9-Jun-17 17.65 17.66 16.45 16.90 21306172
8-Jun-17 17.44 17.61 17.27 17.59 10550528
7-Jun-17 17.62 17.74 17.30 17.44 15866228
6-Jun-17 18.10 18.15 17.47 17.57 22811819
5-Jun-17 18.29 18.34 18.02 18.23 10576479
2-Jun-17 18.53 18.58 18.22 18.31 9383147
1-Jun-17 18.22 18.66 18.20 18.53 13178576
31-May-17 18.48 18.60 18.08 18.32 17417178
30-May-17 18.21 18.72 18.18 18.43 18190729
26-May-17 17.99 18.30 17.95 18.23 10459358
25-May-17 18.04 18.27 17.94 17.95 9577563
24-May-17 18.10 18.34 17.83 17.98 15565326
23-May-17 18.41 18.51 17.98 18.15 16838535
22-May-17 18.35 18.52 18.27 18.43 11378262
19-May-17 18.68 18.90 18.27 18.35 16157833
18-May-17 18.17 18.61 17.97 18.51 19888987
17-May-17 18.99 19.25 18.22 18.28 30110458
16-May-17 19.38 19.78 19.09 19.49 35728080
15-May-17 18.69 19.32 18.63 19.23 22617484
12-May-17 18.45 19.05 18.34 18.61 22043972
11-May-17 18.63 18.74 18.31 18.39 12475401
10-May-17 18.37 18.56 18.25 18.54 9993885
9-May-17 18.31 18.49 18.20 18.37 12509720
8-May-17 18.68 18.68 18.16 18.31 18963259
5-May-17 18.45 18.72 18.37 18.69 15064320
4-May-17 18.60 18.89 18.36 18.48 24615089
3-May-17 18.37 18.60 18.15 18.57 29810339
2-May-17 17.57 18.53 17.35 18.24 64567849
1-May-17 17.14 17.65 16.97 17.54 47458301
28-Apr-17 16.50 16.79 16.43 16.48 26563886
27-Apr-17 15.80 16.63 15.80 16.61 41158088
26-Apr-17 15.90 16.48 15.76 15.82 79309104
25-Apr-17 14.71 14.96 14.63 14.66 20508038
24-Apr-17 14.70 14.82 14.56 14.71 12779234
21-Apr-17 14.65 14.75 14.41 14.63 13788561
20-Apr-17 14.58 14.75 14.51 14.65 9557311
19-Apr-17 14.44 14.79 14.44 14.54 14268086
18-Apr-17 14.37 14.56 14.27 14.44 9701933
17-Apr-17 14.30 14.55 14.12 14.40 10402739
13-Apr-17 14.49 14.50 14.22 14.30 10554106
12-Apr-17 14.34 14.78 14.26 14.42 12916443
11-Apr-17 14.30 14.40 14.20 14.31 7608797
10-Apr-17 14.30 14.46 14.20 14.36 10005913
7-Apr-17 14.36 14.43 14.25 14.29 8267410
6-Apr-17 14.53 14.62 14.30 14.39 18106706
5-Apr-17 14.61 14.82 14.41 14.53 13823697
4-Apr-17 14.75 14.76 14.58 14.69 8936123
3-Apr-17 14.97 14.98 14.65 14.84 11604887
31-Mar-17 14.93 15.06 14.91 14.95 8402610
30-Mar-17 15.05 15.08 14.90 14.92 8446411
29-Mar-17 14.86 15.06 14.70 15.04 11080006
28-Mar-17 15.00 15.17 14.80 14.94 14839686
27-Mar-17 15.02 15.06 14.75 14.99 10461305
24-Mar-17 15.06 15.37 15.03 15.14 15549218
23-Mar-17 14.99 15.05 14.73 14.93 11631874
22-Mar-17 14.50 14.99 14.32 14.98 21050310
21-Mar-17 15.08 15.10 14.50 14.54 19099006
20-Mar-17 15.11 15.11 14.82 15.09 12501894
17-Mar-17 15.20 15.23 15.03 15.08 10989782
16-Mar-17 15.08 15.28 15.04 15.19 11665929
15-Mar-17 15.25 15.30 14.85 15.03 19381783
14-Mar-17 15.20 15.58 15.15 15.32 15046532
13-Mar-17 15.10 15.27 15.10 15.21 8727459
10-Mar-17 15.23 15.27 14.94 15.12 13702981
9-Mar-17 15.24 15.38 15.03 15.22 10963474
8-Mar-17 15.19 15.36 15.08 15.24 12657128
7-Mar-17 15.52 15.73 15.16 15.18 16718623
6-Mar-17 15.75 15.78 15.50 15.56 11463950
3-Mar-17 15.84 16.10 15.68 15.75 15194477
2-Mar-17 15.77 16.00 15.72 15.79 12401132
1-Mar-17 15.87 15.90 15.58 15.79 18165341
28-Feb-17 16.00 16.04 15.74 15.77 10874175
27-Feb-17 15.93 16.13 15.72 16.06 13645548
24-Feb-17 15.95 15.98 15.85 15.98 9139840
23-Feb-17 16.12 16.27 15.90 16.03 15304539
22-Feb-17 16.40 16.51 16.01 16.08 13606184
21-Feb-17 16.64 16.69 16.30 16.42 16026753
17-Feb-17 16.36 16.62 16.36 16.62 14378181
16-Feb-17 16.69 16.79 16.32 16.35 21636195
15-Feb-17 16.85 16.89 16.30 16.74 35204804
14-Feb-17 15.92 16.60 15.85 16.52 35090746
13-Feb-17 15.63 15.99 15.51 15.81 29143701
10-Feb-17 15.96 16.00 15.50 15.58 73061193
9-Feb-17 17.05 17.12 16.26 16.41 109299298
8-Feb-17 18.77 18.77 18.04 18.72 37419148
7-Feb-17 18.00 18.67 17.99 18.26 26834754
6-Feb-17 17.70 17.97 17.41 17.93 13226687
3-Feb-17 17.72 17.85 17.44 17.61 14431299
2-Feb-17 17.33 17.86 17.12 17.78 19415648
1-Feb-17 17.84 17.92 17.10 17.24 21208131
31-Jan-17 16.95 17.74 16.91 17.62 25869200
30-Jan-17 16.57 17.10 16.41 16.94 18287898
27-Jan-17 16.91 16.97 16.53 16.57 11860596
26-Jan-17 16.86 17.07 16.79 16.81 10092909
25-Jan-17 16.70 16.79 16.59 16.73 10969267
24-Jan-17 16.61 16.66 16.33 16.52 12737164
23-Jan-17 16.57 16.81 16.46 16.61 11791454
20-Jan-17 16.82 16.90 16.46 16.58 14844724
19-Jan-17 17.09 17.15 16.75 16.79 12735487
18-Jan-17 17.01 17.14 16.83 17.11 12715349
17-Jan-17 17.07 17.09 16.86 16.96 13151088
13-Jan-17 17.38 17.66 17.23 17.25 11401444
12-Jan-17 17.13 17.39 16.96 17.38 12375630
11-Jan-17 17.46 17.60 17.17 17.30 10981465
10-Jan-17 17.51 17.78 17.32 17.37 10472834
9-Jan-17 17.22 17.56 17.19 17.50 11918061
6-Jan-17 17.24 17.43 17.11 17.17 14665118
5-Jan-17 16.91 17.27 16.80 17.09 17074353
4-Jan-17 16.50 16.94 16.50 16.86 15861285
3-Jan-17 16.31 16.45 16.21 16.44 11147866
30-Dec-16 16.31 16.57 16.22 16.30 14014531
29-Dec-16 16.39 16.65 16.30 16.39 14697888
28-Dec-16 16.63 16.73 16.29 16.39 13509202
27-Dec-16 16.52 16.87 16.42 16.61 13040453
23-Dec-16 16.34 16.67 16.16 16.50 18049997
22-Dec-16 16.82 16.89 16.27 16.41 27951823
21-Dec-16 17.52 17.55 17.01 17.08 34613928
20-Dec-16 18.23 18.32 17.87 17.92 16801686
19-Dec-16 18.60 18.70 18.22 18.24 12251137
16-Dec-16 18.76 18.89 18.53 18.63 14241736
15-Dec-16 18.94 19.15 18.71 18.79 11957850
14-Dec-16 19.40 19.62 18.89 18.93 13468878
13-Dec-16 18.97 19.59 18.94 19.37 15132159
12-Dec-16 19.48 19.70 18.90 18.93 15612368
9-Dec-16 19.56 19.84 19.38 19.65 15956083
8-Dec-16 19.50 19.71 19.08 19.64 19698311
7-Dec-16 18.26 19.55 18.20 19.48 32188576
6-Dec-16 18.31 18.50 18.13 18.23 14032971
5-Dec-16 17.96 18.36 17.87 18.23 12121693
2-Dec-16 18.00 18.16 17.86 17.93 12208682
1-Dec-16 18.82 18.83 17.74 18.03 19612967
30-Nov-16 18.20 18.80 18.18 18.49 20605390
29-Nov-16 18.22 18.68 18.13 18.19 13549072
28-Nov-16 18.00 18.30 17.85 18.30 19281803
25-Nov-16 18.27 18.31 18.03 18.06 7862681
23-Nov-16 18.45 18.59 18.08 18.22 16979819
22-Nov-16 18.66 18.87 18.51 18.63 10693395
21-Nov-16 18.72 18.91 18.59 18.60 13095559
18-Nov-16 18.73 18.91 18.64 18.73 12503189
17-Nov-16 18.70 18.96 18.53 18.55 16224315
16-Nov-16 18.98 19.15 18.59 18.63 14993344
15-Nov-16 19.15 19.51 18.91 18.98 19557951
14-Nov-16 18.75 19.20 18.50 19.14 23121279
11-Nov-16 18.35 18.73 18.07 18.55 15363776
10-Nov-16 19.04 19.30 18.03 18.37 31099082
9-Nov-16 17.96 19.24 17.91 19.13 34170184
8-Nov-16 18.22 18.56 17.77 18.38 19987464
7-Nov-16 18.11 18.69 18.11 18.41 26006168
4-Nov-16 17.52 18.34 17.50 18.02 30988697
3-Nov-16 17.55 17.86 17.26 17.58 17084589
2-Nov-16 17.43 17.95 17.38 17.61 20963582
1-Nov-16 17.84 18.00 17.26 17.49 22624832
31-Oct-16 17.65 18.04 17.64 17.95 19530470
28-Oct-16 17.70 18.00 17.50 17.66 29383320
27-Oct-16 18.00 18.12 17.07 17.40 63791893
26-Oct-16 17.58 17.66 17.17 17.29 35259271
25-Oct-16 17.82 17.84 17.15 17.26 32456237
24-Oct-16 17.60 18.37 17.49 18.03 41781102
21-Oct-16 16.95 18.35 16.74 18.09 58503852
20-Oct-16 17.04 17.07 16.82 16.90 15124038
19-Oct-16 16.94 17.26 16.88 17.07 17392381
18-Oct-16 16.86 17.13 16.79 16.83 18479753
17-Oct-16 16.76 16.98 16.43 16.73 25800559
14-Oct-16 17.88 18.05 16.28 16.88 73675252
13-Oct-16 17.86 17.99 17.67 17.79 18688297
12-Oct-16 18.19 18.19 17.81 18.05 23535123
11-Oct-16 18.18 18.20 17.65 18.00 49156851
10-Oct-16 17.49 18.24 16.93 17.56 105887343
7-Oct-16 19.95 20.53 19.64 19.85 38675653
6-Oct-16 20.46 21.00 19.60 19.87 109388242
5-Oct-16 24.32 25.25 24.13 24.87 63716832
4-Oct-16 23.75 23.79 23.34 23.52 22230724
3-Oct-16 23.78 24.25 23.46 24.00 37555727
30-Sep-16 23.02 23.25 22.82 23.05 17425201
29-Sep-16 22.92 23.36 22.86 23.01 26459769
28-Sep-16 23.42 23.63 22.44 22.96 44513688
27-Sep-16 23.21 23.98 22.90 23.72 65489542
26-Sep-16 21.79 23.57 21.65 23.37 95403450
23-Sep-16 21.50 22.89 21.11 22.62 192415337
22-Sep-16 18.52 18.92 18.44 18.63 16321143
21-Sep-16 18.44 18.50 18.13 18.49 16211539
20-Sep-16 18.30 18.64 18.23 18.39 15910296
19-Sep-16 19.22 19.24 18.28 18.36 23409732
16-Sep-16 18.90 19.25 18.74 19.11 40346697
15-Sep-16 18.30 18.42 18.06 18.30 14542023
14-Sep-16 17.93 18.39 17.90 18.08 16142107
13-Sep-16 17.99 18.10 17.52 17.76 15890043
12-Sep-16 17.96 18.24 17.68 18.15 18286500
9-Sep-16 18.40 18.82 17.92 18.11 30859215
8-Sep-16 18.81 19.31 18.59 18.70 45229547
7-Sep-16 20.05 20.65 19.80 19.87 26593146
6-Sep-16 19.74 20.14 19.48 19.93 24174808
2-Sep-16 19.62 19.87 19.35 19.55 19891612
1-Sep-16 19.37 20.14 19.27 19.50 39755902
31-Aug-16 18.39 19.60 18.38 19.21 34222625
30-Aug-16 18.59 18.69 18.32 18.38 8908431
29-Aug-16 18.39 18.55 18.30 18.47 11417408
26-Aug-16 18.40 18.53 18.10 18.30 11225899
25-Aug-16 18.33 18.65 18.23 18.32 13276453
24-Aug-16 18.80 18.97 18.20 18.25 16788827
23-Aug-16 18.65 18.93 18.65 18.69 14089337
22-Aug-16 18.95 18.96 18.52 18.55 17497567
19-Aug-16 18.96 19.31 18.76 18.98 17026064
18-Aug-16 19.56 19.60 18.92 19.00 47582533
17-Aug-16 20.43 20.44 19.90 20.17 22762792
16-Aug-16 20.78 20.79 20.29 20.40 23527718
15-Aug-16 19.85 21.10 19.83 20.86 58856771
12-Aug-16 19.71 19.71 19.01 19.54 28403177
11-Aug-16 19.17 19.83 19.11 19.78 30959549
10-Aug-16 18.67 19.57 18.56 19.04 28645020
9-Aug-16 18.17 18.79 17.97 18.68 19311410
8-Aug-16 18.25 18.48 17.94 18.20 15502751
5-Aug-16 18.19 18.58 18.14 18.26 22811743
4-Aug-16 17.57 18.31 17.36 18.13 33119092
3-Aug-16 16.34 17.88 16.33 17.61 55611351
2-Aug-16 16.61 16.70 16.20 16.42 16611322
1-Aug-16 16.65 16.85 16.40 16.64 26053169
29-Jul-16 16.39 16.74 16.24 16.64 26057239
28-Jul-16 15.89 16.34 15.88 16.31 31442403
27-Jul-16 16.34 16.59 15.69 15.77 83161918
26-Jul-16 18.52 18.65 18.16 18.45 44132848
25-Jul-16 18.43 18.70 18.17 18.65 21485283
22-Jul-16 18.12 18.39 17.76 18.37 19639487
21-Jul-16 18.57 18.80 18.35 18.39 13961365
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment