joiner

A map for Civic Joy Fund data. Joiner joins rows from a spreadsheet, a file, an Airtable view, a Google Sheet or a DataSF dataset to areas on a map. The areas include San Francisco districts, ZIPs, neighborhoods and census tracts, H3 hexagons, Bay Area counties and ZIPs, election precincts and the districts made from them, or polygons you upload. Each area is colored by how many rows it has, or by the total, average or share of any number column. Rows with a location are drawn too. The join logic is JoinKit, shared with Selecter.

Live at https://civic-joy-fund.github.io/joiner/. Hover the Joiner logo to see the version; CHANGELOG.md says what changed in each. Nothing is uploaded: files are read in your browser.

Loading data

Drop a file anywhere on the page, or click Load data. The dialog has Open a file… and a box for a link.

• A CSV with a column that names areas (district, ZIP, neighborhood).
• GeoJSON, or a CSV with WKT or latitude/longitude columns. These rows are drawn on the map and can be placed by location.
• Airtable. Under Airtable, paste a view link and a personal access token with data.records:read and schema.bases:read.
  • Show other tables lists every table the token can open. With a saved token, the folded heading says how far it reaches ("token: 3 bases, 12 tables").
  • Linked records are brought in as "Link: Field" columns.
  • Contact fields (email, phone, mailing address, attachments, users) are left out unless you add them back.
  • You can also load the API's records JSON as a file.
• A link to an online CSV, JSON or GeoJSON file, a DataSF or other Socrata dataset, or a Google Sheet.
  • Google Sheets must be shared with "Anyone with the link".
  • A Socrata dataset link loads every row, not just the first 1,000.
  • Other sites work only if they let other web pages read their files (CORS). If one doesn't, download the file and load that instead.
• A Joiner snapshot saved with Save: the rows and every setting, in one file you can reopen later.

Sharing. After loading a link or an Airtable view, the page address carries it (?url=… or ?airtable=…), so the page can be shared. The Airtable token is never put in the address: it stays in your browser tab until the tab closes, and whoever opens a shared page uses their own token. Snapshots contain every column you loaded, so remove names, emails and phone numbers before sharing one.

Big files. Files with tens or hundreds of thousands of rows show their progress as they read, place, count and color. A 26 MB CSV of 367,000 rows loads in about 3 seconds. Above 2,000 located rows, a file starts drawn as pinpoints; above 50,000, its points start hidden (the areas still count them).

Matching rows to areas

Match rows by picks the column, or Location (the area that contains each row's point; lines count by their midpoint). Joiner tries every column and picks the one that places the most rows; the menu shows each column's count.

• If nothing matches on the current tab and a column's name says what it holds (ZIP, district, neighborhood), Joiner switches to that set. For neighborhoods, it asks which set the names come from.
• Names are matched forgivingly:
  • Case, spaces and punctuation don't matter: "Downtown / Civic Center" matches "Downtown/Civic Center".
  • Either side of a slashed name matches it: "Treasure Island" matches "Treasure Island/YBI".
  • Names of 8 or more letters can be a letter or two off: "Outer Susnet" matches "Outer Sunset".
• A cell can list several areas, separated by commas, semicolons, pipes or line breaks. The row then counts in each of them. Clicking or hovering such a row marks all its areas, and its card names any part that isn't an area ("Not on the map: Citywide").
• The panel shows how many rows were placed and lists the values that matched no area.
• How each set matches values is set by match in config/layers.json. For example, districts accept 5, D5 or District 5.

Area sets

The tabs along the top are District, ZIP, Neighborhood (SF Find, Analysis, Planning, Realtor or Who's on First), H3 hexbins and Other. Other holds:

• Census Tracts
• Bay Area Counties and Bay Area ZIP Codes
• Election Precincts 2022, plus the US House, State Senate, Assembly and BART Board districts made from them
• Upload polygons (GeoJSON)…, to add your own areas for the session

Bay Area sets zoom out to show all of themselves.

H3 hexbins work anywhere, not just in SF.

• Auto picks the level whose hexagons are about 32 pixels across at the current zoom and latitude.
• The small table shows the level in use and the one on either side, each with the zooms where Auto picks it, its side length and its area.
• −½ / +½ moves the levels half a zoom later or sooner, and − / + moves one level. Fixed keeps a level at every zoom.
• Hexagons get friendly names like "Mission #82c7": the area that covers most of the hexagon, plus a short code. They're named by neighborhood, or by county once they're bigger than a neighborhood. You can also name them by any other set, or show the full H3 index.
• Clicking a hexagon pans to it without zooming, so the grid stays the same.

This is the beginning of the README. Read the rest at the original. Read the full README ↗