test4

goinvo · Jul 2, 2024 · 2c83ff4 · 2c83ff4
1 parent fd42a4c
commit 2c83ff4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Massachusetts Services</title>
     <link rel="stylesheet" href="style.css">
-    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
     <script type="text/javascript" src="script.js" defer></script>
 </head>
 <body>

diff --git a/script.js b/script.js
@@ -52,3 +52,32 @@ function loadSheet(sheetType) {
         chart.draw(data, options);
     });
 }
+
+// D3.js example
+document.addEventListener("DOMContentLoaded", function() {
+    // Select the chart_div and append an SVG element to it
+    const svg = d3.select("#chart_div")
+        .append("svg")
+        .attr("width", 900)
+        .attr("height", 500);
+
+    // Example: Appending a circle to the SVG
+    svg.append("circle")
+        .attr("cx", 450)
+        .attr("cy", 250)
+        .attr("r", 100)
+        .style("fill", "steelblue");
+
+    // Example: Creating a bar chart
+    const data = [10, 20, 30, 40, 50];
+
+    svg.selectAll("rect")
+        .data(data)
+        .enter()
+        .append("rect")
+        .attr("x", (d, i) => i * 100)
+        .attr("y", d => 500 - d * 10)
+        .attr("width", 80)
+        .attr("height", d => d * 10)
+        .style("fill", "orange");
+});