Notebooks 2.0 is here.
map = htl.html`<svg viewBox="0 0 ${width} ${height}" style="display: block;">
<path d="${path(outline)}" fill="#fff"></path>
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path d="${path(land)}"></path>
<path d="${path(borders)}" fill="none" stroke="#fff"></path>
<path d="${path(outline)}" fill="none" stroke="#000"></path>
</svg>`
projection = d3.geoEqualEarth().translate( [ width/2, height / 2]).scale([120])
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()
chart={
const target= html`<svg viewBox= "0 0 ${width} ${height}"/></svg>`;
// const svg= d3.create("svg")
// .attr("viewBox", [0, 0, width, height]);
// svg.append("path")
// .attr("d", "M 10 10 H 90 V 90 H 10 L 10 10");
const svg_sel= d3.select(target);
const grouping= svg_sel.append("g")
.attr("transform", `translate(${margin.left}, ${ margin.top})`);
// AXIS labels
grouping.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${iheight})`)
grouping.append("g")
.attr("class", "yAxis")
// .attr("transform", `translate(${margin.left}, 0)`)
grouping.select(".xAxis")
.call(d3.axisBottom(x));
grouping.select(".yAxis")
.call(d3.axisLeft(y));
grouping.selectAll("circle")
.data(data_salary)
.join("circle")
.attr("cx", d=> x(d["YearsExperience"]))
.attr("cy", d=> y(d["Salary"]))
.attr("r", 4)
.attr("fill", "red");
return svg_sel.node();
}
x= d3.scaleLinear()
.domain([0, d3.extent(data_salary, d=> d["YearsExperience"])])
.range([0 , iwidth])
y= d3.scaleLinear()
.domain(d3.extent(data_salary, d=> d["Salary"]))
.range([iheight- 0])
margin= ({ left: 20, top: 40, right: 30, bottom: 20})
iwidth= width - margin.left -margin.right
iheight= height - margin.top - margin.bottom
height= 400
data_oco2= FileAttachment("cali_2018_2020.csv").csv()
data_salary= FileAttachment("Salary_Data.csv").csv()
d3= require("d3@6")
import {swatches} from "@d3/color-legend"
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.
