Geo Plot - TypeError: Cannot read properties of undefined (reading 'table')

[enlore]

Hey team. Impressed with Mosaic so far, very snappy and generally easy to work with.

I'm trying to render a map of the United States and I'm running into an issue. My goal is to render the map and overlay a dot mark showing the location of all the state capitals.

I started out basing my code on the earthquakes example here: https://uwdata.github.io/mosaic/examples/earthquakes.html

See error and code snippets below. GeoJSON and state capitals data files attached. Additional connection management code not shown here is taken from the Mosaic DuckDB-Wasm integration example project.

Runtime environment is Chrome Version 120.0.6099.234.

Dependencies:

{
  "@motherduckdb/wasm-client": "^0.3.0",
  "@uwdata/vgplot": "^0.4.0",
  "apache-arrow": "^14.0.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.21.2",
  "topojson-client": "^3.1.0"
}

Any help would be appreciated.

Error

chunk-AJIX5OSW.js?v=6173dd3b:813 Uncaught TypeError: Cannot read properties of undefined (reading 'table')
    at chunk-AJIX5OSW.js?v=6173dd3b:813:36
    at Array.map (<anonymous>)
    at _Query.toString (chunk-AJIX5OSW.js?v=6173dd3b:811:25)
    at consolidationKey (@uwdata_vgplot.js?v=6173dd3b:11580:16)
    at entryGroups (@uwdata_vgplot.js?v=6173dd3b:11569:17)
    at run (@uwdata_vgplot.js?v=6173dd3b:11545:21)
    at @uwdata_vgplot.js?v=6173dd3b:11556:50

Snippet from Throwing Code

from2 is undefined at runtime. This leads me to think I am missing a from directive somewhere?

if (from.length) {
      const rels = from.map(({ as, from: from2 }) => {
        const rel = isQuery(from2) ? `(${from2})` : `${from2}`;
        return !as || as === from2.table ? rel : `${rel} AS "${as}"`;
      });
      sql2.push(`FROM ${rels.join(", ")}`);
    }

Component Code

import { useState, useRef, useEffect } from 'react'
import * as vg from '@uwdata/vgplot';
import * as topojson from 'topojson-client'

export default function JobsByZipMap () {
    const [vizElement, setVizElement] = useState<object | null>(null)

    async function buildViz() {
        try {
            const capitalsJSON = await fetch('data/us_state_capitals.json')
                .then(response => response.json())

            await vg.coordinator().exec(
                vg.loadObjects('capitals', capitalsJSON)
            )

            // confirming we have data in the database
            const citiesStates = await vg.coordinator().query(
                'select * from capitals',
                { type: 'json' }
            )

            console.info(citiesStates.map(row => { return row.toJSON() }))

            console.info('query complete')

        } catch (e) {
            console.error('query failed', e)
            throw e
        }

        const us = await fetch('data/us-counties-10m.json')
            .then(result => result.json())

        const nation = topojson.feature(us, us.objects.nation)

        setVizElement(vg.plot(
                vg.projectionType("albers-usa"),
                vg.geo(
                    nation,
                    { fill: "currentColor", fillOpacity: 0.2 }
                ),
                vg.dot(
                    vg.from('capitals'),
                    {
                        x: 'lon',
                        y: 'lat',
                        stroke: 'red',
                        fill: 'red',
                        fillOpacity: '0.3'
                    }
                ),
            )
        )
    }

    useEffect(() => {
      let ignore = false

    // react render lifecycle bookkeeping 
      async function doBuildViz () {
          if (!ignore) {
              await buildViz()
          }
      }

      doBuildViz()

      return () => {
        ignore = true
      }
    }, [])

    const vizRef = useRef(null)

    if (vizElement && vizRef && vizRef.current) {
        // if we dont clear the ref's innerHTML, we end up with two instances of the viz
        //   likely due to our useEffect firing twice
        vizRef.current.innerHTML = ''
        vizRef.current.appendChild(vizElement)
    }

    return  <div ref={vizRef}></div>
}

