finish writing federal laws example

_file/data/us-federal-laws/Civil Rights.82bbb438.indices

@@ -0,0 +1,150 @@
+43293
+39202
+42147
+43498
+44136
+42023
+7664
+49020
+38462
+38890
+31796
+49602
+40660
+39838
+34453
+42657
+5602
+43527
+43294
+37784
+38980
+43652
+35779
+39638
+36976
+6210
+36738
+47188
+38729
+39472
+6342
+48698
+42853
+32866
+39561
+44521
+37408
+17097
+47426
+47306
+38409
+44501
+37173
+38652
+38870
+39319
+40260
+42165
+49218
+36502
+39212
+41582
+35099
+37113
+6217
+7581
+46199
+34540
+4915
+40988
+15095
+42194
+38823
+43139
+46609
+48043
+44061
+43947
+49169
+27869
+29950
+47401
+40317
+41910
+27223
+40701
+34877
+12506
+5930
+17387
+44365
+43969
+47169
+32035
+39765
+37099
+4205
+41290
+46606
+44070
+39124
+38166
+41850
+48501
+43858
+44350
+40413
+42973
+25832
+48391
+35783
+42237
+21167
+40209
+6829
+42811
+37874
+32691
+38623
+44698
+13168
+43471
+45392
+34140
+39279
+42981
+43058
+39984
+49037
+35146
+30271
+23624
+44816
+15019
+42998
+44296
+47886
+45311
+29476
+6400
+38373
+38996
+6368
+42671
+37655
+28425
+8262
+38545
+35496
+32566
+42822
+39367
+26735
+34662
+47190
+39224
+28318
+29930
+34368
+38237

_file/index.2320f840.css

@@ -0,0 +1,125 @@
+
+/* HEADER STYLES  */
+#observablehq-header a[href] {
+  color: inherit;
+}
+
+#observablehq-header a[target="_blank"] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  text-decoration: none;
+}
+
+#observablehq-header a[target="_blank"]:hover span {
+  text-decoration: underline;
+}
+
+#observablehq-header a[target="_blank"]::after {
+  content: "↗";
+}
+
+@container not (min-width: 640px) {
+  .hide-if-small {
+    display: none;
+  }
+}
+
+.card {
+}
+
+/* DOCUMENTATION STYLES */
+.pageshot {
+  width: 60%;
+}
+.screenshot {
+  width: 55%;
+  margin: 0 24px;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
+  margin-bottom: 16px;
+}
+
+@container not (min-width: 640px) {
+  .pageshot {
+    width: 100%;
+  }
+  .screenshot {
+    width: 100%;
+  }
+}
+
+
+.static-table input[type=checkbox] {
+  display: none;
+}
+
+
+/* HULL COMPONENT */
+.hull {
+  display: block;
+}
+
+/* TOOLTIP STYLES */
+.tooltip {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1000;
+  background-color: white;
+  padding: 8px;
+  border-radius: 4px;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
+  max-width: 640px;
+}
+
+.cluster-content {
+  display: flex;
+  flex-direction: row;
+}
+.cluster-plot {
+  /* background-color: white; */
+  padding: 4px;
+  border-radius: 4px;
+  margin: 6px;
+  width: 300px;
+  max-width: 300px;
+  min-width: 300px;
+  display: inline-block;
+}
+.cluster-diagram {
+  padding: 4px;
+  border-radius: 4px;
+  margin: 6px;
+  max-width: 300px;
+  min-width: 300px;
+}
+.cluster-description {
+  padding: 4px;
+  border-radius: 4px;
+  margin: 6px;
+  max-width: 300px;
+}
+
+.input-card table {
+  min-width: 960px;
+}
+.static-table {
+  overflow-x: scroll;
+  margin-top: 6px;
+}
+.static-table table {
+  min-width: 640px;
+}
+.card table {
+  min-width: 640px;
+}
+
+
+.static-table thead th {
+  background: #f0f0f0;
+}
+
+@container not (min-width: 640px) {
+  .cluster-content {
+    flex-direction: column;
+  }
+}

_import/components/clusterCard.eba8a284.js

@@ -0,0 +1,79 @@
+import {html} from "../../_npm/[email protected]/_esm.js";
+import * as Inputs from "../../_observablehq/stdlib/inputs.js";
+import * as Plot from "../../_npm/@observablehq/[email protected]/_esm.js";
+
+// cluster is the cluster index
+export function clusterCard(cluster, {
+  description, 
+  plot,
+  tableConfig, 
+  da, 
+  scope,
+  hulls,
+  r = 3
+} = {}) {
+  const cda = da.filter(d => d.cluster == cluster)
+  return html`<div class="cluster-card grid grid-cols-1">
+  <div class="card">
+    <h2>Cluster ${cluster}: ${scope.cluster_labels_lookup[cluster].label}</h2>
+    <h3>${cda.length} rows</h3>
+    <div class="cluster-content grid grid-cols-3">
+      <div class="cluster-plot">
+      ${
+        Plot.plot({
+        marks: [
+          Plot.hull(hulls.flatMap(d => d), {
+            x: "x",
+            y: "y",
+            fill: "cluster",
+            fillOpacity: 0.1,
+            stroke: "lightgray",
+            curve: "catmull-rom",
+          }),
+          Plot.hull(hulls.flatMap(d => d), {
+            filter: d => d.cluster == cluster,
+            x: "x",
+            y: "y",
+            fill: "cluster",
+            fillOpacity: 0.25,
+            stroke: "black",
+            strokeWidth: 2,
+            curve: "catmull-rom",
+          }),
+          Plot.dot(da, {
+            filter: d => d.cluster == cluster,
+            x: "x",
+            y: "y",
+            fill: "cluster",
+            r,
+            title: scope.dataset.text_column,
+            tip: true
+          }),
+        ],
+        width: 300,
+        height: 300,
+        color: { scheme: "cool" },
+        y: { axis: null},
+        x: { axis: null },
+        tip: {
+          format: {
+            cluster: true,
+            title: true
+          }
+        }
+      })
+      }
+      </div>
+      <div class="cluster-description">
+      ${description}
+      </div>
+      <div class="cluster-diagram">
+      ${plot}
+      </div>
+    </div>
+    <div class="static-table">
+      ${Inputs.table(cda, tableConfig)}
+    </div>
+</div>`
+}
+