diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..a5bfab71
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/../../../../../../../../:\Users\rwick\Desktop\Dev\biovis\final\.idea/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/final.iml b/.idea/final.iml
new file mode 100644
index 00000000..0c8867d7
--- /dev/null
+++ b/.idea/final.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..2504908a
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..94a25f7f
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/CS480x Final Project Process Book.pdf b/CS480x Final Project Process Book.pdf
new file mode 100644
index 00000000..b0a685e3
Binary files /dev/null and b/CS480x Final Project Process Book.pdf differ
diff --git a/README.md b/README.md
index 21afe8d5..31e8563d 100755
--- a/README.md
+++ b/README.md
@@ -1,115 +1,84 @@
-Final Project - Interactive Data Visualization
-===
+# Final Project - Interactive Data Visualization
+#### Danya Baron, Roman Wicky van Doyer, Molly Wirtz
-The key learning experience of this course is the final project.
-You will design a web site and interactive visualizations that answer questions you have or provide an exploratory interface to some topic of your own choosing.
-You will acquire the data, design your visualizations, implement them, and critically evaluate the results.
-The path to a good visualization is going to involve mistakes and wrong turns.
-It is therefore important to recognize that mistakes are valuable in finding the path to a solution, to broadly explore the design space, and to iterate designs to improve possible solutions.
-To help you explore the design space, we will hold events such as feedback sessions in which you propose your idea and initial designs and receive feedback from the class and staff.
+### Project Website
-Proposal
----
+https://romanwicky.github.io/final/index.html
-Submit project proposals using [this Google Form](https://docs.google.com/forms/d/e/1FAIpQLSc9DFlcClPArC1RKNFsXzfJfauZA57ksU85kT0hX2OEEDlxqw/viewform?usp=sf_link).
-You may submit more than one proposal.
-1-3 folks per team.
+### Screencast Video
-Final Project Materials
----
-For your final project you must hand in the following items.
+https://www.youtube.com/watch?v=L1SBH-aUo68
-### Process Book
+Background
+---
-An important part of your project is your process book. Your process book details your steps in developing your solution, including the alternative designs you tried, and the insights you got. Develop your process book out of the project proposal. Equally important to your final results is how you got there! Your process book is the place you describe and document the space of possibilities you explored at each step of your project. It is not, however, a journal or lab notebook that describes every detail - you should think carefully about the important decisions you made and insights you gained and present your reasoning in a concise way.
+### Objective
+Given the unprecedented economic upheaval of the past year brought on by the pandemic, our team wanted to choose a project focusing on the financial spending of the government: specifically the difference between how the U.S. spends money on military endeavors versus social programs.
-We strongly advise you to include many figures in your process book, including photos of your sketches of potential designs, screen shots from different visualization tools you explored, inspirations of visualizations you found online, etc. Several images illustrating changes in your design or focus over time will be far more informative than text describing those changes. Instead, use text to describe the rationale behind the evolution of your project.
+### Data
+We sifted through multiple databases and other data sources to find the information necessary for our project. We changed courses a few times based on much data was available, how specific it was, and the points we were trying to convey to our reader. Although not all of the following data sources are represented in our final version, all of them were helpful in our research and understanding of this topic.
-Your process book should include the following topics. Depending on your project type the amount of discussion you devote to each of them will vary:
-- Overview and Motivation: Provide an overview of the project goals and the motivation for it. Consider that this will be read by people who did not see your project proposal.
-- Related Work: Anything that inspired you, such as a paper, a web site, visualizations we discussed in class, etc.
-- Questions: What questions are you trying to answer? How did these questions evolve over the course of the project? What new questions did you consider in the course of your analysis?
-- Data: Source, scraping method, cleanup, etc.
-- Exploratory Data Analysis: What visualizations did you use to initially look at your data? What insights did you gain? How did these insights inform your design?
-- Design Evolution: What are the different visualizations you considered? Justify the design decisions you made using the perceptual and design principles you learned in the course. Did you deviate from your proposal?
-- Implementation: Describe the intent and functionality of the interactive visualizations you implemented. Provide clear and well-referenced images showing the key design and interaction elements.
-- Evaluation: What did you learn about the data by using your visualizations? How did you answer your questions? How well does your visualization work, and how could you further improve it?
+SIPRI
+OECD
+The Balance
+US Government Revenue
-As this will be your only chance to describe your project in detail make sure that your process book is a standalone document that fully describes your results and the final design.
-[Here](http://dataviscourse.net/2015/assets/process_books/bansal_cao_hou.pdf) are a [few examples](http://dataviscourse.net/2015/assets/process_books/walsh_trevino_bett.pdf) of process books from a similar course final.
+For most of our data we had to employ some about of cleaning. This involving downloading spreadsheets or CSV files, selecting the data we wished to use, and converting into our desired format (JSON).
-### Project Website
-You will create a public website for your project using GitHub pages or any other web hosting service of your choice.
-The web site should contain your interactive visualization, summarize the main results of the project, and tell a story.
-Consider your audience (the site should be public public) and keep the level of discussion at the appropriate level.
-Your process book and data should be linked from the web site as well.
-Also embed your interactive visualization and your screen-cast in your website.
-If you are not able to publish your work (e.g., due to confidential data) please let us know in your project proposal.
+Visualizations
+---
+Our project website contains multiple sections. First, we felt it was important to convey our objectives for this project, as well as provide explanations of our visualizations and additional research to our user. This is shown at the top of our page in the form of an introduction.
-### Project Screen-Cast
+Next we have our section on U.S. military spending, featuring a bar chart. The bar chart shows data on the total military spending from 2003 - 2021 (2021 projected). Important events, such of the start or end of wars, are denoted to give the user an informed idea of global events that impacted spending. To clarify and emphasize the y-values, the cost of each year is displayed under the x-axis when that bar is hovered on.
-Each team will create a two minute screen-cast with narration showing a demo of your visualization and/or some slides.
-You can use any screencast tool of your choice, such as Camtasia.
-Please make sure that the sound quality of your video is good - it may be worthwhile to invest in an external USB microphone.
-Upload the video to an online video-platform such as YouTube or Vimeo and embed it into your project web page.
-We will show some of the best videos in class.
+
-We will strictly enforce the two minute time limit for the video, so please make sure you are not running longer.
-Use principles of good storytelling and presentations to get your key points across. Focus the majority of your screencast on your main contributions rather than on technical details.
-What do you feel is the best part of your project?
-What insights did you gain?
-What is the single most important thing you would like your audience to take away? Make sure it is front and center rather than at the end.
+Our next section focuses on U.S. social spending, and like the military section, also contains a bar graph. The bar chart shows the total spending of the U.S. government on social programs, such as social security, education, and healthcare. Events that significantly impacted Americans financial state, such as the 2008 stock market crash, have been donated above the years they occur, similarly to our other bar graph. This graph also made to be interactive by changing color and showing the cost per year of the bar when hovered on.
-Outside Libraries/References
----
+
-For this project you *do not* have to write everything from scratch.
+The next section features a treemap with an accompanying pie chart showing the spread of military spending from the years 2017 to 2019 in comparison to other countries. Users can select a year, and it will update the pie chart and treemap accordingly. These visualizations are important because they give a reference to the amount the US spends compared to several other top-spending countries, putting the data shown in the above bar charts into perspective for the user.
-You may *reference* demo programs from books or the web, and *include* popular web libraries like Bootstrap, JQuery, Backbone, React, Meteor, etcetera.
+
-Please *do not* use libraries on top of d3, however. Libraries like nvd3.js look tempting, but such libraries often have poor defaults and result in poor visualizations.
-Instead, draw from the numerous existing d3 examples on the web.
+The final section features a line graph of the U.S. military spending by year from 2000 to 2019. This is a variation on the first bar chart, with an animated line emphasizing the climb of military spending over the past two decades. Clicking "Reset" will restart the animation.
-If you use outside sources please provide a References section with links at the end of your Readme.
+
-Resources
+Code
---
-The "[Data is Plural](https://tinyletter.com/data-is-plural/archive)" weekly letter often contains interesting datasets.
+The majority of our code can be found in our backend.js file, which is commented and organized by graph and feature.
-Think of something you're interested in, go find data on it! Include data processing as part of your work on this project.
+### Libraries
+We did not use any additional libraries for this project, apart from d3 and Google Fonts.
-Requirements
----
-
-Store the following in your GitHub repository:
+### Additional Features
+As an additional feature, we have an optional light / dark theme, which users can toggle using the switch in the upper right corner. These themes, which are true to our color palette, allow the user to interact with our site in a unique way, and includes a gentle CSS transition. All parts of this page comply to selected theme, including the d3 elements. Below are examples of this light/dark option.
+
+
-- Code - All web site files and libraries assuming they are not too big to include
-- Data - Include all the data that you used in your project. If the data is too large for github store it on a cloud storage provider, such as Dropbox or Yousendit.
-- Process Book- Your Process Book in PDF format.
-- README - The README file must give an overview of what you are handing in: which parts are your code, which parts are libraries, and so on. The README must contain URLs to your project websites and screencast videos. The README must also explain any non-obvious features of your interface.
-GitHub Details
+Achievements
---
+### Design
+- Consistently used a color scheme appropriate to the subject matter, as researched with resource 1
+
-- Fork the repo. You now have a copy associated with your username.
-- Make changes to index.html to fulfill the project requirements.
-- Make sure your "master" branch matches your "gh-pages" branch. See the GitHub Guides referenced above if you need help.
-- Edit the README.md with a link to your gh-pages or other external site: for example http://YourUsernameGoesHere.github.io/DataVisFinal/index.html
-- To submit, make a [Pull Request](https://help.github.com/articles/using-pull-requests/) on the original repository.
-
-Grading
----
+### Technical
+- Implemented a light / dark theme option using CSS and a stylized input checkbox located in the top right corner of the page (further detail and images are included in the features section)
+- Created interactive bar charts, changing colors of bars and including the amounts on each hover
+- Made a treemap to display the scale of how much more the U.S. spends
+- Made a Treemap and Pie chart that is updated from a selection dropdown
+- Created an animated line graph that resets when "Reset" button is clicked
-- Process Book - Are you following a design process that is well documented in your process book?
-- Solution - Is your visualization effective in answering your intended questions? Was it designed following visualization principles?
-- Implementation - What is the quality of your implementation? Is it appropriately polished, robust, and reliable?
-- Presentation - Are your web site and screencast clear, engaging, and effective?
-Your individual project score will also be influenced by your peer evaluations.
-
-References
+Resources
---
-
-- This final project is adapted from https://www.dataviscourse.net/2020/project/
+[1] https://visme.co/blog/how-to-choose-a-color-scheme/
+[2] https://www.w3schools.com/howto/howto_css_switch.asp
+[3] https://www.sipri.org/databases/milex
+[4] https://www.oecd.org/social/expenditure.htm>
+[5] https://www.thebalance.com/u-s-military-budget-components-challenges-growth-3306320
+[6] https://www.usgovernmentrevenue.com/downloadbr>
diff --git a/assets/animatedline.png b/assets/animatedline.png
new file mode 100644
index 00000000..38690ea4
Binary files /dev/null and b/assets/animatedline.png differ
diff --git a/assets/color.png b/assets/color.png
new file mode 100644
index 00000000..2efbf907
Binary files /dev/null and b/assets/color.png differ
diff --git a/assets/dark.png b/assets/dark.png
new file mode 100644
index 00000000..c80edcc9
Binary files /dev/null and b/assets/dark.png differ
diff --git a/assets/light.png b/assets/light.png
new file mode 100644
index 00000000..71ccf614
Binary files /dev/null and b/assets/light.png differ
diff --git a/assets/military_bar.png b/assets/military_bar.png
new file mode 100644
index 00000000..7a35f128
Binary files /dev/null and b/assets/military_bar.png differ
diff --git a/assets/social_bar.png b/assets/social_bar.png
new file mode 100644
index 00000000..8d0756bd
Binary files /dev/null and b/assets/social_bar.png differ
diff --git a/assets/treemappie.png b/assets/treemappie.png
new file mode 100644
index 00000000..b9a316d4
Binary files /dev/null and b/assets/treemappie.png differ
diff --git a/backend.js b/backend.js
new file mode 100644
index 00000000..0c715528
--- /dev/null
+++ b/backend.js
@@ -0,0 +1,777 @@
+function main(){
+ let selector = "2019";
+
+
+ let submitSelect = document.getElementById("select");
+ submitSelect.addEventListener("change", function(d){
+ selector = (submitSelect.options[submitSelect.selectedIndex].text);
+ console.log(selector);
+ createTreeMap(selector);
+ createPieChart(selector);
+ })
+
+
+ createTreeMap(selector);
+ createPieChart(selector);
+ animatedLineGraph();
+
+ function createPieChart(selector){
+ d3.select("#svgPie").remove();
+
+ let margin = {top: 150, right: 160, bottom: 150, left: 150},
+ width = 545 - margin.left - margin.right,
+ height = 545 - margin.top - margin.bottom;
+
+ // append the svg object to the body of the page
+ let svg = d3.select("#piechart")
+ .append("svg").attr("id", "svgPie")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .append("g")
+ .attr("transform",
+ "translate(" + margin.left + "," + margin.top + ")");
+
+
+ let data;
+ //Only showing top 4 military powerhouses
+ if(selector === "2017"){
+ data = [{country: "USA", value: 646.7},{country: "CHINA", value: 228.4},{country: "INDIA", value: 64.5},{country: "RUSSIA", value: 66.5}]
+ }
+ if(selector === "2018"){
+ data = [{country: "USA", value: 682.4},{country: "CHINA", value: 253.4},{country: "INDIA", value: 66.2},{country: "RUSSIA", value: 61.3}]
+
+ }if(selector === "2019"){
+ data = [{country: "USA", value: 732},{country: "CHINA", value: 261},{country: "INDIA", value: 71.1},{country: "RUSSIA", value: 65.1}]
+ }
+
+ console.log(data);
+
+ // Creating Pie generator
+ let pie = d3.pie()
+ .value(function(d) { return d.value;});
+
+ // Creating arc
+ let radius = 200;
+ let arc = d3.arc()
+ .innerRadius(0)
+ .outerRadius(radius - 10);
+
+ let g = svg.append("g")
+ .attr("transform", "translate(150,120)");
+
+ // Grouping different arcs
+ let arcs = g.selectAll("arc")
+ .data(pie(data))
+ .enter()
+ .append("g");
+
+ // Appending path
+ arcs.append("path")
+ .attr("fill", (data)=> {
+ let value = data.data.country;
+ return setColorPie(value)
+ })
+ .attr("stroke", "black")
+ .attr("d", arc);
+
+ // Adding data to each arc
+
+ arcs.append("text")
+ .attr("transform",(d)=>{
+ let _d = arc.centroid(d);
+ _d[0] *= 2.5; //multiply by a constant factor
+ _d[1] *= 2.5; //multiply by a constant factor
+ return "translate(" + _d + ")";
+ })
+ .attr("dy", ".50em")
+ .style("text-anchor", "middle")
+ .text(function(d){
+ return d.data.country + " " + d.data.value;
+ });
+
+ }
+
+
+ function createTreeMap(selector){
+
+ d3.select("#svgTreemap").remove();
+
+ let margin = {top: 10, right: 10, bottom: 10, left: 10},
+ width = 1045 - margin.left - margin.right,
+ height = 645 - margin.top - margin.bottom;
+
+ // append the svg object to the body of the page
+ let svg = d3.select("#treemap")
+ .append("svg").attr("id", "svgTreemap")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .append("g")
+ .attr("transform",
+ "translate(" + margin.left + "," + margin.top + ")");
+
+ let data;
+ if(selector === "2017"){
+ data = json2017;
+ }
+ if(selector === "2018"){
+ data = json2018;
+
+ }if(selector === "2019"){
+ data = json2019;
+ }
+ console.log(data);
+
+ // stratify the data: reformatting for d3.js
+ let root = d3.stratify()
+ .id(function(d) { return d.country; }) // Name of the entity (column name is name in csv)
+ .parentId(function(d) { return d.parent; }) // Name of the parent (column name is parent in csv)
+ (data);
+ root.sum(function(d) { return +d.spending}) // Compute the numeric value for each entity
+
+ // Then d3.treemap computes the position of each element of the hierarchy
+ // The coordinates are added to the root object above
+ d3.treemap()
+ .size([width, height])
+ .padding(2)
+ (root)
+
+ console.log(root.leaves())
+ // use this information to add rectangles:
+ svg
+ .selectAll("rect")
+ .data(root.leaves())
+ .enter()
+ .append("rect")
+ .attr('x', function (d) { return d.x0; })
+ .attr('y', function (d) { return d.y0; })
+ .attr('width', function (d) { return d.x1 - d.x0; })
+ .attr('height', function (d) { return d.y1 - d.y0; })
+ .style("stroke", "black")
+ .style("fill", function(d){ return setColor(d.data.country)});
+
+ // and to add the text labels
+ svg
+ .selectAll("text")
+ .data(root.leaves())
+ .enter()
+ .append("text")
+ .attr("x", function(d){ return d.x0 + 1}) // +10 to adjust position (more right)
+ .attr("y", function(d){ return d.y0 + 20}) // +20 to adjust position (lower)
+ .text(function(d){ return d.data.country + " $" + d.data.spending})
+ .attr("font-size", "10px")
+ .attr("fill", "black")
+
+ }
+
+ function animatedLineGraph(){
+
+ let resetButton = document.getElementById("resetbutton");
+ resetButton.addEventListener("click", function(){
+ d3.select("#svgLine").remove();
+ animatedLineGraph();
+ })
+
+ let data = [
+ {
+ year: 2000,
+ value: 320
+ },
+ {
+ year: 2001,
+ value: 331.8
+ },
+ {
+ year: 2002,
+ value: 378.4
+ },
+ {
+ year: 2003,
+ value: 440.5
+ },
+ {
+ year: 2004,
+ value: 492.9
+ },
+ {
+ year: 2005,
+ value: 533.2
+ },
+ {
+ year: 2006,
+ value: 558.3
+ },
+ {
+ year: 2007,
+ value: 589.5
+ },
+ {
+ year: 2008,
+ value: 656.7
+ },
+ {
+ year: 2009,
+ value: 705.9
+ },
+ {
+ year: 2010,
+ value: 738
+ },
+ {
+ year: 2011,
+ value: 752.2
+ },
+ {
+ year: 2012,
+ value: 725.5
+ },
+ {
+ year: 2013,
+ value: 679.2
+ },
+ {
+ year: 2014,
+ value: 647.7
+ },
+ {
+ year: 2015,
+ value: 633.8
+ },
+ {
+ year: 2016,
+ value: 639.8
+ },
+ {
+ year: 2017,
+ value: 646.7
+ },
+ {
+ year: 2018,
+ value: 682.4
+ },
+ {
+ year: 2019,
+ value: 732
+ }
+ ]
+
+ const svg = d3
+ .select("#linegraph")
+ .append("svg")
+ .attr("height", 300)
+ .attr("id", "svgLine")
+ .attr("width", 600);
+ const margin = { top: 0, bottom: 20, left: 70, right: 20 };
+ const chart = svg.append("g").attr("transform", `translate(${margin.left},0)`);
+ const width = +svg.attr("width") - margin.left - margin.right;
+ const height = +svg.attr("height") - margin.top - margin.bottom;
+ const grp = chart
+ .append("g")
+ .attr("transform", `translate(-${margin.left},-${margin.top})`);
+
+ svg.append("text")
+ .attr("x", width/2 + 50)
+ .attr("y", height + margin.bottom - 30)
+ .style("text-anchor", "middle")
+ .attr("class", "label")
+ .text("Years")
+
+ svg.append("text")
+ .attr("y", 0)
+ .attr("x",0 - (height / 2))
+ .attr("dy", "1em")
+ .attr("transform", "rotate(-90)")
+ .attr("class", "label")
+ .style("text-anchor", "middle")
+ .text("Total Military Spending in Billions (USD)")
+
+
+ const yScale = d3
+ .scaleLinear()
+ .range([height, 0])
+ .domain([0, d3.max(data, dataPoint => dataPoint.value) + 100]);
+ const xScale = d3
+ .scaleBand()
+ .range([0, width])
+ .domain([2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019]);
+
+ const line = d3
+ .line()
+ .x(dataPoint => xScale(dataPoint.year))
+ .y(dataPoint => yScale(dataPoint.value));
+
+ // Add path
+ const path = grp
+ .append("path")
+ .attr("transform", `translate(${margin.left},0)`)
+ .datum(data)
+ .attr("fill", "none")
+ .attr("stroke", "#8edb95")
+ .attr("stroke-linejoin", "round")
+ .attr("stroke-linecap", "round")
+ .attr("stroke-width", 2.5)
+ .attr("d", line);
+
+ const pathLength = path.node().getTotalLength();
+ // D3 provides lots of transition options, have a play around here:
+ // https://github.com/d3/d3-transition
+ const transitionPath = d3
+ .transition()
+ .ease(d3.easeSin)
+ .duration(2500);
+
+ path
+ .attr("stroke-dashoffset", pathLength)
+ .attr("stroke-dasharray", pathLength)
+ .transition(transitionPath)
+ .attr("stroke-dashoffset", 0);
+
+ // Add the X Axis
+ chart
+ .append("g")
+ .attr("transform", `translate(0,${height})`)
+ .call(d3.axisBottom(xScale).ticks(data.length));
+ // Add the Y Axis
+ chart
+ .append("g")
+ .attr("transform", `translate(0, 0)`)
+ .call(d3.axisLeft(yScale));
+
+ }
+
+
+ function setColor(country){
+ switch(country) {
+ case "USA":
+ return "#078553";
+ break;
+ default:
+ return "#8edb95"
+ }
+
+ }
+
+ function setColorPie(key){
+ switch(key) {
+ case "USA":
+ return "#078553";
+ break;
+ default:
+ return "#8edb95"
+ }
+ }
+
+ let ml_margin = {top: 10, right: 30, bottom: 60, left: 70},
+ ml_width = 1000 - ml_margin.left - ml_margin.right,
+ ml_height = 520 - ml_margin.top - ml_margin.bottom;
+
+ // Append SVG
+ let ml_svg = d3.select("#military_line_vis")
+ .append("svg")
+ .attr("width", ml_width + ml_margin.left + ml_margin.right)
+ .attr("height", ml_height + ml_margin.top + ml_margin.bottom)
+ .append("g")
+ .attr("transform",
+ "translate(" + ml_margin.left + "," + ml_margin.top + ")");
+
+ // X axis
+ let ml_x = d3.scaleBand()
+ .domain([2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021])
+ .range([0, ml_width])
+ .paddingInner(0.1);
+ ml_svg.append("g")
+ .attr("transform", "translate(0," + ml_height + ")")
+ .call(d3.axisBottom(ml_x).tickValues([2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021]).tickFormat(d3.format("d")));
+ ml_svg.append("text")
+ .attr("x", ml_width/2)
+ .attr("y", ml_height + ml_margin.bottom)
+ .style("text-anchor", "middle")
+ .attr("class", "label")
+ .text("Years")
+
+ // Y axis
+ let ml_y = d3.scaleLinear()
+ .domain([300, 1100])
+ .range([ ml_height, 0 ]);
+ ml_svg.append("g")
+ .call(d3.axisLeft(ml_y));
+ ml_svg.append("text")
+ .attr("y", 0 - ml_margin.left)
+ .attr("x",0 - (ml_height / 2))
+ .attr("dy", "1em")
+ .attr("transform", "rotate(-90)")
+ .attr("class", "label")
+ .style("text-anchor", "middle")
+ .text("Total Military Spending in Billions (USD)")
+
+ // Bars
+ ml_svg.selectAll("bar")
+ .data(militaryData)
+ .enter()
+ .append("rect")
+ .attr("x", function (d) { return ml_x(d.year) })
+ .attr("y", function (d) { return ml_y(d.budget) })
+ .attr("width", ml_x.bandwidth())
+ .attr("height", function(d) { return ml_height - ml_y(d.budget) })
+ .style("padding", "5px")
+ .style("fill", "#6EAF73")
+ .on("mouseover", function(d, i) {
+ d3.select(this)
+ .style("fill", "#93BEDF");
+ ml_svg.append("text")
+ .attr("x", ml_x(i.year))
+ .attr("y", 490)
+ .attr("class", "hoverLabel")
+ .style("font-size", "14px")
+ .style("font-weight", "bold")
+ .style("fill", function(d) {
+ if (document.getElementById("body").className === "dark") return "#F9F9F9"
+ else return "#373E40"
+ })
+ .text("$" + i.budget + " B");
+ })
+ .on("mouseout", function() {
+ d3.select(this)
+ .style("fill", "#6EAF73");
+ ml_svg.selectAll(".hoverLabel")
+ .remove()
+ })
+
+ // 2003 text
+ ml_svg.append("text")
+ .attr("x", 53)
+ .attr("y", 20)
+ .attr("class", "label")
+ .text("Start of")
+ ml_svg.append("text")
+ .attr("x", 50)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("Iraq War")
+ ml_svg.append("text")
+ .attr("x", 53)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2003)")
+ ml_svg.append('line')
+ .attr('x1', 75)
+ .attr('y1', 70)
+ .attr('x2', 75)
+ .attr('y2', 200)
+ ml_svg.append('line')
+ .attr('x1', 75)
+ .attr('y1', 199.5)
+ .attr('x2', 19.5)
+ .attr('y2', 199.5)
+ ml_svg.append('line')
+ .attr('x1', 20)
+ .attr('y1', 199.5)
+ .attr('x2', 20)
+ .attr('y2', 373)
+
+ // 2006 text
+ ml_svg.append("text")
+ .attr("x", 170)
+ .attr("y", 20)
+ .attr("class", "label")
+ .text("Costs rise")
+ ml_svg.append("text")
+ .attr("x", 180)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("in Iraq")
+ ml_svg.append("text")
+ .attr("x", 180)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2006)")
+ ml_svg.append('line')
+ .attr('x1', 200)
+ .attr('y1', 70)
+ .attr('x2', 200)
+ .attr('y2', 150)
+ ml_svg.append('line')
+ .attr('x1', 200)
+ .attr('y1', 149.5)
+ .attr('x2', 160)
+ .attr('y2', 149.5)
+ ml_svg.append('line')
+ .attr('x1', 160.5)
+ .attr('y1', 150)
+ .attr('x2', 160.5)
+ .attr('y2', 256.5)
+
+ // 2011 text
+ ml_svg.append("text")
+ .attr("x", 295)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("Iraq War ends")
+ ml_svg.append("text")
+ .attr("x", 317)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2011)")
+ ml_svg.append('line')
+ .attr('x1', 335)
+ .attr('y1', 70)
+ .attr('x2', 335)
+ .attr('y2', 110)
+ ml_svg.append('line')
+ .attr('x1', 335)
+ .attr('y1', 110)
+ .attr('x2', 400)
+ .attr('y2', 110)
+ ml_svg.append('line')
+ .attr('x1', 400)
+ .attr('y1', 110)
+ .attr('x2', 400)
+ .attr('y2', 140)
+
+ // 2012 text
+ ml_svg.append("text")
+ .attr("x", 455)
+ .attr("y", 20)
+ .attr("class", "label")
+ .text("Troop withdrawal in")
+ ml_svg.append("text")
+ .attr("x", 465)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("Afghanistan War")
+ ml_svg.append("text")
+ .attr("x", 495)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2012)")
+ ml_svg.append('line')
+ .attr('x1', 515)
+ .attr('y1', 70)
+ .attr('x2', 515)
+ .attr('y2', 130)
+ ml_svg.append('line')
+ .attr('x1', 515)
+ .attr('y1', 130)
+ .attr('x2', 450)
+ .attr('y2', 130)
+ ml_svg.append('line')
+ .attr('x1', 450)
+ .attr('y1', 130)
+ .attr('x2', 450)
+ .attr('y2', 160)
+
+ // 2016 text
+ ml_svg.append("text")
+ .attr("x", 635)
+ .attr("y", 20)
+ .attr("class", "label")
+ .text("Resurgence")
+ ml_svg.append("text")
+ .attr("x", 646)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("of ISIS")
+ ml_svg.append("text")
+ .attr("x", 647)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2016)")
+ ml_svg.append('line')
+ .attr('x1', 665)
+ .attr('y1', 70)
+ .attr('x2', 665)
+ .attr('y2', 120)
+ ml_svg.append('line')
+ .attr('x1', 665)
+ .attr('y1', 120)
+ .attr('x2', 640)
+ .attr('y2', 120)
+ ml_svg.append('line')
+ .attr('x1', 640)
+ .attr('y1', 120)
+ .attr('x2', 640)
+ .attr('y2', 188)
+
+ // 2018 text
+ ml_svg.append("text")
+ .attr("x", 775)
+ .attr("y", 20)
+ .attr("class", "label")
+ .text("Trump requests")
+ ml_svg.append("text")
+ .attr("x", 765)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("a spending increase")
+ ml_svg.append("text")
+ .attr("x", 800)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2018)")
+ ml_svg.append('line')
+ .attr('x1', 820)
+ .attr('y1', 70)
+ .attr('x2', 820)
+ .attr('y2', 80)
+ ml_svg.append('line')
+ .attr('x1', 820)
+ .attr('y1', 80)
+ .attr('x2', 735)
+ .attr('y2', 80)
+ ml_svg.append('line')
+ .attr('x1', 735)
+ .attr('y1', 80)
+ .attr('x2', 735)
+ .attr('y2', 120)
+
+
+
+ /*** Social Bar Graph ***/
+ let margin = {top: 10, right: 30, bottom: 60, left: 70},
+ width = 1000 - margin.left - margin.right,
+ height = 520 - margin.top - margin.bottom;
+
+
+ // Append SVG
+ let social_svg = d3.select("#social_vis")
+ .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 + ")");
+
+
+ //x axis
+ let social_x = d3.scaleBand()
+ .domain([2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019])
+ .range([0, width])
+ .paddingInner(0.1);
+ social_svg.append("g")
+ .attr("transform", "translate(0," + height + ")")
+ .call(d3.axisBottom(social_x).tickValues([2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019]).tickFormat(d3.format("d")));
+
+ social_svg.append("text")
+ .attr("x", width/2)
+ .attr("y", height + margin.bottom)
+ .style("text-anchor", "middle")
+ .attr("class", "label")
+ .text("Years")
+
+ // y axis
+ let social_y = d3.scaleLinear()
+ .domain([0, 6])
+ .range([height, 0])
+ social_svg.append("g")
+ .call(d3.axisLeft(social_y).tickFormat(function(d) { return d; })
+ .tickSize(3))
+ .style("stroke-width", "1.5px")
+
+ social_svg.append("text")
+ .attr("y", 0 - margin.left)
+ .attr("x",0 - (height / 2))
+ .attr("dy", "1em")
+ .attr("transform", "rotate(-90)")
+ .attr("class", "label")
+ .style("text-anchor", "middle")
+ .text("Total Social Spending in Trillions (USD)")
+
+ social_svg.selectAll("bar")
+ .data(socialData)
+ .enter()
+ .append("rect")
+ .attr("class", "bar")
+ .style("fill", "#93BEDF")
+ .attr("x", function(d) { return social_x(d.year); })
+ .attr("width", social_x.bandwidth())
+ .attr("y", function(d) { return social_y(d.trillion); })
+ .attr("height", function(d) { return height - social_y(d.trillion); })
+ .on("mouseover", function(d, i) {
+ d3.select(this)
+ .style("fill", "#6EAF73");
+ social_svg.append("text")
+ .attr("x", social_x(i.year))
+ .attr("y", 490)
+ .attr("class", "hoverLabel")
+ .style("fill", function(d) {
+ if (document.getElementById("body").className === "dark") return "#F9F9F9"
+ else return "#373E40"
+ })
+ .style("font-size", "14px")
+ .style("font-weight", "bold")
+ .text("$" + i.trillion + " T");
+ })
+ .on("mouseout", function() {
+ d3.select(this)
+ .style("fill", "#93BEDF");
+ social_svg.selectAll(".hoverLabel")
+ .remove()
+ })
+
+ // 2008 text
+ social_svg.append("text")
+ .attr("x", 220)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("Stock Market Crash")
+ social_svg.append("text")
+ .attr("x", 270)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2008)")
+ social_svg.append('line')
+ .attr('x1', 290)
+ .attr('y1', 70)
+ .attr('x2', 290)
+ .attr('y2', 271)
+
+ // fiscal cliff text
+ social_svg.append("text")
+ .attr("x", 470)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("Fiscal Cliff")
+ social_svg.append("text")
+ .attr("x", 485)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2012)")
+ social_svg.append('line')
+ .attr('x1', 505)
+ .attr('y1', 70)
+ .attr('x2', 505)
+ .attr('y2', 227)
+
+ // trade war text
+ social_svg.append("text")
+ .attr("x", 760)
+ .attr("y", 40)
+ .attr("class", "label")
+ .text("Trade War Begins")
+ social_svg.append("text")
+ .attr("x", 800)
+ .attr("y", 60)
+ .attr("class", "label")
+ .text("(2018)")
+ social_svg.append('line')
+ .attr('x1', 822)
+ .attr('y1', 70)
+ .attr('x2', 822)
+ .attr('y2', 170)
+ // })
+
+ /*** Light / Dark Slider ***/
+ let slider = document.getElementById("sliderId")
+ let body = document.getElementById("body")
+
+ slider.addEventListener('change', function() {
+ if (slider.checked) {
+ body.className = "dark"
+ d3.selectAll(".label").style("fill", "#F9F9F9").style("transition", "1s")
+ d3.selectAll("line").style("stroke", "#F9F9F9").style("transition", "1s")
+ } else {
+ body.className = "light"
+ d3.selectAll(".label").style("fill", "#373E40").style("transition", "1s")
+ d3.selectAll("line").style("stroke", "#373E40").style("transition", "1s")
+ }
+ })
+
+}
diff --git a/csv/datamilitary.csv b/csv/datamilitary.csv
new file mode 100644
index 00000000..3a7d7790
--- /dev/null
+++ b/csv/datamilitary.csv
@@ -0,0 +1,6 @@
+Country,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019
+USA,NA,NA,NA,NA,NA,NA,NA,NA,NA,NA,NA,NA,NA,9.6,10.3,11.3,12.0,12.1,12.0,11.8,12.0,11.8,12.3,12.4,12.0,11.3,10.4,9.9,9.6,9.4,9.4,9.4
+Japan,3.0,3.1,3.1,3.1,3.0,2.8,2.8,2.7,2.6,2.7,2.4,2.6,2.5,2.6,2.6,2.6,2.7,2.7,2.7,2.6,2.6,2.5,2.5,2.5,2.5,2.4,2.5,2.5,2.5,2.5,2.5,2.5
+France,5.9,5.8,5.6,5.5,5.1,4.9,4.9,4.6,4.4,4.4,4.2,4.2,4.0,3.9,3.9,3.9,4.0,3.8,3.7,3.6,3.6,3.7,3.5,3.4,3.3,3.2,3.3,3.3,3.4,3.4,3.3,3.3
+Italy,4.0,3.8,3.3,3.2,3.0,3.0,3.0,2.8,3.1,3.3,3.4,3.6,3.7,3.5,3.6,3.6,3.6,3.4,3.2,3.1,3.2,3.0,3.0,3.0,2.8,2.8,2.5,2.4,2.7,2.8,2.8,2.8
+Switzerland,5.4,5.4,5.6,5.1,4.8,4.1,4.0,4.1,3.8,3.6,3.6,3.2,3.2,3.1,2.8,2.7,2.6,2.6,2.5,2.5,2.4,2.3,2.2,2.2,2.1,2.2,2.0,2.0,2.1,2.1,2.0,2.2
diff --git a/csv/social-data.csv b/csv/social-data.csv
new file mode 100644
index 00000000..13eece34
--- /dev/null
+++ b/csv/social-data.csv
@@ -0,0 +1,18 @@
+Year,Social Spending,Trillion
+2003,15.8,1.81
+2004,15.7,1.92
+2005,15.5,2.02
+2006,15.5,2.14
+2007,15.7,2.27
+2008,16.3,2.39
+2009,18.4,2.66
+2010,19.1,2.86
+2011,18.8,2.92
+2012,18.5,2.99
+2013,18.5,3.1
+2014,18.5,3.24
+2015,18.5,3.37
+2016,18.5,3.46
+2017,18.4,3.59
+2018,18.2,3.74
+2019,18.7,4.00
\ No newline at end of file
diff --git a/csv/socialSpending.csv b/csv/socialSpending.csv
new file mode 100644
index 00000000..b5847baa
--- /dev/null
+++ b/csv/socialSpending.csv
@@ -0,0 +1,6 @@
+Country,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019
+France,24.4,25,25.8,27.2,27.2,28.5,28.8,28.6,28.9,28.8,27.7,27.7,28.4,28.8,28.9,28.8,28.4,28.3,28.5,31,31.1,30.8,31.2,31.7,32,31.8,31.8,31.5,31.1,31
+Italy,20.6,21,21.7,22,22,21.1,21.5,22.2,22.3,22.7,22.6,22.8,23.3,23.6,23.9,24.1,24.2,24.1,25,27,27,26.6,27.3,27.9,28.2,28.3,27.9,27.6,27.8,28.2
+Japan,10.9,11,11.6,12.4,12.9,13.2,13.2,13.6,14.3,15.1,15.4,16.1,16.4,16.6,16.8,17.1,17.2,17.6,18.6,20.8,21.2,22.2,22.1,22.1,21.8,22.2,22.3,22.3,NA,NA
+Switzerland,13,13.8,15.2,16.6,16.6,14.8,15.1,15.5,15.5,15.3,14.5,14.8,15.8,16.4,16.3,16.1,15.4,14.8,14.5,16,15.7,15.6,15.9,16.2,16.1,16.6,16.8,17,16.7,NA
+United States,13.2,14.2,14.8,15.1,15.1,14.9,14.7,14.3,14.4,14.1,14.1,14.7,15.5,15.8,15.7,15.5,15.5,15.7,16.3,18.4,19.1,18.8,18.5,18.5,18.5,18.5,18.6,18.4,18.2,18.7
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..46b63df3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Final Project
+
+
+
+
United States Spending
+
Military vs Social Programs
+
+
+
+
+Light/Dark Toggle
+
+
+
+ Over the past 20 years, the United States has faced some of the worst economic crises in history.
+ From the Great Recession of 2007 - 2009 to the 2020 Recession (the worst since the
+ Great Depression [1]), Americans have been struggling. Currently, we are battling the
+ physical, emotional, and economic toll of COVID-19. In the past year unemployment has peaked at
+ an unprecedented 14.8% [2], and many Americans who were lucky enough to survive a COVID infection
+ (and some family members whose loved ones did not) have been plunged into medical debt, even with
+ private insurance [3].
+
+
+ Despite these struggles, the United States has seen its budget become increasingly militarized.
+ The US is the largest military spender in the world, larger than the next 10 highest spenders
+ combined [4]. Within the military budget itself, programs such as Veterans Affairs is dwarfed by spending
+ by the Department of Defense and overseas contingency operations (OCO). The OCO, which includes
+ the cost of wars, has spent over $2 trillion financing the War on Terror [5]: a war which is conservatively
+ estimated to have displaced 37 million people and left over 800,000 dead [6].
+
+
+
+
+
+ Below, you can see the total military spending for the US from the past 19 years. This visualization
+ shows a distinct upwards trend, despite troop withdrawal from both Afghanistan and Iraq [7], and an
+ announcement by President Obama in 2013 that the War on Terror was over [6]. Also note how the U.S.
+ military budget is reactionary to external events: increasing and decreasing as necessary in response
+ to outside circumstances.
+
+
+
+
+
+ Here you can see the total social spending for the US from the past 17 years. An important aspect to note
+ is that unlike the military budget, which is reactionary and increases dramatically, the budget for social
+ programs responds only to inflation. This means that despite the multiple financial crises that have hit the
+ United States in our lifetime, the government does not offer additional economic support to its citizens.
+ This is in stark contrast to the U.S. government’s history of corporate bailouts, which occur in amounts
+ of billions to trillions of dollars, and a luxury only afforded to Americans recently at the height of the
+ pandemic [8].
+
+
+
+
+
+ While the social spending with the U.S. is in the trillions compared to the billions of military spending,
+ the vast majority of that budget goes towards social security, which is only returned to U.S. citizens
+ when they become of age to receive payments. These trillions of dollars are not spent, but rather given
+ back to people after they retire. Because of this, a false perception of fair funding can be made.
+ We wanted to focus less on parts of social spending like social security, and instead look at other ways
+ that the government is spending money. It turned out however, that the United States tries to spend as
+ little money as possible for social spending, with no showing of increase during economic crises.
+ Comparing the social spending in this way and the United States military, it is clear that the government
+ has a higher interest in finding its military than funding its social programs.
+
+
+
+
+
+ Below is a Treemap + Pie chart of the years 2017-2019 of the military budget of top spending nations.
+ Using these formats, it is clear that the United States spends billions of dollars more than all other
+ countries. In fact, in 2019, the U.S. Military Spending budget was larger than the next 10 countries combined [9].
+ Not only does the United States spend an exorbitant of money relative to other domestic spending, but also
+ when compared on a global stage.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Below is an animated line graph of the Yearly Spending in Billions of the U.S. Military from 2000-2019.
+ This animation shows the clear increase in military spending in the early 2000s, and a decline between 2011-2016,
+ with a now sharp rise in more military spending. This visualization uses the same data as the first bar graph displayed
+ in a different way to emphasis the continuous increase of spending.
+ Click "Reset" to re-run the animation.
+
-We will strictly enforce the two minute time limit for the video, so please make sure you are not running longer.
-Use principles of good storytelling and presentations to get your key points across. Focus the majority of your screencast on your main contributions rather than on technical details.
-What do you feel is the best part of your project?
-What insights did you gain?
-What is the single most important thing you would like your audience to take away? Make sure it is front and center rather than at the end.
+Our next section focuses on U.S. social spending, and like the military section, also contains a bar graph. The bar chart shows the total spending of the U.S. government on social programs, such as social security, education, and healthcare. Events that significantly impacted Americans financial state, such as the 2008 stock market crash, have been donated above the years they occur, similarly to our other bar graph. This graph also made to be interactive by changing color and showing the cost per year of the bar when hovered on.
-Outside Libraries/References
----
+
-For this project you *do not* have to write everything from scratch.
+The next section features a treemap with an accompanying pie chart showing the spread of military spending from the years 2017 to 2019 in comparison to other countries. Users can select a year, and it will update the pie chart and treemap accordingly. These visualizations are important because they give a reference to the amount the US spends compared to several other top-spending countries, putting the data shown in the above bar charts into perspective for the user.
-You may *reference* demo programs from books or the web, and *include* popular web libraries like Bootstrap, JQuery, Backbone, React, Meteor, etcetera.
+
-Please *do not* use libraries on top of d3, however. Libraries like nvd3.js look tempting, but such libraries often have poor defaults and result in poor visualizations.
-Instead, draw from the numerous existing d3 examples on the web.
+The final section features a line graph of the U.S. military spending by year from 2000 to 2019. This is a variation on the first bar chart, with an animated line emphasizing the climb of military spending over the past two decades. Clicking "Reset" will restart the animation.
-If you use outside sources please provide a References section with links at the end of your Readme.
+
-Resources
+Code
---
-The "[Data is Plural](https://tinyletter.com/data-is-plural/archive)" weekly letter often contains interesting datasets.
+The majority of our code can be found in our backend.js file, which is commented and organized by graph and feature.
-Think of something you're interested in, go find data on it! Include data processing as part of your work on this project.
+### Libraries
+We did not use any additional libraries for this project, apart from d3 and Google Fonts.
-Requirements
----
-
-Store the following in your GitHub repository:
+### Additional Features
+As an additional feature, we have an optional light / dark theme, which users can toggle using the switch in the upper right corner. These themes, which are true to our color palette, allow the user to interact with our site in a unique way, and includes a gentle CSS transition. All parts of this page comply to selected theme, including the d3 elements. Below are examples of this light/dark option.
+
+
-- Code - All web site files and libraries assuming they are not too big to include
-- Data - Include all the data that you used in your project. If the data is too large for github store it on a cloud storage provider, such as Dropbox or Yousendit.
-- Process Book- Your Process Book in PDF format.
-- README - The README file must give an overview of what you are handing in: which parts are your code, which parts are libraries, and so on. The README must contain URLs to your project websites and screencast videos. The README must also explain any non-obvious features of your interface.
-GitHub Details
+Achievements
---
+### Design
+- Consistently used a color scheme appropriate to the subject matter, as researched with resource 1
+
-- Fork the repo. You now have a copy associated with your username.
-- Make changes to index.html to fulfill the project requirements.
-- Make sure your "master" branch matches your "gh-pages" branch. See the GitHub Guides referenced above if you need help.
-- Edit the README.md with a link to your gh-pages or other external site: for example http://YourUsernameGoesHere.github.io/DataVisFinal/index.html
-- To submit, make a [Pull Request](https://help.github.com/articles/using-pull-requests/) on the original repository.
-
-Grading
----
+### Technical
+- Implemented a light / dark theme option using CSS and a stylized input checkbox located in the top right corner of the page (further detail and images are included in the features section)
+- Created interactive bar charts, changing colors of bars and including the amounts on each hover
+- Made a treemap to display the scale of how much more the U.S. spends
+- Made a Treemap and Pie chart that is updated from a selection dropdown
+- Created an animated line graph that resets when "Reset" button is clicked
-- Process Book - Are you following a design process that is well documented in your process book?
-- Solution - Is your visualization effective in answering your intended questions? Was it designed following visualization principles?
-- Implementation - What is the quality of your implementation? Is it appropriately polished, robust, and reliable?
-- Presentation - Are your web site and screencast clear, engaging, and effective?
-Your individual project score will also be influenced by your peer evaluations.
-
-References
+Resources
---
-
-- This final project is adapted from https://www.dataviscourse.net/2020/project/
+[1] https://visme.co/blog/how-to-choose-a-color-scheme/