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
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
export default async function(req: Request) {
return new Response(
renderToString(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Insurance Claim Process Mindmap</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
#mindmap { width: 100vw; height: 100vh; }
.node { cursor: pointer; }
.node circle { fill: #fff; stroke: #3182bd; stroke-width: 1.5px; }
.node text { font: 10px sans-serif; }
.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; }
.node-label { font-size: 12px; }
</style>
</head>
<body>
<div id="mindmap"></div>
<script>
const data = {
name: "Insurance Claim Process",
children: [
{
name: "Property Damage",
children: [
{ name: "Roof", children: [{ name: "Tarp installed by ServPro" }] },
{ name: "Fence", children: [{ name: "Chain link, ~50 feet damaged" }] },
{ name: "Garage", children: [{ name: "Brick facade damage" }] },
{ name: "Interior", children: [{ name: "Water damage" }] }
]
},
{
name: "Claims",
children: [
{ name: "Claim #016475313", children: [{ name: "Coordinator: Patricia Maloney" }] },
{ name: "Claim #016486779", children: [{ name: "Coordinator: Jen Banta" }] }
]
},
{
name: "Insurance Company (AAA)",
children: [
{ name: "Policy #: MOH 127376664" },
{ name: "Deductible: $2,830" },
{ name: "Dwelling limit: $283,000" }
]
},
{
name: "Contractors/Adjusters",
children: [
{ name: "ServPro", children: [{ name: "Possible garage damage involvement" }] },
{ name: "Greg Cobb", children: [{ name: "Estimate: $1,900" }] },
{ name: "Roofing companies", children: [{ name: "Bridgewater Roofing" }, { name: "Abernathy Roofing" }] }
]
},
{
name: "Additional Damages",
children: [
{ name: "Food spoilage: $429" },
{ name: "Lawn furniture: $140" }
]
},
{
name: "Next Steps",
children: [
{ name: "Obtain roofing estimates" },
{ name: "Challenge insurance assessment" },
{ name: "Consider consolidating claims" },
{ name: "Monitor repairs closely" }
]
}
]
};
const width = window.innerWidth;
const height = window.innerHeight;
const svg = d3.select("#mindmap")
.append("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g");
const zoom = d3.zoom()
.scaleExtent([0.1, 4])
.on("zoom", (event) => {
g.attr("transform", event.transform);
});
svg.call(zoom);
const root = d3.hierarchy(data);
const links = root.links();