The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Published
Edited
Jan 29, 2021
8 stars
1
maps and geo
Carto SQL API (v3)Hello, Carto Maps API (v3)Hello, Mapbox Geocoder APIHello, PolylineArcGIS JS API: Custom Elevation Profile ChartArcGIS JS API: GPX route overlay from file uploadArcGIS JS API: GPX Route MapperArcGIS JS API: GPX route overlayHello, ArcGIS JS SDK% Chance GOP Takes House Seat in November (Diverging Scale)Location Map using d3-geo and d3-tileSWD: Internet Access Choropleth MakeoverU.S. County Population Density ChoroplethU.S. Hexagon Map SVG with Data JoinedReusable U.S. Choropleth MapHello, CARTO Maps APIU.S. Coronavirus Cumulative Cases Animated MapNY Times COVID-19 Cases by Race/EthnicitySF Bay Area Jobs: QuantilesCARTO-VL: Update Vis LayerHello, CARTO-VLAutocomplete SearchLeaflet Pattern FillsCalifornia Chronic Drinking Water Safety Violationsd3.geoIdentityLat Lon or Lon Lat?Implementing an SVG Zoom Animation Without a D3 TransitionHousehold Internet Access by Population DensityDorling Cartogram Circle PacksGolden Gate Bathymetry ContoursU.S. County CentroidsU.S. Broadband Internet AccessSF Bay Area Jobs Viz SVG Exporter v2Hello, NYC Geosearch API!
Mapping Airline Data From OmniSciDB
Tutorial: MapBoxGL HexBin MapSF Bay Area Job DensitySF Bay Area BasemapMapD Connector NPM test
Also listed in…
tutorials
featured
Insert cell
Insert cell
Insert cell
Insert cell
MapdCon = require("@mapd/connector@5/dist/browser-connector.js").catch(() => window.MapdCon)
Insert cell
Insert cell
connector = new Promise((resolve, reject) => (new MapdCon())
.protocol("https")
.host("metis.mapd.com")
.port("443")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connect((error, connector) => {
if (error) reject(error);
else resolve(connector);
}))
Insert cell
Insert cell
tables = {
const result = await connector.getTablesAsync()
return result.map(d => d.name)
}
Insert cell
Insert cell
Insert cell
md`Count the number of rows from the \`${table}\` table`
Insert cell
{
const n = await connector.queryAsync(
`SELECT
COUNT(*) AS n
FROM ${table}`
)
return n[0].n
}
Insert cell
md`What are the fields and their data types in the ${table} table?`
Insert cell
connector.getFieldsAsync(table)
Insert cell
Insert cell
airlines = {
const airlines = await connector.queryAsync(`
SELECT DISTINCT carrier_name AS carrier
FROM ${table}
ORDER BY carrier_name`
)
return airlines.map(d => d.carrier)
}
Insert cell
Insert cell
createSQL = airlineName => `
SELECT
origin,
dest,
avg(origin_lon) as ox,
avg(origin_lat) as oy,
avg(dest_lon) as dx,
avg(dest_lat) as dy,
count(*) as n,
avg(arrdelay) as avg_arrdelay
FROM ${table}
WHERE carrier_name ILIKE '%${airlineName}%'
AND arrdelay IS NOT null
GROUP BY origin, dest
ORDER BY CASE
WHEN avg_arrdelay = 0 THEN 3
WHEN avg_arrdelay > 0 THEN 2
WHEN avg_arrdelay < 0 THEN 1
END DESC`
Insert cell
Insert cell
data = await connector.queryAsync(createSQL(airline))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xExtent = d3.extent(data.reduce((acc, cur) => [...acc, cur.dx, cur.ox], []))
Insert cell
yExtent = d3.extent(data.reduce((acc, cur) => [...acc, cur.dy, cur.oy], []))
Insert cell
Insert cell
bbox = {
return {
type: "LineString",
"coordinates": [[xExtent[0], yExtent[0]], [xExtent[1], yExtent[1]]]
}
}
Insert cell
Insert cell
Insert cell
Insert cell
colorScale = d3.scaleLinear()
.range(colors)
.domain(extent)
.interpolate(d3.interpolateHcl)
Insert cell
Insert cell
lineWidth = d3.scaleLinear().domain(d3.extent(data, d => d.n)).range([0.2, 2])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more