The avatar for @spattana
Sumant Pattanaik
Published
Edited
Apr 27, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### Visualization`
Insert cell
//allDatesForUS = [...new Set(compiledKaggleCityData.map(d => d.StartTime))]
Insert cell
Insert cell
allDatesForUS = [... new Set(allDatesForUSNotStrings.map(date => date.toString()))]
Insert cell
Insert cell
Insert cell
Insert cell
//emoji = ["☔","🌫️","🌧️","❄️","🧊","⚡","☁️"]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function getMatchedEmojisToWeatherType() {
for(const rowIndex in weatherWithDates){
const type = weatherWithDates[rowIndex]["Type"];
var emoji = "";
if(type=="Rain"){
emoji = "☔";
} else if(type=="Fog"){
emoji = "🌫️";
}
else if(type=="Precipitation"){
emoji = "🌧️";
}
else if(type=="Snow"){
emoji = "❄️";
}
else if(type=="Cold"){
emoji = "🧊";
}
else if(type=="Storm"){
emoji = "⚡";
}
else if(type=="Hail"){
emoji = "☁️";
}
weatherWithDates[rowIndex]["emoji"] = emoji;
}
return weatherWithDates;
}
Insert cell
Insert cell
Insert cell
Table(compilation)
Insert cell
viewof compilation = Search(compiledKaggleCityData)
Insert cell
dayOfWeek = new Date().getDay()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### IMPORT OF MODULES`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//data1 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle1.csv")
Insert cell
//data2 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle2.csv")
Insert cell
//data3 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle3.csv")
Insert cell
//data4 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle4.csv")
Insert cell
//data5 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle5.csv")
Insert cell
//data6 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle6.csv")
Insert cell
//data7 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle7.csv")
Insert cell
//data8 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle8.csv")
Insert cell
//data9 = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/Kaggle9.csv")
Insert cell
md `### VISUALIZING THE KAGGLE DATA`
Insert cell
// compiledKaggleCityData = d3.csv("https://raw.githubusercontent.com/lingmala205/DataVisualizationProject/main/KaggleCityDataTotal.csv")
Insert cell
//Table(compiledKaggleCityData)
Insert cell
//allDatesForUS = [...new Set(compiledKaggleCityData.map(d => d.StartTime))]
Insert cell
// viewof eachTime = slider({
// min: 0,
// max: allDatesForUS.length-1,
// step: 1,
// value: 0,
// format: i => `${allDatesForUS[i]}`,
// title: "Date",
// description: "Choose Date"
// })
Insert cell
// dateTestForUS = allDatesForUS[eachTime]
Insert cell
// {
// var data = [
// {
// type: 'scattermapbox',
// locationmode: 'us',
// lat: compiledKaggleCityData.map(d=>d.LocationLat),
// lon: compiledKaggleCityData.map(d=>d.LocationLng),
// text: compiledKaggleCityData.map(d=>d.County),
// mode : 'markers',
// marker: {
// size : 5,
// color : 'blue',
// }
// },

