diff --git a/BAviz/index.html b/BAviz/index.html index 552f8f3..20c1b1d 100644 --- a/BAviz/index.html +++ b/BAviz/index.html @@ -10,10 +10,10 @@

Number of Business Application

diff --git a/BAviz/styles.css b/BAviz/styles.css index db93caa..15e3aa0 100644 --- 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 index fe1bdd6..a885f23 100644 --- 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 index f81a2e8..55a559a 100644 --- a/dataviz_fin/index.html +++ b/dataviz_fin/index.html @@ -6,20 +6,19 @@ Financing Visualizations - -======= +

Historical Funding Patterns

Average Ticket Size of Approved Loans

diff --git a/dataviz_fin/script.js b/dataviz_fin/script.js index 98650fd..0e0aee8 100644 --- 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 index 675ad95..9c2db1b 100644 --- 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 index de48920..d86c59d 100644 --- 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 deleted file mode 100644 index b66c3b1..0000000 --- a/dataviz_fin/style.css +++ /dev/null @@ -1,18 +0,0 @@ -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/dataviz_fin/styles.css b/dataviz_fin/styles.css index 4f872f9..a69d301 100644 --- 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; /* 左端を中央に配置 */ -} \ No newline at end of file +} + + +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 index 04848a7..e31307b 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,10 @@

Supporting Small Businesses through Economic Shocks

diff --git a/state_sectors/index.html b/state_sectors/index.html index dfe5f50..0afc0f7 100644 --- a/state_sectors/index.html +++ b/state_sectors/index.html @@ -12,10 +12,10 @@

Which Types of Small Businesses Prevail in Each State?

