-
-
Notifications
You must be signed in to change notification settings - Fork 36
/
bubbleMapLog.html
67 lines (65 loc) · 2.02 KB
/
bubbleMapLog.html
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
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/chart.js@3.0.0/dist/chart.js"></script>
<!-- <script src="https://unpkg.com/chartjs-plugin-datalabels"></script> -->
<script src="../build/index.umd.js"></script>
<script src="https://unpkg.com/papaparse"></script>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas" style="border: 1px solid black"></canvas>
</div>
<script>
Promise.all([
fetch('https://unpkg.com/us-atlas/states-10m.json').then((r) => r.json()),
fetch(
'https://gist.githubusercontent.com/mbostock/9535021/raw/928a5f81f170b767162f8f52dbad05985eae9cac/us-state-capitals.csv'
)
.then((r) => r.text())
.then((d) => Papa.parse(d, { dynamicTyping: true, header: true }).data),
]).then(([us, data]) => {
const states = ChartGeo.topojson.feature(us, us.objects.states).features;
const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
type: 'bubbleMap',
data: {
labels: data.map((d) => d.description),
datasets: [
{
outline: states,
showOutline: true,
backgroundColor: 'steelblue',
data: data.map((d) => Object.assign(d, { value: Math.round(Math.random() * 1000) })),
},
],
},
options: {
plugins: {
legend: {
display: false,
},
datalabels: {
align: 'top',
formatter: (v) => {
return v.description;
},
},
},
scales: {
xy: {
projection: 'albersUsa',
},
r: {
type: 'sizeLogarithmic',
size: [1, 20],
},
},
layout: {
// padding: 20
},
},
});
});
</script>
</body>
</html>