Maps, Data, Viz, UX, Design
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 PacksU.S. County CentroidsU.S. Broadband Internet AccessSF Bay Area Jobs Viz SVG Exporter v2Hello, NYC Geosearch API!Mapping Airline Data From OmniSciDBTutorial: MapBoxGL HexBin MapSF Bay Area Job DensitySF Bay Area BasemapMapD Connector NPM test
Golden Gate Bathymetry Contours
map = {
const svg = DOM.svg(960, 960);
d3.select(svg)
.attr("viewBox", [0, 0, n, m])
.selectAll("path")
.data(contoured)
.enter().append("path")
.attr("d", d3.geoPath())
.attr("fill", d => color(d.value));
return svg;
}
contoured = contours(floatArray)
color = d3.scaleSequential(d3.interpolateMagma)
.domain(extent)
contours = d3.contours()
.size([n, m])
.thresholds(thresholds || 20)
n = image.getWidth()
m = image.getHeight()
extent = d3.extent(floatArray)
floatArray = new Float32Array(values[0]).map(d => d === noDataValue ? 0 : d);
values = image.readRasters()
image = tiff.getImage()
tiff = GeoTIFF.fromUrl("https://s3-us-west-2.amazonaws.com/data.chrishenrick.com/sf_bay_area/Bathymetry_OffshoreSanFrancisco_resampled2.tif")
.catch(error => console.log(error))
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.
