<svg viewBox="0 0 2000 1200">

<text text-anchor="middle" font-family="ubuntu" font-size="40" font-weight="bold" x="1000" y="50">

Envisioning California's Hydroclimate and its Environmental Effects</text>

<text text-anchor="middle" font-family="ubuntu" font-size="20" fill="#888888" x="1000" y="75">

<tspan x="990" dy="1.2em">Understanding trends in California's winter hydroclimate is crucial for policy decisions, ecosystem health, and inhabitants’ well-being. This visualization stems out of research</tspan>

<tspan x="990" dy="1.2em">conducted with Dr. Antonio Mamalakis of the School of Data Science, which seeks to predict the state’s winter precipitation totals by utilizing Deep Learning techniques. We hope</tspan>

<tspan x="990" dy="1.2em">that our research improves upon existing literature on the topic, which divides California into three regions (North, Central, and South) and attempts to predict average monthly</tspan>

<tspan x="990" dy="1.2em">precipitation during the rainy season (November - March) using global sea surface temperatures from the summer months (April - October), which also roughly corresponds to</tspan>

<tspan x="990" dy="1.2em">California’s fire season. By combining precipitation data with data on California wildfires, we can see how patterns of rainfall in the state impact the devastating yearly cycle of fires.</tspan>

</text>

<text text-anchor="end" font-family="ubuntu" font-size="17" fill="#888888" x="2000" y="1090">

<tspan x="2000" dy="1.2em">Precipitation data was collected from Climate Earth System Model 2 and is measured in millimeters per day each month on a grid of geographic</tspan>

<tspan x="2000" dy="1.2em">coordinates across the state. For this visualization the data is aggregated to show the total amount of rain in millimeters each month. Wildfire</tspan>

<tspan x="2000" dy="1.2em">data was collected from Kaggle and measures the total number of acres burned by a given fire, measured at that fire's start date. A 5-month</tspan>

<tspan x="2000" dy="1.2em">moving average of acres burned was calculated in order to give a more accurate picture of wildfire progression throughout the fire season.</tspan>

</text>

<style>

