Global Temperature Trends / Justin Gosses

Workspace

Published

NASA (mostly forks so go to original)

Edited

Dec 10, 2018

Fork of Global Temperature Trends

NASA (mostly forks so go to original)

Exploration of NASA Acronyms with Multiple Meanings Code.nasa.gov Data Explorations Untitled Untitled Quick Exploration of a selected subset of the DATA.NASA.GOV's data.json file. Not all the metadata but a selection so people can understand the fields that exist in the data schema.Untitled Untitled Comparing human-generated vs. A.I.-generated keyword tags on Code.nasa.gov Find Labor Hours To Generate OpenSouce NASA Code Since A Selected Date NASA's Open-Source Code Projects: NLP Generated Tags Cluster Stars and constellations II Exoplanets Public Engagement with NASA's Open-Source Code Projects on Github Mapping Across Time Finding Recent Additions to Code.nasa.gov Visitors to .gov websites via API from analytics.usa.gov. NASA examples Licenses of Open-Source NASA code projects on code.gov NASA's Open-Source Code Projects Meteorite landings Untitled Phases of the Moon Inverted Nasa Photos Asteroids API <a href="https://api.nasa.gov/api#neows-swagger">(N.E.O.)</a> Exploration NASA Api Explorer Github Api Explorer Color Rendering of Spectra Meteorite landings

Global Temperature Trends

Working with data from transcripts World Population Line Graphs Geometric Algebra Solar System Simulation List of Agencies using NOSA License in Projects on code.gov Global surface temperature change GISTEMP nos enseña sobre el calentamiento global Re: “Can Moons Have Moons?”Distance to shore EPIC “Blue Marble” Browser Request Playground Análisis de temperatura de superficie GISS (GISTEMP)Global Temperature Trends Night Skies — Lights and Light Pollution WebGL Globe Satellite ground track visualizer Pt. 2 Can sound add value to data visualizations?

{

const p = document.createElement("div");

p.appendChild(document.createTextNode("I am also a "));

p.appendChild(document.createElement("i")).appendChild(document.createTextNode("paragraph"));

p.appendChild(document.createTextNode(" element!"));

console.log(p);

return p;

}

{

const svg = d3.select(DOM.svg(width, height));

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("g")

.attr("stroke", "#000")

.attr("stroke-opacity", 0.2)

.selectAll("circle")

.data(data)

.enter().append("circle")

.attr("cx", d => x(d.date))

.attr("cy", d => y(d.value))

.attr("fill", d => z(d.value))

.attr("r", 2.5)

.on("click",function(d){

popup.html(absoluteUrl("Google", "www.google.com")

+ absoluteUrl("Youtube", "www.youtube.com")

+ absoluteUrl("Techcrunch", "www.techcrunch.com"))

.style("left", (d3.event.pageX) + "px")

.style("top", (d3.event.pageY + 20) + "px")

.style("opacity",1.0)

.append("text")

// .select("text")

.text("X")

.on("click", function(d) {

popup.style("opacity",0.0);

})

console.log(popup);

// })

// .on("click",function(d){

// /* 鼠标移动时，更改样式 left 和 top 来改变提示框的位置 */

// popup.style("left", (d3.event.pageX) + "px")

// .style("top", (d3.event.pageY + 50) + "px")

// .on("mouseout",function(d){

// /* 鼠标移出时，将透明度设定为0.0（完全透明）*/

// popup.style("opacity",0.0);

})

// console.log(d3.select("#popup"));

// var cross = d3.select("#popup")

// .append("text")

// .text("This is my new text")

// // .style("opacity", 1)

// .on("click", function(d) {

// popup.style("opacity",0.0);

// // cross.style("opacity", 0.0);

// })

// console.log(cross);

// })

// .on("mouseout",function(d){

// /* 鼠标移出时，将透明度设定为0.0（完全透明）*/

// popup.style("opacity",0.0);

// })

return svg.node();

}

absoluteUrl = (title, url) => {

return "<p><a target=" + "_blank " + "href=https://" + url + "> " + title + "</a></p>";

}

rawData = {

return await d3.csv("https://gist.githubusercontent.com/ChelseaZheng/62c61bf50b7a32c19995783330d4fdf4/raw/5936c82847b5c6bbbec9023db9a3ae0326f7901a/2018facebook_final.csv")

}

data = {

const data = [];

// https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv

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

// var arr = rawData[i].dates.split("/");

data.push({

date: parse(rawData[i].dates),

value: rawData[i].scores

});

}

return data;

}

aveData = {

// console.log(rawData);

var expensesAvgAmount = d3.nest()

.key(function(d) {

// console.log(d);

return (d.date); })

.rollup(function(v) { return d3.mean(v, function(d) { return d.value; }); })

.entries(data);

// console.log(JSON.stringify(expensesAvgAmount));

return expensesAvgAmount;

}

height = 600

margin = ({top: 20, right: 30, bottom: 30, left: 40})

x = d3.scaleTime()

.domain(d3.extent(data, d => d.date))

.range([margin.left, width - margin.right])

y = d3.scaleLinear()

.domain(d3.extent(data, d => d.value)).nice()

.range([height - margin.bottom, margin.top])

z = {

const max = d3.max(data, d => Math.abs(d.value));

return d3.scaleSequential(d3.interpolateRdBu).domain([max, -max]);

}

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).ticks(width / 80))

.call(g => g.select(".domain").remove())

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y).ticks(null, "+"))

.call(g => g.select(".domain").remove())

.call(g => g.selectAll(".tick line")

.filter(d => d === 0)

.clone()

.attr("x2", width - margin.right - margin.left)

.attr("stroke", "#ccc"))

.call(g => g.append("text")

.attr("fill", "#000")

.attr("x", 5)

.attr("y", margin.top)

.attr("dy", "0.32em")

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

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

.text("Anomaly (°C)"))

d3 = require("d3@5")

line = d3.line()

.x(d => x(d.date))

.y(d => y(d.value))

allStockRawData = {

return await d3.csv("https://gist.githubusercontent.com/ChelseaZheng/54a74f61a30cd4d32e1d0bf9ded1d8a5/raw/e8895edb6510c89200aa8829a518c824dfd2e73b/fb_stock_price.csv")

}

yearStockData = {var yearStockData = d3.nest()

.key(function(d) { return d.date; })

.entries(allStockRawData);

return yearStockData;}

parse = d3.timeParse("%m/%d/%Y")

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more