Building a globe visualization with external connections

Country and land shapes from the Natural Earth dataset. Fetch GeoJSON files
under /gh/nvkelso/natural-earth-vector/geojson/, e.g.
ne_110m_admin_0_countries.geojson for world country polygons. Features carry
useful properties: NAME, ADM0_A3 (ISO-3 code), CONTINENT, POP_EST, GDP_MD.

Build a "World Atlas" data explorer using the world_geojson connection.

- A large interactive globe (d3 orthographic projection) that slowly
  auto-rotates and can be dragged to spin. Draw it from
  /gh/nvkelso/natural-earth-vector/geojson/ne_110m_admin_0_countries.geojson.
- Color countries by a switchable metric — population, GDP, income group,
  continent — with a matching legend.
- Clicking a country pauses the rotation and opens a side panel with its
  details.
- Dark space theme with a subtle starfield. Aim for the polish of the d3
  gallery on Observable.

This app is not linked to the requested connection

import { useLightdashClient } from '@lightdash/query-sdk';

const client = useLightdashClient();

useEffect(() => {
    client
        .externalFetch('world_geojson', {
            method: 'GET',
            path: '/gh/nvkelso/natural-earth-vector/geojson/ne_110m_admin_0_countries.geojson',
        })
        .then((res) => setGeo(res.body)) // parsed GeoJSON FeatureCollection
        .catch((err) => setError(err.message));
}, [client]);

const projection = d3.geoOrthographic().scale(R).translate([cx, cy]).clipAngle(90);
const path = d3.geoPath(projection);

svg.append('path').datum({ type: 'Sphere' }).attr('class', 'geo')
    .attr('d', path).attr('fill', '#0d3868'); // ocean

svg.append('g').selectAll('path.country')
    .data(geo.features)
    .join('path')
    .attr('class', 'geo country')
    .attr('d', path)
    .attr('fill', (feature) => colorFor(feature))
    .attr('stroke', '#08121e');

// Drag to rotate: nudge the projection, redraw every path
const drag = d3.drag().on('drag', (event) => {
    const [lambda, phi, gamma] = projection.rotate();
    projection.rotate([
        lambda + event.dx * 0.3,
        Math.max(-70, Math.min(70, phi - event.dy * 0.3)),
        gamma,
    ]);
    svg.selectAll('.geo').attr('d', path);
});
svg.call(drag);

const res = await client.externalFetch('weather', {
    method: 'GET',
    path: '/v1/forecast',
    query: {
        latitude: '48.86', // query values must be strings
        longitude: '2.35',
        current: 'temperature_2m,weathercode',
        timezone: 'auto',
    },
});

Color the countries by total revenue from the orders explore instead of
population. Join on the customer country ISO-3 code. Countries with no
revenue stay gray.

import { query, useLightdash } from '@lightdash/query-sdk';

const revenueByCountry = query('orders')
    .label('Revenue by country')
    .dimensions(['customers_country_code']) // ISO 3166-1 alpha-3
    .metrics(['orders_total_revenue'])
    .limit(500);

function Globe({ geo }) {
    const { data, loading, error, lineage } = useLightdash(revenueByCountry);

    const byCountry = useMemo(
        () =>
            new Map(
                (data ?? []).map((row) => [
                    row.customers_country_code,
                    row.orders_total_revenue,
                ]),
            ),
        [data],
    );

    const color = d3
        .scaleSequential(d3.interpolateBlues)
        .domain([0, d3.max([...byCountry.values()]) ?? 1]);

    const fillFor = (feature) => {
        const value = byCountry.get(feature.properties.ADM0_A3);
        return value != null ? color(value) : '#1a2535'; // gray = no data
    };

    // Render the globe with fillFor, and spread {...lineage} on the
    // root element so the host's "Inspect data" can trace the query.
}

// Flat world map, sized to the container
const projection = d3.geoNaturalEarth1().fitSize([width, height], geo);

// One region: filter the features, then fit the projection to them
const europe = {
    type: 'FeatureCollection',
    features: geo.features.filter((f) => f.properties.CONTINENT === 'Europe'),
};
const regional = d3.geoMercator().fitExtent(
    [[16, 16], [width - 16, height - 16]],
    europe,
);