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 MapU.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 OmniSciDBTutorial: MapBoxGL HexBin MapSF Bay Area Job DensitySF Bay Area BasemapMapD Connector NPM test
Hello, CARTO Maps API
map = svg`<svg viewBox="0 0 ${width} ${height}">
<g class="basemap-layer">
${tiles.map(
([x, y, z], i, { translate: [tx, ty], scale: k }) => svg`
<image xlink:href="${getTonerTileUrl(x, y, z)}" x="${Math.round(
(x + tx) * k
)}" y="${Math.round((y + ty) * k)}" width="${k}" height="${k}">
`
)}
</g>
<g class="data-layer">
${tiles.map(
([x, y, z], i, { translate: [tx, ty], scale: k }) => svg`
<image xlink:href="${getTileUrl(x, y, z)}" x="${Math.round(
(x + tx) * k
)}" y="${Math.round((y + ty) * k)}" width="${k}" height="${k}">
`
)}
</g>
</svg>`
getTonerTileUrl = (x, y, z) =>
`https://stamen-tiles-${
"abc"[Math.abs(x + y) % 3]
}.a.ssl.fastly.net/toner-lite/${z}/${x}/${y}${
devicePixelRatio > 1 ? "@2x" : ""
}.png`
tiles = tile()
tile = d3
.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
projection = d3
.geoMercator()
.center(center)
.scale(Math.pow(2, zoom) / (2 * Math.PI))
.translate([width / 2, height / 2])
center = [-74.006, 40.7128]
height = 600
test = getTileUrl(1, 6, 3)
getTileUrl = (x, y, z) => {
const { layergroupid, cdn_url } = mapsApiResult;
const {
templates: { https }
} = cdn_url;
const baseURL = https.url.replace(
"{s}",
https.subdomains[Math.abs(x + y) % https.subdomains.length]
);
return `${baseURL}/${cartoUserName}/api/v1/map/${layergroupid}/${z}/${x}/${y}${
devicePixelRatio > 1 ? "@2x" : ""
}.png`;
}
layerUrl = mapsApiResult.metadata.url.raster.urlTemplate
mapsApiResult = {
const res = await fetch(
`${mapsApiUrl}?config=${encodeURIComponent(JSON.stringify(mapsApiConfig))}`
);
return await res.json();
}
mapsApiConfig = ({
layers: [
{
type: "cartodb",
options: {
sql,
cartocss: cartoCSS,
cartocss_version: "2.1.0"
}
}
]
})
sql = `select the_geom_webmercator from ${table}`
table = "map_pluto_likely_rs_2016v1"
// CartoCSS docs: https://carto.com/developers/styling/cartocss/
cartoCSS = geomType === "Points"
? `#layer {
marker-width: 7;
marker-fill: orange;
marker-fill-opacity: 1;
marker-allow-overlap: true;
marker-line-width: 1;
marker-line-color: #FFFFFF;
marker-line-opacity: 1;
}`
: `#layer {
polygon-fill: orange;
polygon-opacity: 1;
line-width: 0;
}`
mapsApiUrl = `https://${cartoUserName}.carto.com/api/v1/map/`
cartoUserName = "chenrick"
import { radio, slider } from "@jashkenas/inputs"
d3 = require("d3-geo@2", "d3-tile@1")
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.