// ];
// var layout = {
// title: 'Continental US Weather From January 2016 to December 2020',
// mapbox: {
// center: {lat:37.0902,lon:-95.7129},
// style: "open-street-map", zoom: 3
// },
// width: 900,
// height: 500,
// margin: {t: 30, b: 0},
// showlegend: false,
// geo: {
// scope: 'us',
// showland: true,
// landcolor: 'rgb(217, 217, 217)',
// showlakes: true,
// lakecolor: 'rgb(128, 128, 255)'
// }
// };
// const myDiv = DOM.element("div")
// Plotly.newPlot(myDiv, data, layout, {showLink: false});
// return myDiv
// }
Insert cell
md `### Combining Data`
Insert cell
Insert cell
//topCountyPerStateWithCountyStateAbbr = matchStateNameToAbbreviation();
Insert cell
// function getTopCountiesByStateAbb() {
// const statesCounty = {};
// for (var rowIndex in topCountyPerStateWithCountyStateAbbr) {
// var county = topCountyPerStateWithCountyStateAbbr[rowIndex]["COUNTY_NAME"];
// if (!((county == "Fairfax County") || (county == "St. Louis County"))) {
// county = county.replace(" County", "");
// }
// statesCounty[topCountyPerStateWithCountyStateAbbr[rowIndex]["STATE_ABB"]] = topCountyPerStateWithCountyStateAbbr[rowIndex]["COUNTY_NAME"];
// }
// return statesCounty;
// }
Insert cell
//topCountiesByStateAbb = getTopCountiesByStateAbb();
Insert cell
//topCountiesKaggleData = getTopCountiesKaggleData();
Insert cell
//topCountiesKaggleData[topCountiesKaggleData.length - 1]
Insert cell
// function getTopCountiesKaggleData() {
// const data1Filtered = filterKaggleDataByStateAndCounty(data1);
// const data2Filtered = filterKaggleDataByStateAndCounty(data2);
// const data3Filtered = filterKaggleDataByStateAndCounty(data3);
// const data4Filtered = filterKaggleDataByStateAndCounty(data4);
// const data5Filtered = filterKaggleDataByStateAndCounty(data5);
// const data6Filtered = filterKaggleDataByStateAndCounty(data6);
// const data7Filtered = filterKaggleDataByStateAndCounty(data7);
// const data8Filtered = filterKaggleDataByStateAndCounty(data8);
// const data9Filtered = filterKaggleDataByStateAndCounty(data9);
// console.log(data2Filtered[data2Filtered.length - 1]);
// console.log(data3Filtered[data3Filtered.length - 1]);
// console.log(data4Filtered[data4Filtered.length - 1]);
// console.log(data5Filtered[data5Filtered.length - 1]);
// console.log(data6Filtered[data6Filtered.length - 1]);
// console.log(data7Filtered[data7Filtered.length - 1]);
// console.log(data8Filtered[data8Filtered.length - 1]);
// console.log(data9Filtered[data9Filtered.length - 1]);
// const filteredData = data1Filtered.concat(data2Filtered, data3Filtered, data4Filtered, data5Filtered, data6Filtered, data7Filtered, data8Filtered, data9Filtered);
// return filteredData;
// }
Insert cell
// function filterKaggleDataByStateAndCounty(data) {
// const filteredStateData = data.filter(x => Object.keys(topCountiesByStateAbb).includes(x.State));
// const filteredStateAndCountyData = filteredStateData.filter(x => Object.values(topCountiesByStateAbb).includes(x.County));
// console.log(filteredStateAndCountyData[filteredStateAndCountyData.length - 1]);
// return filteredStateAndCountyData;
// }
Insert cell
// function getOneValuePerDatePerCounty() {
// const reducedWeather = [];
// var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
// var oldDateObject = new Date(2000, 0, 0);
// for (var rowIndex in topCountiesKaggleData) {
// var currentRow = topCountiesKaggleData[rowIndex];
// var dateString = currentRow["StartTime(UTC)"];
// var dateArray = reggie.exec(dateString);
// var newDateObject = new Date(
// (+dateArray[1]),
// (+dateArray[2])-1, // Careful, month starts at 0!
// (+dateArray[3]),
// (+dateArray[4]),
// (+dateArray[5]),
// (+dateArray[6])
// );
// if (oldDateObject.getDay() < newDateObject.getDay()) {
// reducedWeather.push(currentRow);
// }
// oldDateObject = newDateObject;
// }
// return reducedWeather;
// }
Insert cell
//reducedKaggleData = getOneValuePerDatePerCounty()
Insert cell
//reducedKaggleData[reducedKaggleData.length - 1 ]
Insert cell
//Table(reducedKaggleData)
Insert cell
md `## Future Forecast Data`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
statesWeeklyForecast = gatherForecastData(uniqueStatesToLatLong);
Insert cell
statesHighLowTemps = getHighLowTemps()
Insert cell
function getHighLowTemps() {
const statesToTemps = {}
for (const state in statesWeeklyForecast) {
const highLows = {};
const futureCasts = statesWeeklyForecast[state];
var count = 0;
for (const index in futureCasts) {
const currentCast = futureCasts[index];
if (currentCast["name"].includes("Night") || currentCast["name"].includes("night")) {
console.log(state)
console.log(currentCast["name"] == "Tonight")
if ((currentCast["name"] == "Tonight" || currentCast["name"] == "Overnight")) {
if (highLows[count] == null) {
highLows[count] = {};
}
highLows[count][1] = currentCast["temperature"];
if (count == 0) {
count++;
}
} else {
highLows[count - 1][1] = currentCast["temperature"];
}
} else {
if (highLows[count] == null) {
highLows[count] = {};
}
highLows[count][0] = currentCast["temperature"];
if (count != 0) {
count++;
}
}
}
statesToTemps[state] = highLows;
}
return statesToTemps;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more