Viz page for testing visualizations

code4policy · Jan 8, 2024 · 135923e · 135923e
1 parent 133e502
commit 135923e
Show file tree

Hide file tree

Showing 6 changed files with 567,041 additions and 1 deletion.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dataviz/Data_Sheet.csv b/dataviz/Data_Sheet.csv
diff --git a/dataviz/index.html b/dataviz/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pie Chart Visualization</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Pie Chart Visualization</h1>
+        <div id="chart-container">
+            <svg id="pie-chart"></svg>
+        </div>
+    </div>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/dataviz/script.js b/dataviz/script.js
@@ -0,0 +1,52 @@
+// Define the dimensions of the SVG canvas and the radius of the pie chart
+const width = 400;
+const height = 400;
+const radius = Math.min(width, height) / 2;
+
+// Create an SVG element and append it to the chart-container div
+const svg = d3.select("#pie-chart")
+    .attr("width", width)
+    .attr("height", height)
+    .append("g")
+    .attr("transform", `translate(${width / 2}, ${height / 2})`);
+
+// Load your CSV data
+d3.csv("Data_Sheet.csv", function(data) {
+    // Group the data by "NAICS Description" and calculate the sum of "Firms" for each group
+   // console.log(data);
+    const dataGrouped = d3.group(data, d => d.NAICS_Description);
+    //dataGrouped.forEach((value, key, map) => {
+    //    value.forEach(d => {
+    //        d.Firms = parseInt(d.Firms); // Convert "Firms" to a number
+    //    });
+    });
+
+    // Create a color scale for the pie chart
+    const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+
+    // Create a pie generator
+    const pie = d3.pie()
+        .value(d => d3.sum(d.value, e => e.Firms)); // Use d.value to access the values within each group
+
+    // Generate the pie chart data
+    const pieData = pie(Array.from(dataGrouped)); // Convert the grouped data to an array
+
+    // Create arcs for the pie chart segments
+    const arc = d3.arc()
+        .innerRadius(0)
+        .outerRadius(radius);
+
+    // Create a path for each pie chart segment
+    const paths = svg.selectAll("path")
+        .data(pieData)
+        .enter()
+        .append("path")
+        .attr("d", arc)
+        .attr("fill", (d, i) => colorScale(i))
+        .attr("stroke", "white")
+        .style("stroke-width", "2px");
+
+    // Add tooltips
+    paths.append("title")
+        .text(d => `${d.data.key}: ${d.value} firms`);
+//});
diff --git a/dataviz/styles.css b/dataviz/styles.css
diff --git a/index.html b/index.html
@@ -29,10 +29,17 @@ <h1>What was the SME funding allocation by SBA!!</h1>
 
 <p>Read the 
 <a href="team">
-  About US
+  About Us
 </a> to learn even more about us, our values and principles that guide the pursuit of our mission. 
 </p>
 
+<br> 
+
+<p>Read the 
+<a href="dataviz">
+  Data Viz
+</a> to see the funding patterns for small businesses. 
+</p>
 
   </body>
 </html>