Skip to content

final-MarieTessier--SaiVadlamudi #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gabi246 wants to merge 13 commits into
base: main
Choose a base branch
from
Open

final-MarieTessier--SaiVadlamudi #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
15b2f89
index.html created
Feb 24, 2022
c411045
set up template for design
svadlamudi2 Mar 1, 2022
b8b95c4
graphs and web
Mar 3, 2022
9f2a1ca
graphs and info
Mar 3, 2022
1e6f9bb
finished writeup for sunburst chart
svadlamudi2 Mar 3, 2022
68f47d4
kinda fixed hovering problem
svadlamudi2 Mar 3, 2022
c1a37a5
info
Mar 3, 2022
589587c
Update README.md
gabi246 Mar 3, 2022
97d0684
project book
Mar 3, 2022
e743b76
Merge branch 'main' of https://github.com/gabi246/final
Mar 3, 2022
d409468
Update README.md
gabi246 Mar 3, 2022
e5c4b70
Update README.md
gabi246 Mar 3, 2022
96ceb98
finished readme
svadlamudi2 Mar 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Final Project Project Book.pdf
View file
Open in desktop
Binary file not shown.
89 changes: 4 additions & 85 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,12 @@
Final Project - Interactive Data Visualization
===
Website URL: https://gabi246.github.io/final/

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, provide an exploratory interface to some topic of your own choosing, or take on a more ambitious experiment than A3.
You will acquire the data, design your visualizations, implement them, and critically evaluate the results.
Website Presentation: https://www.loom.com/share/3fe286eac1a345faa3f2bc60133485c4

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.
The purpose for this website is to bring an understanding on the effects of climate change. We want to create clear visualizations on temperature changes through the years in the Worcester area.
We programmed the website using D3 libraries, HTML, and CSS. All references are included at the end of the Process Book.

Proposals / Idea Generation
---

Submit project ideas using [this Google Form](https://docs.google.com/forms/d/e/1FAIpQLSepaCzjEq9AXwmJ8mJ-06ytkQUuLI1Z2QF5KGyhVnKaxBI-mA/viewform?usp=sf_link).

You're encouraged to submit many ideas-- staff will help you identify the most promising ones and possible roadblocks.

Please stick to 1-4 folks per team.

Final Project Materials
---
For your final project you must hand in the following items.

### Process Book

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.

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.

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?

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.

Tip: Start your process book on Day 1. Make entries after each meeting, and trim / edit as needed towards the end of the project. Many folks use either slides software (like PowerPoint) or Google Docs to make this book, as both allow for flexible layouts and export to PDF.


### Project Website

Create a public website for your project using GitHub pages or another 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 if possible, unless you're running an experiment, etc.) 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.

### Project Screen-Cast

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 or Loom (new and recommended).
Please make sure that the sound quality of your video is good -- it may be worthwhile to invest in an external USB microphone-- campus IT should have some you can borrow.
Upload the video to an online video-platform such as YouTube or Vimeo and embed it into your project web page.
For our final project presentation day, we will show as many videos in class as possible, and ask teams to field questions.

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.

Outside Libraries/References
---

For this project you *do not* have to write everything from scratch.

You may *reference* demo programs from books or the web, and *include* popular web libraries like Material UI, React, Svelte, etcetera.

Please *do not* use libraries on top of d3 without consulting staff, however.
Libraries like nvd3.js look tempting, but such libraries often have poor defaults and result in poor visualizations.
There may be exceptions.
Instead, draw from the numerous existing d3 examples on the web.

If you use outside sources please provide a References section with links at the end of your Readme.

Resources
---
The "[Data is Plural](https://tinyletter.com/data-is-plural/archive)" weekly letter often contains interesting datasets.

Think of something you're interested in, go find data on it! Include data collection and processing as part of your work on this project.

Requirements
---
Expand Down
33 changes: 33 additions & 0 deletions data.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
year,value
1990,-0.10
1991,-0.74
1992,-0.80
1993,-1.44
1994,-0.73
1995,-0.20
1996,-1.22
1997,0.29
1998,-0.19
1999,0.02
2000,0.33
2001,0.25
2002,0.27
2003,-0.24
2004,0.75
2005,0.32
2006,0.50
2007,0.43
2008,0.09
2009,0.05
2010,0.43
2011,-0.24
2012,-0.61
2013,0.67
2014,-0.85
2015,0.62
2016,1.04
2017,0.34
2018,-0.12
2019,0.94
2020,0.02
2021,0.85
Binary file added gpc.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
261 changes: 261 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<!--
- Marie Tessier
- CS480X: Data Visualization
- HW1
-->

<html>

<head>
<link rel="stylesheet" href="style.css">

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS4802 Final</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body>
<div class="container">
<h1 class="centered">Climate Change</h1>
<img src="gpc.jpg" alt="forest tree" >
</div>

<div class="text1">
<p>Climate change is a major issue that humanity is facing. Warming tempertures
and changing weather patterns are effecting the globe. </p>
<p>But what is causing this distruption in the natural cycle and balance of the Earth?
The answer is global emissions.
</p>
</div>

<!-- sunburst graph -->
<div class="sunburstGraph">
<svg class="sunburst"></svg>
<script>
var nodeData = {
"name": "CONTRIBUTORS OF EMISSIONS", "children": [{
"name": "Energy",
"children": [
{ "name": "Energy In Agriculture and Fishing", "size": .17 },
{ "name": "Emissions from Energy Producton", "size": 0.58 },
{ "name": "Unallocated Fuel Emissions", "size": 0.78 },
{ "name": "Energy Use in Buildings", "size": 1.75 },
{ "name": "Transport", "size": 1.62 },
{ "name": "Energy use in Industry", "size": 2.4 }]
},
{
"name": "Industry",
"children": [
{ "name": "Cement", "size": 0.3 },
{ "name": "Chemicals", "size": 0.22 }]
},
{
"name": "Waste",
"children": [{ "name": "Landfills", "size": 0.19 },
{ "name": "Wastewater", "size": 0.13 }]
},
{
"name": "Agriculture Forestry and Land Use",
"children": [{ "name": "Cropland", "size": 0.14 },
{ "name": "Deforestation", "size": 0.22 },
{ "name": "Crop Burning", "size": 0.35 },
{ "name": "Rice Cultivation", "size": 0.13 },
{ "name": "Agriculture Soils", "size": 0.41 },
{ "name": "Livestock and Manuer", "size": 0.58 }]
}]
};

// Variables
var width = 600;
var height = 500;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeAccent);

