code4policy · Nostradamus2x · Jan 12, 2024 · Jan 12, 2024
diff --git a/BAviz/index.html b/BAviz/index.html
@@ -10,10 +10,10 @@
     <nav>
       <!-- Add navigation bar options with placeholders -->
       <a href=../index.html>Home</a>
-      <a href="../team">About Us</a>
       <a href="../state_sectors">State Small Business Profile by Sector </a>
       <a href="../dataviz_fin">Historical Funding Patterns</a>
       <a href="../BAviz">Historical Small Business Formation</a>
+      <a href="../team">About Us</a>
     </nav>
 
     <h1>Number of Business Application</h1>  

diff --git a/BAviz/styles.css b/BAviz/styles.css
@@ -2,6 +2,10 @@
 body{
     font-family: 'Arial', sans-serif;
     margin: 20px; /* ページ全体の余白を追加 */
+    background-color: #e5e5f7;
+    opacity: 0.8;
+    background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
+    background-size: 10px 10px;
 }
 
 .chart-container {

diff --git a/dataviz/styles.css b/dataviz/styles.css
@@ -1,6 +1,10 @@
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
+    background-color: #e5e5f7;
+    opacity: 0.8;
+    background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
+    background-size: 10px 10px;
 }
 
 h1 {

diff --git a/dataviz_fin/index.html b/dataviz_fin/index.html
@@ -6,20 +6,19 @@
     <title>Financing Visualizations</title>
     <link rel="stylesheet" href="styles.css">
     <script src="https://d3js.org/d3.v6.min.js"></script>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
       <nav>
       <!-- Add navigation bar options with placeholders -->
       <a href=../index.html>Home</a>
-      <a href="../team">About Us</a>
       <a href="../state_sectors">State Small Business Profile by Sector </a>
       <a href="../dataviz_fin">Historical Funding Patterns</a>
       <a href="../BAviz">Historical Small Business Formation</a>
+      <a href="../team">About Us</a>
     </nav>
 
-=======
+
     <h1>Historical Funding Patterns</h1>  
     <svg id="values" width="960" height="500"></svg>
     <h2>Average Ticket Size of Approved Loans</h2>

diff --git a/dataviz_fin/script.js b/dataviz_fin/script.js
@@ -55,7 +55,8 @@ d3.csv("SBA_Approved_Loan_Values.csv").then(function(data) {
     // Color palette for each year
     const color = d3.scaleOrdinal()
         .domain(years)
-        .range(d3.schemeCategory10);
+        .range(d3.schemeSpectral[7])
+        .unknown("#ccc");
 
     // Group the data by metric
     const groupedData = metrics.map(metric => {

diff --git a/dataviz_fin/script_avg.js b/dataviz_fin/script_avg.js
@@ -44,9 +44,13 @@ d3.csv("SBA_Avg_Tkt_Size.csv").then(function(data) {
         .call(d3.axisLeft(y));
 
     // Color palette for each year
+    //const myColorScheme = ["#DC143C", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
+
     const color = d3.scaleOrdinal()
         .domain(years)
-        .range(d3.schemeCategory10);
+        .range(d3.schemeSpectral[7])
+        .unknown("#ccc");
+        //.range(myColorScheme); //range(d3.schemeCategory10);
 
     // Group the data by metric
     const groupedData = metrics.map(metric => {

diff --git a/dataviz_fin/script_count.js b/dataviz_fin/script_count.js
@@ -55,7 +55,8 @@ d3.csv("SBA_Count_Approved_Loans.csv").then(function(data) {
     // Color palette for each year
     const color = d3.scaleOrdinal()
         .domain(years)
-        .range(d3.schemeCategory10);
+        .range(d3.schemeSpectral[7])
+        .unknown("#ccc");
 
     // Group the data by metric
     const groupedData = metrics.map(metric => {

diff --git a/dataviz_fin/style.css b/dataviz_fin/style.css
diff --git a/dataviz_fin/styles.css b/dataviz_fin/styles.css
@@ -4,6 +4,10 @@
 body{
     font-family: 'Arial', sans-serif;
     margin: 20px; /* ページ全体の余白を追加 */
+    background-color: #e5e5f7;
+    opacity: 0.8;
+    background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
+    background-size: 10px 10px;
 }
 
 .chart-container {
@@ -57,4 +61,24 @@ select {
 p {
     bottom: 20px; /* 下端を親要素の下端に配置 */
     left: 100px; /* 左端を中央に配置 */
-}
+}
+
+
+nav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+nav a {
+  float: left;
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+nav a:hover {
+  background-color: #ddd;
+  color: black;
+}
diff --git a/index.html b/index.html
@@ -11,10 +11,10 @@
     <nav>
       <!-- Add navigation bar options with placeholders -->
       <a href=index.html>Home</a>
-      <a href="team">About Us</a>
       <a href="state_sectors">State Small Business Profile by Sector </a>
       <a href="dataviz_fin">Historical Funding Patterns</a>
       <a href="BAviz">Historical Small Business Formation</a>
+      <a href="team">About Us</a>
     </nav>
 
     <h1>Supporting Small Businesses through Economic Shocks</h1>

diff --git a/state_sectors/index.html b/state_sectors/index.html
@@ -12,10 +12,10 @@
       <nav>
       <!-- Add navigation bar options with placeholders -->
       <a href=../index.html>Home</a>
-      <a href="../team">About Us</a>
       <a href="../state_sectors">State Small Business Profile by Sector </a>
       <a href="../dataviz_fin">Historical Funding Patterns</a>
       <a href="../BAviz">Historical Small Business Formation</a>
+      <a href="../team">About Us</a>
     </nav>
     <h1>Which Types of Small Businesses Prevail in Each State?</h1>
 

diff --git a/state_sectors/styles.css b/state_sectors/styles.css
@@ -1,6 +1,10 @@
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
+    background-color: #e5e5f7;
+    opacity: 0.8;
+    background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
+    background-size: 10px 10px;
 }
 
 h1 {

diff --git a/styles/style.css b/styles/style.css
@@ -9,8 +9,14 @@ h1 {
 
 body {
   font-family: 'Open Sans', sans-serif;
+  background-color: #e5e5f7;
+  opacity: 0.8;
+  background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
+  background-size: 10px 10px;
 }
 
+
+
 nav {
   background-color: #333;
   overflow: hidden;

diff --git a/team/images/.DS_Store b/team/images/.DS_Store
diff --git a/team/images/Financing Visualizations_files/script.js b/team/images/Financing Visualizations_files/script.js
@@ -36,9 +36,6 @@ d3.csv("SBA_Approved_Loan_Values.csv").then(function(data) {
     svg.append("g")
         .attr("transform", `translate(0,${height})`)
         .call(d3.axisBottom(x0));
-        .selectAll("text") // Select all text elements in the X-axis group
-        .style("font-size", "14px") // Increase font size
-        .style("font-weight", "bold"); // Make the text bold
 
 
     // Scale for each year within the metric

diff --git a/team/images/Financing Visualizations_files/script_avg.js b/team/images/Financing Visualizations_files/script_avg.js
@@ -0,0 +1,93 @@
+(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 myColorScheme = ["#DC143C", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
+
+    const color = d3.scaleOrdinal()
+        .domain(years)
+        .range(d3.schemeSpectral[10])
+        .unknown("#ccc");
+        //.range(myColorScheme); //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));
+
+    metricGroups.each(function(metricGroupData) {
+    d3.select(this).selectAll(".year-label")
+        .data(years)
+        .enter().append("text")
+            .attr("class", "year-label")
+            .attr("x", d => x1(d) + x1.bandwidth() / 2)
+            .attr("y", height + 25) // Adjust this value as needed
+            .attr("text-anchor", "middle")
+            .text(d => d);
+});
+})
+})
+();