146 lines
3.7 KiB
HTML
146 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>d3-heatmap2</title>
|
||
|
|
|
||
|
|
<!-- Bootstrap -->
|
||
|
|
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
|
||
|
|
|
||
|
|
<!-- d3-heatmap2 -->
|
||
|
|
<link href='/static/css/d3-heatmap2.css' rel='stylesheet' type='text/css'>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Space out content a bit */
|
||
|
|
body {
|
||
|
|
padding-top: 20px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Custom page header */
|
||
|
|
.header {
|
||
|
|
padding-bottom: 20px;
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
border-bottom: 1px solid #e5e5e5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Make the masthead heading the same height as the navigation */
|
||
|
|
.header h3 {
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 0;
|
||
|
|
line-height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Customize container */
|
||
|
|
.container {
|
||
|
|
max-width: 960px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div id="chart"></div>
|
||
|
|
<div id="details"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- D3.js -->
|
||
|
|
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
|
||
|
|
|
||
|
|
<!-- d3-heatmap2 -->
|
||
|
|
<script src="/static/js/d3-heatmap2.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var chart = null
|
||
|
|
var selectStart = null
|
||
|
|
var selectEnd = null
|
||
|
|
|
||
|
|
function select(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]) { // column is higher
|
||
|
|
chart.setHighlight([{"start": selectStart, "end": cell}])
|
||
|
|
chart.updateHighlight()
|
||
|
|
} else if (cell[0] = selectStart[0]) { // same column
|
||
|
|
if (cell[1] >= selectStart[1]) { // row is higher or equal
|
||
|
|
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()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const dataset = {{ dataset|safe }}
|
||
|
|
// d3.values(dataset, function(error, data) {
|
||
|
|
// d3.json("/static/data.json", function(error, data) {
|
||
|
|
const r = function(error, data) {
|
||
|
|
if (error) return console.warn(error)
|
||
|
|
function onClick(d, i, j) {
|
||
|
|
console.info("Clicked on range " + data.columns[j] + ", time " + data.rows[i] + ", current cell " + d)
|
||
|
|
select([i, j])
|
||
|
|
}
|
||
|
|
|
||
|
|
function onMouseOver(d, i, j) {
|
||
|
|
document.getElementById("details").innerHTML = "time: " + data.rows[i] + ", range: " + data.columns[j] + ", current cell: " + d
|
||
|
|
hover([i, j])
|
||
|
|
}
|
||
|
|
|
||
|
|
const max = Math
|
||
|
|
.round(3/2* Math
|
||
|
|
.max.apply(Math, dataset.values.map(function (r) {return Math.max.apply(Math, r);})));
|
||
|
|
chart = d3.heatmap()
|
||
|
|
.title("")
|
||
|
|
.subtitle("")
|
||
|
|
.legendLabel("Count")
|
||
|
|
.width(900)
|
||
|
|
// .xAxisScale([0,12])
|
||
|
|
// .yAxisScale([0,24])
|
||
|
|
.xAxisLabels(data.rows)
|
||
|
|
.yAxisLabels(data.columns)
|
||
|
|
.highlightColor('#936EB5')
|
||
|
|
.highlightOpacity('0.4')
|
||
|
|
.onClick(onClick)
|
||
|
|
.onMouseOver(onMouseOver)
|
||
|
|
.colorScale(d3.scaleLinear()
|
||
|
|
.domain([0, max/2, max])
|
||
|
|
.range(['#F5F5DC', '#FF5032', '#E50914'])
|
||
|
|
)
|
||
|
|
.margin({
|
||
|
|
top: 40,
|
||
|
|
right: 0,
|
||
|
|
bottom: 10,
|
||
|
|
left: -20
|
||
|
|
})
|
||
|
|
|
||
|
|
d3.select("#chart")
|
||
|
|
.datum(data.values)
|
||
|
|
.call(chart)
|
||
|
|
}(null, dataset);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|