diff --git a/state_sectors/styles.css b/state_sectors/styles.css index 2c80a1e..3d7d635 100644 --- 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 index f78ef84..b066c01 100644 --- 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 new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/team/images/.DS_Store differ diff --git a/team/images/Financing Visualizations_files/script.js b/team/images/Financing Visualizations_files/script.js index 83b3628..98650fd 100644 --- 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 new file mode 100644 index 0000000..a70fdc1 --- /dev/null +++ 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); +}); +}) +}) +(); \ No newline at end of file diff --git a/team/images/Financing Visualizations_files/script_count.js b/team/images/Financing Visualizations_files/script_count.js new file mode 100644 index 0000000..de48920 --- /dev/null +++ b/team/images/Financing Visualizations_files/script_count.js @@ -0,0 +1,98 @@ +(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)); + + 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); +}); +}) +}) +(); \ No newline at end of file diff --git a/team/images/Financing Visualizations_files/script_yearly.js b/team/images/Financing Visualizations_files/script_yearly.js new file mode 100644 index 0000000..2fa0a12 --- /dev/null +++ b/team/images/Financing Visualizations_files/script_yearly.js @@ -0,0 +1,220 @@ +// Load data and create charts +Promise.all([ + d3.csv("datasets/Statewise_7a_ApprovalPercentage_Count.csv"), + d3.csv("datasets/Sectorwise_7a_ApprovalPercentage_Count.csv") +]).then(function(data) { + + // Graph 1: Loan Approval by State + createBarChartState(data[0], "#chart1", "Yearly Loan Approval by State", "Loan Approval Rate"); + + // Graph 2: Loan Approval by Industry + createBarChartIndustry(data[1], "#chart2", "Yearly Loan Approval by Industry", "Loan Approval Rate"); +}); + +// Function to create a bar chart for states +function createBarChartState(data, container, title, yAxisLabel) { + const states = ["AK", "AL", "AR", "AZ", "CA", "CO", "CT", "DC", "DE", "FL", "GA", "GU", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA", "MA", "MD", "ME", "MI", "MN", "MO", "MP", "MS", "MT", "NC", "ND", "NE", "NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "VA", "VI", "VT", "WA", "WI", "WV", "WY"]; + + // Setting the size and margins of the SVG area + const margin = { top: 30, right: 30, bottom: 40, left: 90 }, + width = 900 - margin.left - margin.right, + height = 250 - margin.top - margin.bottom; + + // Adding options for the dropdown menu + d3.select(container) + .select("label") + .text("Select State:"); + + d3.select(container) + .select("select") + .selectAll("option") + .data(states) + .enter() + .append("option") + .text(d => d); + + // Setting the initial state + const initialState = states[0]; + + // Creating the SVG element + const svg = d3.select(container) + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + // Displaying initial data + updateBarChartState(data, svg, initialState, yAxisLabel, title, width, height, margin); + + // Handling changes in the dropdown + d3.select(container) + .select("select") + .on("change", function() { + const selectedState = d3.select(this).property("value"); + updateBarChartState(data, svg, selectedState, yAxisLabel, title, width, height, margin); + }); +} + +// Function to update the bar chart for states +function updateBarChartState(data, svg, selectedState, yAxisLabel, title, width, height, margin) { + // Extracting data for the selected state + const selectedData = data.map(d => ({ year: d.year, value: +d[selectedState] })); + + // Setting scales for x and y axes + const x = d3.scaleBand().domain(selectedData.map(d => d.year)).range([0, width]).padding(0.2); + const y = d3.scaleLinear().domain([0, d3.max(selectedData, d => d.value)]).range([height, 0]); + + // Creating x and y axes + const xAxis = d3.axisBottom(x); + const yAxis = d3.axisLeft(y); + + // Adding x and y axes to SVG + svg.selectAll("*").remove(); // Clear previous content + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .selectAll("text") + .attr("transform", "rotate(-45)") + .attr("dx", "-.8em") + .attr("dy", ".15em") + .style("text-anchor", "end"); + svg.append("text") + .attr("class", "label") + .attr("x", width / 2) + .attr("y", height + margin.bottom - 10) + .style("text-anchor", "middle"); + + svg.append("g") + .call(yAxis) + .append("text") + .attr("class", "label") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", ".71em") + .style("text-anchor", "end") + .text(yAxisLabel); + + // Drawing the bars + svg.selectAll(".bar") + .data(selectedData) + .enter().append("rect") + .attr("class", "bar") + .attr("x", d => x(d.year)) + .attr("width", x.bandwidth()) + .attr("y", d => y(d.value)) + .attr("height", d => height - y(d.value)); + + // Adding the graph title + 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(title); +} + +// Function to create a bar chart for industries +function createBarChartIndustry(data, container, title, yAxisLabel) { + const naicsCodes = ["Accommodation and Food Services", "Administrative and Support and Waste Management and Remediation Services", "Agriculture, Forestry, Fishing and Hunting", "Arts, Entertainment, and Recreation", "Construction", "Educational Services", "Finance and Insurance", "Health Care and Social Assistance", "Information", "Management of Companies and Enterprises", "Manufacturing", "Mining, Quarrying, and Oil and Gas Extraction", "Other Services (except Public Administration)", "Professional, Scientific, and Technical Services", "Public Administration", "Real Estate and Rental and Leasing", "Retail Trade", "Transportation and Warehousing", "Utilities", "Wholesale Trade"]; + + // Setting the size and margins of the SVG area + const margin = { top: 30, right: 30, bottom: 40, left: 90 }, + width = 900 - margin.left - margin.right, + height = 250 - margin.top - margin.bottom; + + // Adding options for the dropdown menu + d3.select(container) + .select("label") + .text("Select Industry:"); + + d3.select(container) + .select("select") + .selectAll("option") + .data(naicsCodes) + .enter() + .append("option") + .text(d => d); + + // Setting the initial NAICS code + const initialNAICSCode = naicsCodes[0]; + + // Creating the SVG element + const svg = d3.select(container) + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + // Displaying initial data + updateBarChartIndustry(data, svg, initialNAICSCode, yAxisLabel, title, width, height, margin); + + // Handling changes in the dropdown + d3.select(container) + .select("select") + .on("change", function() { + const selectedNAICSCode = d3.select(this).property("value"); + updateBarChartIndustry(data, svg, selectedNAICSCode, yAxisLabel, title, width, height, margin); + }); +} + +// Function to update the bar chart for industries +function updateBarChartIndustry(data, svg, selectedNAICSCode, yAxisLabel, title, width, height, margin) { + // Extracting data for the selected NAICS code + const selectedData = data.map(d => ({ year: d.year, value: +d[selectedNAICSCode] })); + + // Setting scales for x and y axes + const x = d3.scaleBand().domain(selectedData.map(d => d.year)).range([0, width]).padding(0.2); + const y = d3.scaleLinear().domain([0, d3.max(selectedData, d => d.value)]).range([height, 0]); + + // Creating x and y axes + const xAxis = d3.axisBottom(x); + const yAxis = d3.axisLeft(y); + + // Adding x and y axes to SVG + svg.selectAll("*").remove(); // Clear previous content + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .selectAll("text") + .attr("transform", "rotate(-45)") + .attr("dx", "-.8em") + .attr("dy", ".15em") + .style("text-anchor", "end"); + svg.append("text") + .attr("class", "label") + .attr("x", width / 2) + .attr("y", height + margin.bottom - 10) + .style("text-anchor", "middle"); + + svg.append("g") + .call(yAxis) + .append("text") + .attr("class", "label") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", ".71em") + .style("text-anchor", "end") + .text(yAxisLabel); + + // Drawing the bars + svg.selectAll(".bar") + .data(selectedData) + .enter().append("rect") + .attr("class", "bar") + .attr("x", d => x(d.year)) + .attr("width", x.bandwidth()) + .attr("y", d => y(d.value)) + .attr("height", d => height - y(d.value)); + + // Adding the graph title + 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(title); +} diff --git a/team/images/Financing Visualizations_files/styles.css b/team/images/Financing Visualizations_files/styles.css new file mode 100644 index 0000000..4f872f9 --- /dev/null +++ b/team/images/Financing Visualizations_files/styles.css @@ -0,0 +1,60 @@ + + +/* Add your custom styles here */ +body{ + font-family: 'Arial', sans-serif; + margin: 20px; /* ページ全体の余白を追加 */ +} + +.chart-container { + margin-bottom: 40px; /* グラフの下に余白を追加 */ + border-bottom: 2px solid #black; /* グラフ間の仕切り線 */ + padding-bottom: 5px; /* 仕切り線の下に余白を追加 */ +}4 +.chart-title { + font-size: 50px; + font-weight: bold; + text-align: center; + margin-bottom: 25px; /* タイトルの下に余白を追加 */ +} + +.axis-label { + font-size: 14px; + font-weight: bold; +} + +.bar { + fill: steelblue; +} + +.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 diff --git a/team/index.html b/team/index.html index 2c5f929..8da5b07 100644 --- a/team/index.html +++ b/team/index.html @@ -13,10 +13,10 @@

Our Team

diff --git a/team/style.css b/team/style.css index fbcbe82..ff64303 100644 --- a/team/style.css +++ b/team/style.css @@ -9,7 +9,10 @@ } body { - background: linear-gradient(#d66f1b, #ec2eef); + background-color: #e5e5f7; + opacity: 0.8; + background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px); + background-size: 10px 10px; display: flex; justify-content: center; align-items: center;