.area {fill:#ffb9ad; stroke: red;}

.sparkline {fill: none; stroke: #0982d5; stroke-width: 4;}

#prect_dots circle {stroke: #ccc; opacity: 0.75;}

#opac_rect rect {opacity: 0.8; fill: #ffffff}

#calif path {fill: none; stroke: #8c8c8c; stroke-width: 4;}

#legend path {stroke: #8c8c8c; stroke-width: 2;}

</style>

<g id="layer1" transform="translate(50 10)"></g>

<g id="layer2" transform="translate(50 400)"></g>

<g id="prect_dots"></g>

<g id="calif"></g>

<g id="legend"></g>

<g id="opac_rect">

<rect id="area_1" x=878 y=380 width=0 height=291></rect>

<rect id="area_2" x=1685 y=380 width=0 height=291></rect>

<rect id="spark_1" x=878 y=699 width=0 height=291></rect>

<rect id="spark_2" x=1685 y=699 width=0 height=291></rect>

</g>

</svg>

<div id="region_controls">

<div>

Region: <button id="btn-north">North</button> <button id="btn-central">Central</button> <button id="btn-south">South</button>

</div>

</div>

<div id="start_date_controls">

<div>

Start Date: <input id="start_datepicker" name="start_date" type="date" value="2013-01-01" />

</div>

</div>

<div id="end_date_controls">

<div>

End Date: <input id="end_datepicker" name="end_date" type="date" value="2019-12-01" />

</div>

</div>

<style>

#region_controls {position: absolute; left: 120px; top: 100px; width: 400px; font-size: 12px; font-weight: 500; font-family: ubuntu;}

#start_date_controls {position: absolute; left: 320px; top: 100px; width: 400px; font-size: 12px; font-weight: 500; font-family: ubuntu;}

#end_date_controls {position: absolute; left: 550px; top: 100px; width: 400px; font-size: 12px; font-weight: 500; font-family: ubuntu;}

button {border: 1px solid #aaa; border-radius: 5px; background-color: #eee; font-size: 10px;}

button:hover {cursor: pointer; background-color: #ccc;}

</style>

</div>

type: "date",

label: html`<b>Start Date</b>`,

value: filterStart

type: "date",

label: html`<b>End Date</b>`,

value: filterEnd

// then we attach an .on("click", () => doSomething) to each of the buttons or control inputs above

// register event listeners

btns.select("#btn-north").on("click", () => region_select("North"));

btns.select("#btn-central").on("click", () => region_select("Central"));

btns.select("#btn-south").on("click", () => region_select("South"));

d3.select(container).select("#start_date_controls").select("#start_datepicker").on("change", () => date_select());

d3.select(container).select("#end_date_controls").select("#end_datepicker").on("change", () => date_select());

.geoMercator()

.center([-119, 37.4])

.scale((1 << 18) / (28 * Math.PI))

.translate([395, 685]);

.datum(calif)

.attr("d", path)

.attr("fill", "none")

.attr("stroke", "#8c8c8c")

.attr("stroke-width", 4);

.attr("transform","translate(0 662)")

.call(xAxis)

.style("color","#888888")

.selectAll("text")

.style("font-family", "ubuntu")

.style("font-size", "13px")

.attr("y", 8);

.call(yAxis

.ticks(6)

.tickFormat(function(d) {

// Check if the tick value is 0, return an empty string if it is

return d === 0 ? "" : d.toLocaleString();

}))

.style("color","#888888")

.style("font-family", "ubuntu")

.style("font-size", "13px")

.attr("transform", "translate(825, 0)");

.attr("x", 845) // Adjust the position of the title

.attr("y", 360) // Adjust the vertical position of the title

.attr("text-anchor", "left")

.style("font-size", "16px")

.style("fill", "#888888")

.style("font-family", "ubuntu")

.style("font-weight", "bold")

.text("Acres Burned by Wildfires (5-month moving average)");

.attr("transform","translate(0 688)")

.call(xAxis2)

.style("color","#888888")

.selectAll("text")

.style("font-family", "ubuntu")

.style("font-size", "13px")

.attr("y", -5)

.attr("dy", "-0.3em");

.call(yAxis2

.ticks(6)

.tickFormat(function(d) {

// Check if the tick value is 0, return an empty string if it is

return d === 0 ? "" : d.toLocaleString();

}))

.style("color","#888888")

.style("font-family", "ubuntu")

.style("font-size", "13px")

.attr("transform", "translate(825, 0)");

.attr("x", 845) // Adjust the position of the title

.attr("y", 995) // Adjust the vertical position of the title

.attr("text-anchor", "left")

.style("font-size", "16px")

.style("fill", "#888888")

.style("font-family", "ubuntu")

.style("font-weight", "bold")

.text("Monthly Precipitation (mm)");

// Convert the date string from the dataset to a Date object

const dataDate = new Date(d["Date"]);

// Compare the dates

return dataDate.getTime() >= startDate.getTime() && dataDate.getTime() <= endDate.getTime();

// Convert the date string from the dataset to a Date object

const dataDate = new Date(d["date"]);

// Compare the dates

return dataDate.getTime() >= startDate.getTime() && dataDate.getTime() <= endDate.getTime();

const point = [d.longitude, d.latitude];

return d3.geoContains(calif, point);

return d["value"];

// Convert the date string from the dataset to a Date object

const dataDate = new Date(d["date"]);

// Compare the dates

const filterStart = new Date("2013-01-01")

const filterEnd = new Date("2019-12-01")

return dataDate.getTime() >= filterStart.getTime() && dataDate.getTime() <= filterEnd.getTime();

});

const point = [d.longitude, d.latitude];

return d3.geoContains(calif, point);

caliData,

// Reducer function to compute the sum of prect and return the region

values => ({

sumPrect: d3.sum(values, d => d.prect),

region: values[0].Region // Assuming the region is the same for all entries in a group

}),

d => `${d.latitude},${d.longitude}` // Key function to group by latitude and longitude

latitude: +key.split(",")[0], // Extracting latitude from the key

longitude: +key.split(",")[1], // Extracting longitude from the key

sumPrect: value.sumPrect,

region: value.region

return d["sumPrect"];

let prect_dots = map.select("#prect_dots").selectAll("circle")

.data(groupedArray)

.join("circle")

.attr("cx", d => projection([d["longitude"],d["latitude"]])[0])

.attr("cy", d => projection([d["longitude"],d["latitude"]])[1])

.attr("r", 6)

.style("fill", d => colorScale(d["sumPrect"]));

return prect_dots;

.append("linearGradient")

.attr("id", "gradient")

.attr("x1", "0%")

.attr("y1", "0%")

.attr("x2", "100%")

.attr("y2", "0%");

.data(colors)

.enter()

.append('stop')

.style('stop-color', function(d){ return d; })

.attr('offset', function(d, i) {

// If there are only three colors, distribute them evenly

if (colors.length === 3) {

if (i === 0) return '0%';

if (i === 1) return '50%';

if (i === 2) return '100%';

} else {

// For more than three colors, use the original calculation

return 100 * (i / (colors.length - 1)) + '%';

}

});

.attr("x", 200)

.attr("y", 1100)

.attr("width", 400)

.attr("height", 30)

.style("fill", "url(#gradient)")

.style('opacity', 0.8);

.attr("x", 160) // Adjust the position of the title

.attr("y", 1120) // Adjust the vertical position of the title

.attr("text-anchor", "middle")

.style("font-size", "16px")

.style("fill", "#888888")

.style("font-family", "ubuntu")

.text("" + prect_min + " mm");

.attr("x", 640) // Adjust the position of the title

.attr("y", 1120) // Adjust the vertical position of the title

.attr("text-anchor", "middle")

.style("font-size", "16px")

.style("fill", "#888888")

.style("font-family", "ubuntu")

.text("" + prect_max + " mm");

.attr("x", 400) // Adjust the position of the title

.attr("y", 1085) // Adjust the vertical position of the title

.attr("text-anchor", "middle")

.style("font-size", "18px")

.style("fill", "#888888")

.style("font-family", "ubuntu")

.style("font-weight", "bold")

.text("Total Precipitation");

var movingAverages = [];

for (var i = 0; i < data.length; i++) {

if (i + windowSize <= data.length) {

var window = data.slice(i, i + windowSize);

var sum = window.reduce(function(acc, obj) { return acc + obj.value; }, 0);

var average = sum / windowSize;

movingAverages.push(average);

} else {

var remaining = data.length - i;

var window = data.slice(i, i + remaining);

var sum = window.reduce(function(acc, obj) { return acc + obj.value; }, 0);

var average = sum / remaining;

movingAverages.push(average);

if (movingAverages.length >= data.length) {

break;

}

}

}

return movingAverages;

// Check if the region is already selected

const index = selectedRegions.indexOf(regionName);

const button = document.getElementById("btn-" + regionName.toLowerCase())

if (index === -1) {

// Region is not selected, add it to the list

selectedRegions.push(regionName);

button.style.backgroundColor = "#eee";

} else {

// Region is already selected, remove it from the list

selectedRegions.splice(index, 1);

button.style.backgroundColor = "#5f5f5f";

}

prect_dots.style("opacity", function(d) {

return selectedRegions.includes(d.region) ? 0.75 : 0.3;

});

mutable area_data = filtered_fire_data.filter(function(d,i){ return selectedRegions.indexOf(d.Region) >= 0 });

mutable regionSparkData = caliSparkData.filter(function(d,i){ return selectedRegions.indexOf(d.Region) >= 0 });

// Get the updated start and end dates from your UI elements

var newStartDate = document.getElementById("start_datepicker").value;

var newEndDate = document.getElementById("end_datepicker").value;

// Update dateRange based on which input was changed

dateRange[0] = newStartDate;

dateRange[1] = newEndDate;

// You can perform any additional operations here, such as updating your visualization

// or triggering other functions based on the updated date range

d3.select('#opac_rect #area_1')

.attr('width', scaleX(new Date(dateRange[0])) - 830); // Update the width relative to the x position

d3.select('#opac_rect #area_2')

.attr('x', scaleX(new Date(dateRange[1])) + 60)

.attr('width', 1860 - scaleX(new Date(dateRange[1]))); // Update the width relative to the x position

d3.select('#opac_rect #spark_1')

.attr('width', scaleX(new Date(dateRange[0])) - 830);// Update the width relative to the x position

d3.select('#opac_rect #spark_2')

.attr('x', scaleX(new Date(dateRange[1])) + 60)

.attr('width', 1860 - scaleX(new Date(dateRange[1])));// Update the width relative to the x position

mutable mapData = prect_data.filter(d => {

// Convert the date string from the dataset to a Date object

const dataDate = new Date(d["date"]);

// Compare the dates

const filterStart = new Date(dateRange[0])

const filterEnd = new Date(dateRange[1])

return dataDate.getTime() >= filterStart.getTime() && dataDate.getTime() <= filterEnd.getTime();

});

};