// Create primary <g> element
var g = d3.select('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

// Data strucure
var partition = d3.partition()
.size([2 * Math.PI, radius]);

// Find data root
var root = d3.hierarchy(nodeData)
.sum(function (d) { return d.size });

// Size arcs
partition(root);
var arc = d3.arc()
.startAngle(function (d) { return d.x0 })
.endAngle(function (d) { return d.x1 })
.innerRadius(function (d) { return d.y0 })
.outerRadius(function (d) { return d.y1 });

var div = d3.select("body").append("div")
.attr("class", "tooltip-donut")
.style("opacity", 0)
.style("background", "#808080")
.style("stroke", "white")
.style("stroke-width", "1px")
.style("width", "300px")
.style("color", "white")


// Put it all together
g.selectAll('path')
.data(root.descendants())
.enter().append('path')
.attr("display", function (d) { return d.depth ? null : "none"; })
.attr("d", arc)
.style('stroke', 'black')
.style("fill", function (d) { return color((d.children ? d : d.parent).data.name); })
.on("mouseover", function (d, i) {
div.html(`Sector: ${i.data.name}, ${i.data.size * 10}%`)
.transition()
.duration(50)
.style("opacity", 1)
.style("position", "relative")
.style("left", (d.clientX + 5) + "px")
.style("top", (d.clientY - 800) + "px");
})
.on("mouseout", function (d) {
div.transition()
.duration('50')
.style("opacity", 0);
})
.style("cursor", "pointer");

g.selectAll('slicesText')
.data(root.descendants())
.enter()
.append('text')
.text(function (d, i) {
if(d.data.size == null) {
return d.data.name;
}
else if(d.data.size > 0.4) {
return d.data.name;
}
else {
return "";
}
})
.attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
.style("text-anchor", "middle")
.style("font-size", function (d, i) {
console.log(d)
if(d.data.size == null) {
return 15;
}
else {
return 10;
}
})
</script>
<p style="width: 800px; margin: auto; margin-top: 15px;">The graph above is what is known as a "sunburst" graph that depicts multiple data points and the overall picture. In this case we can see that the biggest contributors to greenhouse gas emissions. Are Energy at 73.2%, Agriculture Forestry and Land Use at 18.4%, Industry at 5.2%, and Waste at 3.2%. When hovering over each of the outer rings you are able to see even closely at how the major industries in each of greenhouse gas contributors.
</p>
</div>

<!-- tempature barchart -->
<div class="barchart" style="text-align: center;">
<p style="width: 800px; margin: auto; margin-top: 15px;">
Temperature anomalies are important when researching global climate change. This is the difference between the long-term average temperature and the temperature that is actually occurring. A positive anomaly means that the temperature was warmer than normal, while a negative means the temperature was cooler than normal.

We are using temperature anomaly data from Worcster, MA in 1990-2022. As seen in this graph, the temperatures are trending increasingly warmer than the long-term average. This is seen below in the graph.
</p>
<script>

//making the barchart
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// Set ranges
var x = d3.scaleBand()
.range([40, width])
.padding(0.1);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);


//getting data
d3.csv("data.csv").then(function(data) {
var barDataValue = [];
for (let i = 0; i < data.length; i++) {
barDataValue[i] = data[i].value;
}

var yScale = d3.scaleLinear()
.domain([0, d3.max(barDataValue)])
.range([0, height]);

var yAxisScale = d3.scaleLinear()
.domain([d3.min(barDataValue), d3.max(barDataValue)])
.range([height, 0]);

// Scale the range of the data in the domains
x.domain(data.map(function(d) { return d.year; }));

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", function(d) {
return "hidden";
})
.style("background", "#808080")
.style("stroke", "white")
.style("stroke-width", "1px")
.text("test");

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("x", function(d,i) { return margin.left + i * x.bandwidth();})
.attr("width", x.bandwidth())
.attr("y", function(d) { return height - Math.max(0, yScale(d.value)); })
.attr("height", function(d) { return Math.abs(yScale(d.value)); })
.style("fill", function(d){
if(d.value < 0) {
return "#4e79a7";
} else {
return "#e15759";
};
})
.style("stroke", "black")
.style("stroke-width", "1px")
.on("mouseover", function(d) { return tooltip.style("visibility", "visible");})
.on("mousemove", function(d,i){
tooltip.text("Year: " + i.year + " Value: " + i.value);
return tooltip.style("top", (d.clientY +400) +"px").style("left",(d.clientX + 10) +"px");
})
.on("mouseout", function(d){
return tooltip.style("visibility", "hidden");
});

// Add x axis
svg.append("g")
.attr("transform", "translate(0," +(height) + ")");

// Add y axis
var yAxis = d3.axisLeft(yAxisScale);
svg.append('g')
.attr('transform', function(d) {
return 'translate(' + margin.left + ', 0)';
})
.call(yAxis);

});

</script>
</div>
</body>

</html>
Loading