FandomThroughTheLensOfFanfiction/multiLineChart.js at main · Nimanui/FandomThroughTheLensOfFanfiction · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
"use strict";

var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 800 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("#bulkChart")
    .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 + ")");

function showAnnotations(){
    d3.selectAll("g.annotation-connector, g.annotation-note")
        .transition()
        .duration(3000)
        .delay(function(d, i) { return i * 900; })
        .style("opacity", 100);

    d3.selectAll("g.annotation-connector, g.annotation-note")
        .transition()
        .duration(3000)
        .delay(function(d, i) { return i * 900 + 400; })
        .style("opacity", 0);
}

function init(filename, labelsInput, yaxisLabel){
    d3.csv(filename, function(data) {
        var nestStat = d3.nest()
            .key(function(d) { return d.fandom;})
            .entries(data);

        //console.log(d3.extent(data, function(d) { return d.year; }))
        var _x = d3.scaleLinear()
            .domain([2000,2022])
            .range([ 0, width ]);

        var _y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return +d.fic; })])
            .range([ height, 0 ]);

        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(_x).ticks(11));
        svg.append("g")
            .call(d3.axisLeft(_y));

        //label some axis
        svg.append("text")
        .attr("x", width/2 )
        .attr("y",  _y(0) + margin.bottom - 10)
        .style("text-anchor", "middle")
        .text("Year");

        svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("x", 0 - height/2)
        .attr("y", 0 - margin.left)
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text(yaxisLabel);

        // adding lots of colors
        var res = nestStat.map(function(d){ return d.key })
        var color = d3.scaleOrdinal()
            .domain(res)
            .range(['#7A4988','#367eb6','#4cab4b','#973ea3','#999999','#fe7f10','#fefe30','#a25625','#292929'])

        // path
        //     .attr('stroke-dashoffset', pathLength)
        //     .attr('stroke-dasharray', pathLength);
        // rendering the data
        svg.selectAll(".line")
            .data(nestStat)
            .enter()
            .append("path")
                .attr("fill", "none")
                //.attr("transform",'translate($(margin.left},0)')
                .attr("stroke", function(d){ return color(d.key) })
                .attr("stroke-width", 1.5)
                .attr("d", function(d){
                return d3.line()
                    .x(function(d) { return _x(d.year - -1 * d.month/12); })
                    .y(function(d) { return _y(+d.fic); })
                    (d.values)
                });

        // const pathLength = path.node().getTotalLength();

        var labels = labelsInput.map(function (l) {
            l.note = Object.assign({}, l.note, { title: l.data.title,
                label: l.data.dateText });
            l.subject = { radius: 4 };

            return l;
        })

        const makeAnnotations = d3.annotation().annotations(labels).type(d3.annotationCalloutCircle).accessors({
            x: function x(d) {
                return _x(d.year - -1 * d.month/12);
            },
            y: function y(d) {
                return _y(+d.fic);
            }
            }).on('subjectover', function (annotation) {
                annotation.type.a.selectAll("g.annotation-connector, g.annotation-note").classed("hidden", false);
            }).on('subjectout', function (annotation) {
                annotation.type.a.selectAll("g.annotation-connector, g.annotation-note").classed("hidden", true);
            });

        svg.append("g").attr("class", "annotation-fun").call(makeAnnotations);

        svg.selectAll("g.annotation-connector, g.annotation-note").classed("hidden", true);

        // const transitionPath = d3
        // .transition()
        // .duration(2500);

        // path
        // .attr('stroke-dashoffset', pathLength)
        // .attr('stroke-dasharray', pathLength)
        // .transition(transitionPath)
        // .attr('stroke-dashoffset', 0);

    })
}