d3-heatmap2/src/main.js at master · spiermar/d3-heatmap2 · 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
/* global document */
import { select } from "d3-selection"
import { scaleLinear } from "d3-scale"
import { format } from "d3-format"
import { json } from "d3-fetch"
import heatmap from "../lib/heatmap.js"

var chart = null
var selectStart = null
var selectEnd = null
var invertHighlightRows = false
var width = 900

function selectCell(cell) {
    if (!selectStart) {
        selectStart = cell
        chart.setHighlight([{ start: selectStart, end: selectStart }])
        chart.updateHighlight()
    } else if (!selectEnd) {
        selectEnd = cell
        chart.setHighlight([{ start: selectStart, end: selectEnd }])
        chart.updateHighlight()
    } else {
        selectStart = cell
        selectEnd = null
        chart.setHighlight([{ start: selectStart, end: selectStart }])
        chart.updateHighlight()
    }
}

function hover(cell) {
    if (selectStart && !selectEnd) {
        if (cell[0] > selectStart[0]) {
            chart.setHighlight([{ start: selectStart, end: cell }])
            chart.updateHighlight()
        } else if (cell[0] == selectStart[0]) {
            if (!invertHighlightRows) {
                if (cell[1] >= selectStart[1]) {
                    chart.setHighlight([{ start: selectStart, end: cell }])
                    chart.updateHighlight()
                } else {
                    chart.setHighlight([{ start: selectStart, end: selectStart }])
                    chart.updateHighlight()
                }
            } else {
                if (cell[1] <= selectStart[1]) {
                    chart.setHighlight([{ start: selectStart, end: cell }])
                    chart.updateHighlight()
                } else {
                    chart.setHighlight([{ start: selectStart, end: selectStart }])
                    chart.updateHighlight()
                }
            }
        } else {
            chart.setHighlight([{ start: selectStart, end: selectStart }])
            chart.updateHighlight()
        }
    }
}

json("data.json").then(function (data) {
    function onClick(d, i, j) {
        console.info("Clicked on range " + data.rows[j] + ", time " + data.columns[i] + ", count " + d)
        selectCell([i, j])
    }

    function onMouseOver(d, i, j) {
        document.getElementById("details").innerHTML = "time: " + data.columns[i] + ", range: " + data.rows[j] + ", count: " + d
        hover([i, j])
    }

    function onMouseOut(_d, _i, _j) {
        document.getElementById("details").innerHTML = ""
    }

    chart = heatmap()
        .title("")
        .subtitle("")
        .legendLabel("Count")
        .width(width)
        .legendTickFormat(format(".0f"))
        .xAxisScale([0, 121])
        .highlightColor("#936EB5")
        .highlightOpacity("0.4")
        .onClick(onClick)
        .onMouseOver(onMouseOver)
        .onMouseOut(onMouseOut)
        .invertHighlightRows(invertHighlightRows)
        .gridStrokeOpacity(0.5)
        .colorScale(scaleLinear()
            .domain([0, 65 / 2, 65])
            .range(["#F5F5DC", "#FF5032", "#E50914"])
        )
        .margin({
            top: 40,
            right: 0,
            bottom: 10,
            left: 0
        })
        .legendElement("#legend")
        .legendHeight(50)
        .legendMargin({
            top: 10,
            right: 0,
            bottom: 0,
            left: (width - Math.min(width * 0.8, 400)) / 2
        })

    select("#chart")
        .datum(data.values)
        .call(chart)
})