The avatar for @danburzo
Dan Burzo
Tools for making things.
Public
Visualization experiments
Edited
Dec 18, 2022
2 forks
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
json_data = togeojson.gpx((new DOMParser()).parseFromString(data, 'text/xml'))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
geoToScreen = d3geo.geoMercator().fitExtent([[padding, padding], [width - padding * 2, height - padding * 2]], json_data)
Insert cell
Insert cell
coordinates = json_data.features[0].geometry.coordinates.map(geoToScreen)
Insert cell
Insert cell
draw_svg = (d = '') => html`
<svg width='${width}' height='${height}' viewbox='0 0 ${width} ${height}'>
<path d='${d}' fill='none' stroke='red' stroke-width='2' stroke-linecap='round' stroke-miterlimit='4'/>
</svg>
`
Insert cell
svg_basic = draw_svg('M ' + coordinates.join(' L '))
Insert cell
Insert cell
Insert cell
curve_func = d3shape.line()
.x(d => d[0])
.y(d => d[1])
.curve(d3shape.curveCatmullRom)
Insert cell
svg = draw_svg(curve_func(coordinates))
Insert cell
Insert cell
Insert cell
timestamps = json_data.features[0].properties.coordTimes.map(t => new Date(t).getTime())
Insert cell
time_extent = ({
start: Math.min(...timestamps),
end: Math.max(...timestamps)
})
Insert cell
Insert cell
Insert cell
color_t = d3scale.scaleLinear()
.domain([time_extent.start, time_extent.end])
.range([0, 1])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
interpolate = culori.interpolate([start_color, end_color], 'lch')
Insert cell
Insert cell
segment_colors = coordinates.map(
(pt, idx) => culori.formatHex(
interpolate(
color_t(timestamps[idx])
)
)
)
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