{
// GRATICULE: bar lines <path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
const target_map = htl.html`<svg viewBox="0 0 ${width + 120} ${height + 120}" style="display: block;"/></svg>`
//viewBox="0 0 ${width} ${height}"
// <path d="${path(outline)}" fill="#fff"></path>
// <path d="${path(land)}" fill= "##2E2E2E"></path>
// <path d="${path(borders)}" fill="none" stroke="#fff"></path>
// <path d="${path(outline)}" fill="none" stroke="#000"></path>
const svg_sel= d3.select(target_map);
// GROUPING all elements
const grouping= svg_sel.append("g")
.attr("transform", `translate( ${margin.left}, ${margin.top })`);
//////////////////////////////
// LAND structure
// attr: d=> Defines path to be drawn
// path: projection from D3 Geopath
grouping.append("path")
.attr("d", path(outline))
.attr("fill", "#fff");
grouping.append("path")
.attr("d", path(land) )
.attr("fill", "##2E2E2E");
grouping.append("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "#fff");
grouping.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "white");
/////////////////////////////
///////////////////////////
// append circle points of XCo2
// DATA: change the data based on ALTERNATE selection
// grouping.selectAll("circle")
svg_sel.selectAll("circle")
.data(select_data.slice(0, maxNum))
.join('circle')
.attr('cx', d => projection([ d.Longitude, d.Latitude])[0])
.attr('cy', d => projection([ d.Longitude, d.Latitude])[1])
.attr('fill', d=> colorXco2( d.Xco2))
.attr('r',2);
// COLOR BAR
//add color bar image
grouping.append("image")
.attr("href", color_bar)
.attr("width", 1200)
.attr("height", 80)
// .attr("transform", `translate( margin.left , ${height +200})`);
.attr("transform", `translate( ${margin.top + 20}, ${height - margin.top -margin.bottom + 50})`);
// color scale
// LABELS
// grouping.append("g")
// .attr("class", "xAxis")
// .attr("transform", `translate(0, ${height - margin.top -margin.bottom + 60})`);
// grouping.select(".xAxis")
// .call( d3.axisBottom(x));
return target_map;
}
bar={
// grouping.select(d3.ticks(0, 1, 20))
const scale= html`
${
d3.ticks(0, 1, 20)
.map(color_scale)
.map(
t =>
`<span title="XCO2"
style="background:${t};
height: 50px;
width:4%;
display: inline-block;">
</span>`
)
}`
// return scale;
}
// viewof s= ramp(angryRainbow)
x= d3.scaleLinear()
.domain(d3.extent(oco2_data, d=> d["Xco2"]))
.range([240, iwidth - 200])
x.domain()
height
margin= ({ left: 20, top: 40, right: 20, bottom: 10});
iheight= height - margin.top - margin.bottom;
iwidth= width - margin.left - margin.right;
oco2_data= FileAttachment("cali_2018_2020.csv").csv()
oco2_global_2018= FileAttachment("oco2_global_2018.csv").csv()
oco2_global_hundred= FileAttachment("global_2018_hundredth@2.csv").csv()
oco2_global_tenth= FileAttachment("global_2018_tenth@4.csv").csv()
color_scale= d3.scaleLinear()
.range(["yellow", "red"])
color_bar= await( await FileAttachment("xco2_color_bar.png")).url()
colorXco2 = d3.scaleLinear()
.domain([ 395, 400, 405, 410, 415])
.range([ "royalblue","blue", "green", "yellow", "red"])
projection = d3.geoEqualEarth()
path = d3.geoPath(projection)
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0),
l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
world = FileAttachment("countries-50m.json").json()
import { slider } from "@jashkenas/inputs"
d3= require("d3@6")
import { ramp } from "@sagarlimbu/d3-color-scale"
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.
