Merge pull request #53 from code4policy/masato

Created_Modified the yearly chart of dataviz_fin!
code4policy · Jan 11, 2024 · 5bcd1cd · 5bcd1cd
2 parents cdff6b0 + 4a4afe3
commit 5bcd1cd
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 51 deletions.
diff --git a/BAviz/.DS_Store b/BAviz/.DS_Store
diff --git a/BAviz/script.js b/BAviz/script.js
@@ -5,10 +5,10 @@ Promise.all([
 ]).then(function(data) {
     // Deleted Graph 1
     // Graph 2: Business Applications by State
-    createGroupBarChart(data[1], "#chart2", "Yearly Business Applications by State", "State", "Number of Business Applications");
+    createGroupBarChart(data[0], "#chart2", "Yearly Business Applications by State", "State", "Number of Business Applications");
 
     // Graph 3: Business Applications by Industry
-    createGroupBarChartForNAICS(data[2], "#chart3", "Yearly Business Applications by Industry", "Industry", "Number of Business Applications");
+    createGroupBarChartForNAICS(data[1], "#chart3", "Yearly Business Applications by Industry", "Industry", "Number of Business Applications");
 });
 
 // Deleted Graph 1: Function to create a line chart

diff --git a/dataviz_fin/.DS_Store b/dataviz_fin/.DS_Store
diff --git a/dataviz_fin/index.html b/dataviz_fin/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -26,26 +26,20 @@ <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>
-    <div class="chart-container">
-        <h2>Yearly Loan Approval by State (7a)</h2>
-        <label for="stateSelect">Select State:</label>
-        <select id="stateSelect"></select>
-        <svg id="chart1" width="960" height="700"></svg>
+    <h1>Yearly Temporal</h1>  
+    <h2>Yearly Loan Approval by State (7a)</h2> 
+    <div id="chart1">
+        <label for="stateDropdown">Select State:</label>
+        <select id="stateDropdown"></select>     
     </div>
-    <div class="chart-container">
-        <h2>Yearly Loan Approval by Industry (7a)</h2>
-        <label for="industrySelect">Select Industry:</label>
-        <select id="industrySelect"></select>
-        <svg id="chart2" width="960" height="700"></svg>
-    </div>
-
-<style>
-    img {
-        width: 1000px;
-        height: 1000px;
-    }
-</style>
+    <p>Source: Samya What was the source?"<a href="https://www.census.gov/econ_datasets/">Source</a>"</p>
 
+    <h2>Yearly Loan Approval by Industry (7a)</h2>
+    <div id="chart2">
+        <label for="industryDropdown">Select Industry:</label>
+        <select id="industryDropdown"></select>
+    </div>
+    <p>Source: Samya What was the source?"<a href="https://www.census.gov/econ_datasets/">Source</a>"</p>
 </body>
 <script src="script.js"></script>
  <script src="script_count.js"></script>
@@ -54,4 +48,4 @@ <h2>Yearly Loan Approval by Industry (7a)</h2>
 <script src="script_count.js"></script>
 <script src="script_avg.js"></script>
 <script src="script_yearly.js"></script>
-</html>
+</html>
diff --git a/dataviz_fin/script_yearly.js b/dataviz_fin/script_yearly.js
@@ -17,7 +17,7 @@ function createBarChartState(data, container, title, yAxisLabel) {
 
     // Setting the size and margins of the SVG area
     const margin = { top: 30, right: 30, bottom: 40, left: 90 },
-        width = 800 - margin.left - margin.right,
+        width = 900 - margin.left - margin.right,
         height = 250 - margin.top - margin.bottom;
 
     // Adding options for the dropdown menu
@@ -121,7 +121,7 @@ function createBarChartIndustry(data, container, title, yAxisLabel) {
 
     // Setting the size and margins of the SVG area
     const margin = { top: 30, right: 30, bottom: 40, left: 90 },
-        width = 800 - margin.left - margin.right,
+        width = 900 - margin.left - margin.right,
         height = 250 - margin.top - margin.bottom;
 
     // Adding options for the dropdown menu

diff --git a/dataviz_fin/styles.css b/dataviz_fin/styles.css
@@ -1,38 +1,21 @@
-/* styles.css */
 
-/* チャートごとのスタイリング */
-#chart1, #chart2 {
-    margin-bottom: 40px; /* 各チャートの下に余白を追加 */
-    width: 900px; /* グラフの横幅を調整 */
-    height: 250px; /* グラフの高さを調整 */
-    position: relative; /* 相対位置指定を追加 */
-}
-
-/* プルダウンメニューのスタイリング */
-#chart1 select, #chart2 select {
-    position: absolute; /* 絶対位置指定を追加 */
-    top: 0; /* 上端に配置 */
-    left: 10px; /* 左からの位置調整 */
-    z-index: 1; /* プルダウンメニューが前面に表示されるように指定 */
-}
 
-/* 他の要素との競合を防ぐための調整 */
-body {
-    overflow: auto; /* ページ全体のスクロールバーを表示 */
+/* Add your custom styles here */
+body{
+    font-family: 'Arial', sans-serif;
+    margin: 20px; /* ページ全体の余白を追加 */
 }
 
-/* チャートのコンテナのスタイリング */
 .chart-container {
-    margin-bottom: 10px;
-    border-bottom: 2px solid #000;
-    padding-bottom: 5px;
-}
-
+    margin-bottom: 40px; /* グラフの下に余白を追加 */
+    border-bottom: 2px solid #black; /* グラフ間の仕切り線 */
+    padding-bottom: 5px; /* 仕切り線の下に余白を追加 */
+}4
 .chart-title {
-    font-size: 20px;
+    font-size: 50px;
     font-weight: bold;
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 25px; /* タイトルの下に余白を追加 */
 }
 
 .axis-label {
@@ -47,3 +30,31 @@ body {
 .bar:hover {
     fill: darkblue;
 }
+
+/* 各チャートのスタイリング */
+#chart1, #chart2 {
+    margin-bottom: 40px; /* 各チャートの下に余白を追加 */
+    width: 900px; /* グラフの横幅を調整 */
+    height: 250px; /* グラフの高さを調整 */
+}
+
+#chart1, #chart2 {
+    margin-top: 20px; /* 各チャートの上に余白を追加 */
+}
+
+/* チャート全体の左寄せ */
+svg {
+    display: block;
+    margin: 0 auto;
+}
+
+/* セレクトボックスのスタイル */
+select {
+    font-size: 14px;
+}
+
+/* テキストのスタイル */
+p {
+    bottom: 20px; /* 下端を親要素の下端に配置 */
+    left: 100px; /* 左端を中央に配置 */
+}