From 4a4afe3d8e83c8f1cc8757dbec63574a2b9d1393 Mon Sep 17 00:00:00 2001 From: nakajimasato Date: Thu, 11 Jan 2024 14:44:50 -0500 Subject: [PATCH] the yearly part of dataviz_fin, still haven't made it to Amount, just rate --- BAviz/.DS_Store | Bin 8196 -> 8196 bytes BAviz/script.js | 4 +-- dataviz_fin/.DS_Store | Bin 8196 -> 8196 bytes dataviz_fin/index.html | 34 ++++++++---------- dataviz_fin/script_yearly.js | 4 +-- dataviz_fin/styles.css | 65 ++++++++++++++++++++--------------- 6 files changed, 56 insertions(+), 51 deletions(-) diff --git a/BAviz/.DS_Store b/BAviz/.DS_Store index 5bf03a5c3efba79e8dcedfa02a3e04c1195510b5..1480e465958cf3c42440e6fb105681437fc7055b 100644 GIT binary patch delta 43 zcmZp1XmOa}&&atkU^hP_=VTs%x11@($vH{+`8kZ6p9-+DZ)TVH#pF diff --git a/BAviz/script.js b/BAviz/script.js index d38468e..0b86fca 100644 --- 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 index 52f1d4d8f95f4a9cbd6dbad61d560c6f139c9c5c..f8c8c917a4c95a169c6c16750c0795b003426855 100644 GIT binary patch delta 1072 zcmd^7&rcIU7~NMb%#J97tp(XsO8^x?#1x|#!GhqAfHn#R3W6@|3M1`Sx=RrRdm%;> zMNQS{!K->SF_9}L4{A(ABpTz5#Kc6scrqTGWkLQ3_pqDyzWv_J_ue-ZnhHJJo99*{ z?X)w~9-LUw1t|w(V57TXi8rSEU zFTY@Op`tkdtoE#^bdL1#;Sp|)v0_5z*Kf#WR0$Nxgxx!%sg`~sq1lSsQbkECfl@-c z?ZV-tF5V7Lm9m|pLv1tpxbA4s%H6We%(fwJEceo2HIbPXiK%^h%#ow}YXsHYk10m^N`{)+cw89s4L!53;*BDTgsLj`Fny!f<3ViuY zIj%GlHb=V5K{cs|M-4r>!iNbt%W{`^Td7IoR^nf=)h;q_q`0M8;!dsNGh&kB&<;sF znPZ;q=@-(h^ip~!%}MX21?jW2D1DQDNq^u*HV9;Fga=;uP>c%fLM0C1FdET>qi8_{ z?dU)hy%@kCIEFBcaa_g(uHY(e;WqBzE*{}Ap5Q5FFpF1sjW_s!1$@LOEaH0(e&DAI zF6vt6%E|op^t$~`M`%#2$k%j4xUFAW4cQ5OC2E#!`%32Rjo3(^b delta 1032 zcmd^--Afcv7{<@DrJXrso=wx8rEGI43m4PMP(xi2MNzX4H@}t9nRIe@R(HnrBV?iM z10uUvDucT1I*5|)`nU?BD6F6eqJ(bhrpqYm%*;lAL~}92^E~Iwd*0uB7Q>6-JC)un zIdX#aqzCgC(ktHll$YhPK3&xeOFyY=iC)DV)eKcP#v(JiYK?a%byFXSYF&mB(1q1>|N*d+lR2sH&!} z<`nu0T3Thf&m310TIY+7Uq?`Z0(hj3EXClbFIh&fqN0;XJNj88>hfw{RQxa33pph(~ygXLyZ|_=L|` z!?%t2?I9j`m}i@(DE%XED9hi}%qqnd`I3I&^`#<$x;9H~bbNz7e%a4<6jMQ+XJzEB z5+U1owk!RmAu2}9J&t7l@(M}Jk*~|h(n=xW3RYbsiHY*{8Ch2^*|&@nNBjMyjnqSV z`oorRFBKeoC~{Z?u@hz3i*oG40o0-n^=J@O+R=f-ID%t>$$+3T3 - + @@ -14,29 +14,23 @@

Average Ticket Size of Approved Loans

Count of Approved Loans

-
-

Yearly Loan Approval by State (7a)

- - - +

Yearly Temporal

+

Yearly Loan Approval by State (7a)

+
+ +
-
-

Yearly Loan Approval by Industry (7a)

- - - -
- - +

Source: Samya What was the source?"Source"

+

Yearly Loan Approval by Industry (7a)

+
+ + +
+

Source: Samya What was the source?"Source"

- + \ No newline at end of file diff --git a/dataviz_fin/script_yearly.js b/dataviz_fin/script_yearly.js index b6d8fea..2fa0a12 100644 --- 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 index 87bad5c..4f872f9 100644 --- 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; /* 左端を中央に配置 */ +} \ No newline at end of file