select_data= xco2_2015.slice(0, 200000)
//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_months= getMonths(xco2_2015)
full_data=xco2_2015.slice(0, 90000)
//select_data_a= xco2_2015
select_data_a= full_data.filter(function(d) {
return (d ['mean_xco2_anomaly']> -6 && d['mean_xco2_anomaly'] < 6)
});
chart_a= {
const svg= d3.create("svg")
.attr("viewBox", ([0, 0, width , height +50]));
const svg_a= d3.create("svg").attr("viewBox", ([0, 0, width + 200, height + 200]))
const grouping_a= svg_a.append("g")
// frist map
grouping_a.append("path").join("path")
.attr("transform", `translate( ${margin.left}, ${margin.height })`)
.attr("d", path(land))
//.attr("fill", "lightgray")
.attr("fill", "#E8E8E8")
.attr("stroke", "#000")
.attr("stroke-width", 0.25);
// BORDERS
grouping_a.append("path")
.join("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 0.15);
// LININGS
grouping_a.append("path")
.join("path")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none")
.attr("stroke-width", 0.75)
const grouping= svg.append("g");
grouping.append("path")
.join("path")
.attr("transform", `translate(${ margin.left }, ${ margin.height})`)
.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);
////// XCO2 scatter plot
svg.selectAll("circle")
.data(select_data_a.slice(0, maxNum))
// .data(select_data.slice(0, 12))
.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)
//////////////////////////////////////////
/// BRUSH
// function brush_func(){
// }
// const brush= d3.brush().on("start brush", brush_func)
////////////////////////////////////////////////////////////
/// Scatter plot or BAR graph to represent the data on side
const bar= svg.append("g")
.attr("transform", `translate(${ width / 1.5}, ${ 10})`)
const x= d3.scaleLinear()
.domain([0, d3.max( select_data_a, d=> d.Index)])
.range([0, 300])
// append the x-axis
bar.append("g")
.attr("transform", `translate(${ 0 }, ${ height/ 2})`)
.call(d3.axisBottom(x))
const y= d3.scaleLinear()
// .domain([0, d3.max(select_data_a, d => d.mean_xco2_anomaly)])
.domain([-6, 6])
.range([200, 0])
bar.append("g")
// .attr("transform", `translate( ${width /2}, ${ 100})`)
.call(d3.axisLeft(y))
//////////////////////////////////
//////////////////////////////////
//Scatterr plot
bar.selectAll("circle")
.data(select_data_a.slice(0, maxNum))
//.data(select_data_a)
.join("circle")
.attr("cx", d => x(d['Index']))
.attr("cy", d => y(d["mean_xco2_anomaly"]))
.attr("r", 1.25)
.attr('fill', d=> colorXco2( d.mean_xco2_anomaly))
// .attr("transform", d=> `translate( ${x(d["Index"])}, ${y(d["mean_xco2_anomaly"])}`)
// .attr("r", 1.25)
// .attr("cx", d => x(d.Index))
// .attr("cy", d => y(d.mean_xco2_anomaly))
// .attr("r", 1.25);
// BARS
// bar.selectAll(".series")
// .data(xco2_2015)
// .selectAll(".bar")
// .data(d=> d)
// .attr("x", d=> d["Index"])
// .attr("y", d => d["monthly"])
// //////////////////////////////////////////////////////////
////////////////////
// COLOR BAR
// Create a color bar gradient
const colorBar = svg.append("g")
.attr("transform", `translate( ${20}, ${ height - 50})`);
// Calculate the width of each color segment
var segmentWidth = 40;
var segmentHeight = 20;
var segments = 18;
var segmentColors = [];
for (var i = -6; i <= 6; 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 - 6;
return value;
})
return svg.node();
}
width /2
height
// 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 = 10;
// Create the color bar
colorBarWidth = 200;
colorBarXAxis = d3.axisBottom(colorScale)
.ticks(10)
.tickFormat(d3.format(".0f"));
colorScale = d3.scaleSequential()
// .range([colorBarPadding, colorBarWidth - colorBarPadding])
.domain([-6, 6])
.range(['red','blue']);
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.scaleSequential()
.domain([-6, 6])
.range(['red', 'blue']);
min_xco2= d3.min(xco2_2015.map(x => x['mean_xco2_anomaly']))
max_xco2= d3.max(xco2_2015.map(x => x['mean_xco2_anomaly']))
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
projection = d3.geoEqualEarth().translate( [ width /4, height / 2]).scale([100])
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",
"d3-simple-slider@1")
import { slider } from "@jashkenas/inputs"
// import { slider } from "@d3-simple-slider@1"
import {Chart} from "@john-guerra/d3-reusable-brushable-scatterplot-pattern"
chart_b= {
const svg= d3.create("svg")
.attr("viewBox", ([0, 0, width , height +50]));
const svg_a= d3.create("svg").attr("viewBox", ([0, 0, width + 200, height + 200]))
const grouping_a= svg_a.append("g")
// frist map
grouping_a.append("path").join("path")
.attr("transform", `translate( ${margin.left}, ${margin.height })`)
.attr("d", path(land))
//.attr("fill", "lightgray")
.attr("fill", "#E8E8E8")
.attr("stroke", "#000")
.attr("stroke-width", 0.25);
// BORDERS
grouping_a.append("path")
.join("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 0.15);
// LININGS
grouping_a.append("path")
.join("path")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none")
.attr("stroke-width", 0.75)
const grouping= svg.append("g");
grouping.append("path")
.join("path")
.attr("transform", `translate(${ margin.left }, ${ margin.height})`)
.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);
////// XCO2 scatter plot
svg.selectAll("circle")
.data(select_data_a.slice(0, maxNum))
// .data(select_data.slice(0, 12))
.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)
//////////////////////////////////////////
/// BRUSH
// function brush_func(){
// }
// const brush= d3.brush().on("start brush", brush_func)
////////////////////////////////////////////////////////////
/// Scatter plot or BAR graph to represent the data on side
const bar= svg.append("g")
.attr("transform", `translate(${ width / 1.5}, ${ 10})`)
const x= d3.scaleLinear()
.domain([0, d3.max( select_data_a, d=> d.Index)])
.range([0, 300])
// append the x-axis
bar.append("g")
.attr("transform", `translate(${ 0 }, ${ height})`)
.call(d3.axisBottom(x))
const y= d3.scaleLinear()
// .domain([0, d3.max(select_data_a, d => d.mean_xco2_anomaly)])
.domain([-6, 6])
.range([200, 0])
bar.append("g")
// .attr("transform", `translate( ${width /2}, ${ 100})`)
.call(d3.axisLeft(y))
//////////////////////////////////
//////////////////////////////////
//Scatterr plot
bar.selectAll("circle")
.data(select_data_a.slice(0, maxNum))
//.data(select_data_a)
.join("circle")
.attr("cx", d => x(d['Index']))
.attr("cy", d => y(d["mean_xco2_anomaly"]))
.attr("r", 1.25)
.attr('fill', d=> colorXco2( d.mean_xco2_anomaly))
// .attr("transform", d=> `translate( ${x(d["Index"])}, ${y(d["mean_xco2_anomaly"])}`)
// .attr("r", 1.25)
/////////////////////////////////////////
// Dropdown menu
function updatePlot(){
const selectedOption= d3.select(this).property("value");
bar.attr("cx", d=> d)
}
// BARS
// bar.selectAll(".series")
// .data(xco2_2015)
// .selectAll(".bar")
// .data(d=> d)
// .attr("x", d=> d["Index"])
// .attr("y", d => d["monthly"])
// //////////////////////////////////////////////////////////
////////////////////
// COLOR BAR
return svg.node();
}
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.
