select_data= xco2_2015
//select_data= xco2_2015.filter( d => d["month"] === "12")
function getMonths(data){
const monthSel= new Set();
data.forEach( i => {
monthSel.add(i["month"]);
});
return Array.from(monthSel)
}
tot= xco2_2015.map( d=> d['Index'])
tot_months= getMonths(xco2_2014)
chart= {
const svg= d3.create("svg")
.attr("viewBox", ([0, 0, width , height + 80]));
const grouping= svg.append("g");
grouping.append("path")
.join("path")
.attr("transform", `translate(${ margin.left }, ${ margin.height - 20})`)
.attr("d", path(land))
//.attr("fill", "lightgray")
.attr("fill", "#E8E8E8")
.attr("stroke", "#000")
.attr("stroke-width", 0.25);
// BORDERS
grouping.append("path")
.join("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 0.15);
// LININGS
grouping.append("path")
.join("path")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none")
.attr("stroke-width", 0.75);
////////////////////
// COLOR BAR
// Create a color bar gradient
const colorBar = svg.append("g")
.attr("transform", `translate( ${width - 950}, ${ height})`);
// Calculate the width of each color segment
var segmentWidth = 40;
var segmentHeight = 20;
var segments = 18;
var segmentColors = [];
for (var i = -9; i <= 9; i++) {
segmentColors.push(colorScale(i));
}
// Draw the color segments
colorBar.selectAll("rect")
.data(segmentColors)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * segmentWidth;
})
.attr("y", 0)
.attr("width", segmentWidth)
.attr("height", segmentHeight)
.attr("fill", function(d) {
return d;
});
// Add text labels to the color bar
colorBar.selectAll("text")
.data(segmentColors)
.enter()
.append("text")
.attr("x", function(d, i) {
return i * segmentWidth;
})
.attr("y", segmentHeight + 15)
.text(function(d, i) {
var value = i - 9;
return value;
})
////// XCO2 scatter plot
svg.selectAll("circle")
.data(select_data.slice(0, maxNum))
// .data(select_data)
.join('circle')
.attr('cx', d => projection([ d.x, d.y])[0])
.attr('cy', d => projection([ d.x, d.y])[1])
.attr('fill', d=> colorXco2( d.mean_xco2_anomaly))
.attr('r', 0.35)
.transition()
// .attr('cx', d => projection([ d.x, d.y])[0])
// .attr('cy', d => projection([ d.x, d.y])[1])
// .attr('fill', d=> colorXco2( d.mean_xco2_anomaly))
// .attr('r', 0.35);
return svg.node();
}
width - 1100
// land = topojson.feature(land50m, land50m.objects.land)
land50m = FileAttachment("land-50m.json").json()
height= 400
margin= ({ left: 20, top: 40, right: 30, bottom: 20})
iwidth= width - margin.left - margin.right
iheight= height - margin.top - margin.bottom
colorBarHeight = 20;
// Create the color bar
colorBarWidth = 400;
colorBarXAxis = d3.axisBottom(colorScale)
.ticks(10)
.tickFormat(d3.format(".0f"));
colorScale = d3.scaleLinear()
.range([colorBarPadding, colorBarWidth - colorBarPadding])
.domain([-9, 9]);
colorBarPadding = 20;
// colorXco2 = d3.scaleLinear()
// //.domain([ -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
// //.range([ "royalblue","blue", "green", "yellow", "red"])
// colorXco2= d3.scaleSequential(["red", "white", "blue"]);
colorXco2= d3.scaleLinear()
.domain(xco2_data_2015)
.range(['red', 'blue']);
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
projection = d3.geoEqualEarth().translate( [ width /2, height -200]).scale([135])
path = d3.geoPath(projection)
borders= topojson.mesh(world, world.objects.countries, (a, b) => a!==b)
world= FileAttachment("countries-50m.json").json()
// xco2_2014= FileAttachment("xco2_anomalies_2014_2018.parquet").parquet()
xco2_data_2015= xco2_2015.map( d => d["mean_xco2_anomaly"])
xco2_2014= FileAttachment("xco2_anomalies_2014@1.csv").csv()
xco2_2015= FileAttachment("xco2_anomalies_2015.csv").csv()
d3= require("d3@6")
import { slider } from "@jashkenas/inputs"
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.
