Global Temperature Trends / chelseazheng

chelseazheng

Workspace

Published

Edited

Nov 28, 2018

Fork of Global temperature trends

•

1 fork

{

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