Merge pull request #30 from code4policy/ayush

Added funding patterns page
code4policy · Jan 10, 2024 · 8e992e8 · 8e992e8
2 parents 68d440a + a36d243
commit 8e992e8
Show file tree

Hide file tree

Showing 12 changed files with 5,324 additions and 8 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dataviz/script.js b/dataviz/script.js
@@ -1,12 +1,12 @@
 // Load the CSV data
-d3.csv("Data_Sheet.csv").then(function(data) {
+d3.csv("us_state_2digitnaics_2021.csv").then(function(data) {
     // Group data by NAICS code and calculate total firms
-       const naicsData = d3.rollup(data, v => d3.sum(v, d => +d.Firms.replace(/,/g, '')), d => d["NAICS_Sector"]);
+       const naicsData = d3.rollup(data, v => d3.sum(v, d => +d.Firms.replace(/,/g, '')), d => d["NAICS_Description"]);
     // Convert the grouped data to an array of objects
-    const naicsArray = Array.from(naicsData, ([key, value]) => ({ NAICS_Sector: key, TotalFirms: value }));
+    const naicsArray = Array.from(naicsData, ([key, value]) => ({ NAICS_Description: key, TotalFirms: value }));
 
     // Sort the data by NAICS Description
-    naicsArray.sort((a, b) => a.NAICS_Sector.localeCompare(b.NAICS_Sector));
+    naicsArray.sort((a, b) => a.NAICS_Description.localeCompare(b.NAICS_Description));
 
     // Select the table body
     const tableBody = d3.select("tbody");
@@ -18,7 +18,7 @@ d3.csv("Data_Sheet.csv").then(function(data) {
         .append("tr");
 
     // Append cells for NAICS code and Total Firms
-    rows.append("td").text(d => d.NAICS_Sector);
+    rows.append("td").text(d => d.NAICS_Description);
     rows.append("td").text(d => d.TotalFirms.toLocaleString());
 
 
@@ -34,7 +34,7 @@ d3.csv("Data_Sheet.csv").then(function(data) {
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
     const x = d3.scaleBand()
-        .domain(naicsArray.map(d => d.NAICS_Sector))
+        .domain(naicsArray.map(d => d.NAICS_Description))
         .range([0, width])
         .padding(0.1);
 
@@ -48,9 +48,9 @@ d3.csv("Data_Sheet.csv").then(function(data) {
         .data(naicsArray)
         .enter()
         .append("rect")
-        .attr("x", d => x(d.NAICS_Sector) + 5) // Add space between bars
+        .attr("x", d => x(d.NAICS_Description) + 5) // Add space between bars
         .attr("y", d => y(d.TotalFirms))
-        .attr("width", x.bandwidth() - 10) // Reduce bar thickness
+        .attr("width", x.bandwidth() - 5) // Reduce bar thickness
         .attr("height", d => height - y(d.TotalFirms))
         .attr("fill", "steelblue");
 

diff --git a/dataviz/us_state_2digitnaics_2021.csv b/dataviz/us_state_2digitnaics_2021.csv
diff --git a/dataviz_fin/SBA_Approved_Loan_Values.csv b/dataviz_fin/SBA_Approved_Loan_Values.csv
@@ -0,0 +1,13 @@
+Metric,year,Val
+7a,2018,25372539100
+7a,2019,23175811000
+7a,2020,22549825700
+7a,2021,36536756800
+7a,2022,25693805700
+7a,2023,27515666000
+504,2018,4753644000
+504,2019,4958542000
+504,2020,27515666000
+504,2021,8218105540
+504,2022,9207996290
+504,2023,6419378000
diff --git a/dataviz_fin/SBA_Avg_Tkt_Size.csv b/dataviz_fin/SBA_Avg_Tkt_Size.csv
@@ -0,0 +1,13 @@
+Metric,year,Avg
+7a,2018,420395.3193
+7a,2019,446487.1983
+7a,2020,533118.0127
+7a,2021,704581.0861
+7a,2022,538902.7581
+7a,2023,479684.5647
+504,2018,809268.6415
+504,2019,813009.0179
+504,2020,3865102.683
+504,2021,849328.8074
+504,2022,995028.7757
+504,2023,1083622.215
diff --git a/dataviz_fin/SBA_Count_Approved_Loans.csv b/dataviz_fin/SBA_Count_Approved_Loans.csv
@@ -0,0 +1,13 @@
+Metric,year,Count
+7a,2018,60354
+7a,2019,51907
+7a,2020,42298
+7a,2021,51856
+7a,2022,47678
+7a,2023,57362
+504,2018,5874
+504,2019,6099
+504,2020,7119
+504,2021,9676
+504,2022,9254
+504,2023,5924
diff --git a/dataviz_fin/index.html b/dataviz_fin/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Grouped Bar Chart with D3.js</title>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+</head>
+<body>
+    <svg id="values" width="960" height="500"></svg>
+    <h2>Average Ticket Size of Approved Loans</h2>
+    <svg id="avg" width="960" height="500"></svg>
+    <h2>Count of Approved Loans</h2>
+	<svg id="count" width="960" height="550"></svg>
+</body>
+<script src="script.js"></script>
+<script src="script_count.js"></script>
+<script src="script_avg.js"></script>
+</html>
diff --git a/dataviz_fin/script.js b/dataviz_fin/script.js
@@ -0,0 +1,87 @@
+  // Set the dimensions and margins of the chart
+(function () {
+
+const margin = {top: 60, right: 60, bottom: 70, left: 80},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+// Append the svg object to the body of the page
+const svg = d3.select("#values")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform", `translate(${margin.left},${margin.top})`);
+
+svg.append("text")
+    .attr("x", width / 2)             
+    .attr("y", 0 - (margin.top / 2))
+    .attr("text-anchor", "middle")  
+    .style("font-size", "16px") 
+    .style("text-decoration", "underline")  
+    .text("Approved Loan Values");
+
+
+// Read the data from the CSV file
+d3.csv("SBA_Approved_Loan_Values.csv").then(function(data) {
+    // Extract unique metrics and years
+    const metrics = [...new Set(data.map(d => d.Metric))];
+
+    const years = [...new Set(data.map(d => d.year))];
+
+    // Create a group for each metric
+    const x0 = d3.scaleBand()
+        .domain(metrics)
+        .rangeRound([0, width])
+        .paddingInner(0.1);
+    svg.append("g")
+        .attr("transform", `translate(0,${height})`)
+        .call(d3.axisBottom(x0));
+
+
+    // Scale for each year within the metric
+    const x1 = d3.scaleBand()
+        .domain(years)
+        .rangeRound([0, x0.bandwidth()])
+        .padding(0.05);
+
+    // Add Y axis
+    const y = d3.scaleLinear()
+        .domain([0, d3.max(data, d => +d['Val'])])
+        .nice()
+        .range([height, 0]);
+    svg.append("g")
+        .call(d3.axisLeft(y));
+
+    // Color palette for each year
+    const color = d3.scaleOrdinal()
+        .domain(years)
+        .range(d3.schemeCategory10);
+
+    // Group the data by metric
+    const groupedData = metrics.map(metric => {
+        return {
+            metric: metric,
+            values: data.filter(d => d.Metric === metric)
+        };
+    });
+
+    // Add groups for each metric and draw bars
+    const metricGroups = svg.selectAll(".metric-group")
+        .data(groupedData)
+        .enter().append("g")
+        .attr("class", "metric-group")
+        .attr("transform", d => `translate(${x0(d.metric)}, 0)`);
+
+    metricGroups.selectAll("rect")
+        .data(d => years.map(year => {
+            return { year: year, value: d.values.find(v => v.year === year)?.['Val'] || 0 };
+        }))
+        .enter().append("rect")
+            .attr("x", d => x1(d.year))
+            .attr("y", d => y(d.value))
+            .attr("width", x1.bandwidth())
+            .attr("height", d => height - y(d.value))
+            .attr("fill", d => color(d.year));
+})
+})
+();
diff --git a/dataviz_fin/script_avg.js b/dataviz_fin/script_avg.js
@@ -0,0 +1,78 @@
+(function () {
+
+  // Set the dimensions and margins of the chart
+const margin = {top: 70, right: 60, bottom: 90, left: 80},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+// Append the svg object to the body of the page
+const svg = d3.select("#avg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform", `translate(100,20)`);
+
+// Read the data from the CSV file
+d3.csv("SBA_Avg_Tkt_Size.csv").then(function(data) {
+    // Extract unique metrics and years
+    const metrics = [...new Set(data.map(d => d.Metric))];
+
+    const years = [...new Set(data.map(d => d.year))];
+
+    // Create a group for each metric
+    const x0 = d3.scaleBand()
+        .domain(metrics)
+        .rangeRound([0, width])
+        .paddingInner(0.1);
+    svg.append("g")
+        .attr("transform", `translate(0,${height})`)
+        .call(d3.axisBottom(x0));
+
+
+    // Scale for each year within the metric
+    const x1 = d3.scaleBand()
+        .domain(years)
+        .rangeRound([0, x0.bandwidth()])
+        .padding(0.05);
+
+    // Add Y axis
+    const y = d3.scaleLinear()
+        .domain([0, d3.max(data, d => +d['Avg'])])
+        .nice()
+        .range([height, 0]);
+    svg.append("g")
+        .call(d3.axisLeft(y));
+
+    // Color palette for each year
+    const color = d3.scaleOrdinal()
+        .domain(years)
+        .range(d3.schemeCategory10);
+
+    // Group the data by metric
+    const groupedData = metrics.map(metric => {
+        return {
+            metric: metric,
+            values: data.filter(d => d.Metric === metric)
+        };
+    });
+
+    // Add groups for each metric and draw bars
+    const metricGroups = svg.selectAll(".metric-group")
+        .data(groupedData)
+        .enter().append("g")
+        .attr("class", "metric-group")
+        .attr("transform", d => `translate(${x0(d.metric)}, 0)`);
+
+    metricGroups.selectAll("rect")
+        .data(d => years.map(year => {
+            return { year: year, value: d.values.find(v => v.year === year)?.['Avg'] || 0 };
+        }))
+        .enter().append("rect")
+            .attr("x", d => x1(d.year))
+            .attr("y", d => y(d.value))
+            .attr("width", x1.bandwidth())
+            .attr("height", d => height - y(d.value))
+            .attr("fill", d => color(d.year));
+})
+})
+();
diff --git a/dataviz_fin/script_count.js b/dataviz_fin/script_count.js
@@ -0,0 +1,87 @@
+(function () {
+
+  // Set the dimensions and margins of the chart
+const margin = {top: 70, right: 60, bottom: 90, left: 80},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+// Append the svg object to the body of the page
+const svg = d3.select("#count")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform", `translate(100,20)`);
+
+svg.append("text")
+    .attr("x", width / 2)             
+    .attr("y", 0 - (margin.top / 2))
+    .attr("text-anchor", "middle")  
+    .style("font-size", "16px") 
+    .style("text-decoration", "underline")  
+    .text("Avg Ticket Sizes");
+
+
+// Read the data from the CSV file
+d3.csv("SBA_Count_Approved_Loans.csv").then(function(data) {
+    // Extract unique metrics and years
+    const metrics = [...new Set(data.map(d => d.Metric))];
+
+    const years = [...new Set(data.map(d => d.year))];
+
+    // Create a group for each metric
+    const x0 = d3.scaleBand()
+        .domain(metrics)
+        .rangeRound([0, width])
+        .paddingInner(0.1);
+    svg.append("g")
+        .attr("transform", `translate(0,${height})`)
+        .call(d3.axisBottom(x0));
+
+
+    // Scale for each year within the metric
+    const x1 = d3.scaleBand()
+        .domain(years)
+        .rangeRound([0, x0.bandwidth()])
+        .padding(0.05);
+
+    // Add Y axis
+    const y = d3.scaleLinear()
+        .domain([0, d3.max(data, d => +d['Count'])])
+        .nice()
+        .range([height, 0]);
+    svg.append("g")
+        .call(d3.axisLeft(y));
+
+    // Color palette for each year
+    const color = d3.scaleOrdinal()
+        .domain(years)
+        .range(d3.schemeCategory10);
+
+    // Group the data by metric
+    const groupedData = metrics.map(metric => {
+        return {
+            metric: metric,
+            values: data.filter(d => d.Metric === metric)
+        };
+    });
+
+    // Add groups for each metric and draw bars
+    const metricGroups = svg.selectAll(".metric-group")
+        .data(groupedData)
+        .enter().append("g")
+        .attr("class", "metric-group")
+        .attr("transform", d => `translate(${x0(d.metric)}, 0)`);
+
+    metricGroups.selectAll("rect")
+        .data(d => years.map(year => {
+            return { year: year, value: d.values.find(v => v.year === year)?.['Count'] || 0 };
+        }))
+        .enter().append("rect")
+            .attr("x", d => x1(d.year))
+            .attr("y", d => y(d.value))
+            .attr("width", x1.bandwidth())
+            .attr("height", d => height - y(d.value))
+            .attr("fill", d => color(d.year));
+})
+})
+();
diff --git a/dataviz_fin/style.css b/dataviz_fin/style.css
diff --git a/index.html b/index.html
@@ -38,6 +38,13 @@ <h1>What was the SME funding allocation by SBA!!</h1>
 <p>Read the 
 <a href="dataviz">
   Data Viz
+</a> to see the prevailing extent for small businesses. 
+</p>
+
+
+<p>Read the 
+<a href="dataviz_fin">
+  Data Viz_Fin
 </a> to see the funding patterns for small businesses. 
 </p>