us_state_capitals.json
us-counties-10m.json

[jheer]

Hmm... maybe try replacing this

const nation = topojson.feature(us, us.objects.nation)

with this

const nation = topojson.feature(us, us.objects.nation).features;

vgplot doesn't currently recognize GeoJSON objects as input data, but should properly handle an Array containing individual GeoJSON features.

[enlore]

Awesome, thank you. That helped. The dot mark is still having an issue but the map will render if I comment out the vg.dot directive.

Dot mark is complaining about mixing data types. My source data looks to be consistent as far as the type of the lat and lon values.

Error

@uwdata_vgplot.js?v=6173dd3b:33755 Uncaught (in promise) TypeError: Cannot mix BigInt and other types, use explicit conversions
    at TransformStream.point (@uwdata_vgplot.js?v=6173dd3b:33755:26)
    at Object.point (@uwdata_vgplot.js?v=6173dd3b:33930:20)
    at project (@uwdata_vgplot.js?v=6173dd3b:41147:12)
    at Dot.project (@uwdata_vgplot.js?v=6173dd3b:42764:11)
    at Dot.scale (@uwdata_vgplot.js?v=6173dd3b:42772:12)
    at plot (@uwdata_vgplot.js?v=6173dd3b:45221:26)
    at plotRenderer (@uwdata_vgplot.js?v=6173dd3b:50729:16)
    at Plot.render (@uwdata_vgplot.js?v=6173dd3b:50885:24)
    at @uwdata_vgplot.js?v=6173dd3b:50879:40

Source Data

Same as attached above but I cleaned up the justification to make it easy to review at a glance.

Screenshot:

[enlore]

For a lark I tried changing line 23, South Carolina, to a decimal lat: 34.0001. No luck.

[enlore]

Fed a query to the exec function to create an temp table with the lat and long values cast to floats to resolve.

[SNIP]
            await vg.coordinator().exec(
                vg.loadObjects('capitals', capitalsJSON)
            )

            await vg.coordinator().exec(
                `create temp table if not exists capitals_cast as
                    SELECT
                    CAST(lat as FLOAT) as lat,
                    CAST(lon as FLOAT) as lon,
                    state,
                    city
                    FROM capitals
                `
            )

            const citiesStates = await vg.coordinator().query(
                'select * from capitals',
                { type: 'json' }
            )

            console.info(citiesStates.map(row => { return row.toJSON() }))

            console.info('query complete')

        } catch (e) {
            console.error('query failed', e)
            throw e
        }

        const us = await fetch('data/us-counties-10m.json')
            .then(result => result.json())

        const nation = topojson.feature(us, us.objects.nation).features

        setVizElement(vg.plot(
                vg.projectionType("albers-usa"),
                vg.geo(
                    nation,
                    { fill: "currentColor", fillOpacity: 0.2 }
                ),
                vg.dot(
                    vg.from('capitals_cast'),
                    {
                        x: 'lon',
                        y: 'lat',
                        stroke: 'red',
                        fill: 'red',
                    }
                ),
            )
        )
    }
[SNIP]

Nice.

[jheer]

DuckDB can be finicky with types (e.g., Decimal vs Number). Unfortunately the Apache Arrow JS client doesn't properly handle Decimal values yet, leading to downstream errors. So one has to be careful with data loading and/or casts to ensure desired types.

I got a version of your example working in a notebook by loading the state capitals from a CSV file. If you have a live URL you could use vg.loadCSV instead, but here I'm pulling the CSV content directly from a file attachment and registering it via the DuckDB-WASM API. Similar approaches should work for JSON if the DuckDB json extension is installed, but that does not appear to be included by default in the current DuckDB-WASM build.

Example: https://observablehq.com/@uwdata/mosaic-map-example