frontend + d3
md`
# NYT style SVG Textures
- API: https://riccardoscalco.it/textures/
`
{
const svg = d3
.create('svg')
.attr('width', 80)
.attr('height', 80);
const texture = textures
.lines()
.orientation("diagonal")
.size(8)
.strokeWidth(3)
.stroke("darkorange")
.background("firebrick");
svg.call(texture);
svg
.append('circle')
.attr('r', 30)
.attr('transform', 'translate(35,35)')
.attr('stroke-location', 'inner')
.attr('stroke', 'darkorange')
.attr('stroke-width', '3px')
.style('fill', texture.url());
return svg.node();
}
ts = [
textures
.lines()
.size(5)
.orientation('6/8'),
textures
.lines()
.heavier()
.size(10)
.stroke('lightgray'),
textures
.circles()
.size(8)
.fill('pink'),
textures
.paths()
.d("crosses")
.lighter()
.thicker()
]
{
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', 100);
ts.forEach(t => svg.call(t));
const rectSize = width / ts.length;
svg
.selectAll('rect')
.data(ts)
.enter()
.append('rect')
.attr('width', rectSize)
.attr('height', rectSize)
.attr('transform', (d, i) => `translate(${i * rectSize},0)`)
.style('fill', d => d.url());
return svg.node();
}
{
const svg = d3
.create('svg')
.attr('width', mapConfig.width)
.attr('height', mapConfig.height);
ts.forEach(t => svg.call(t));
const stage = svg.append('g');
const enterProvince = province =>
province
.append('path')
.attr('class', 'province')
.attr('data', d => d)
.attr('d', makePath)
.style('fill', () => {
const textureIndex = Math.round(Math.random() * (ts.length - 1));
return ts[textureIndex].url();
})
.attr('stroke', 'black');
stage
.selectAll('.province')
.data(geoJson.features)
.join(enterProvince);
return svg.node();
}
mapConfig = ({
width: 400,
height: 400,
clippedWidth: 400 - 30,
clippedHeight: 400 - 30,
marginX: 15,
marginY: 15
})
makePath = d3.geoPath(projection)
projection = d3
.geoMercator()
.center([128, 36])
.fitSize([mapConfig.clippedWidth, mapConfig.clippedHeight], geoJson)
topoData = await FileAttachment("topoKorea.json").json()
topojson = require('topojson@v3.0.2')
geoJson = topojson.feature(topoData, topoData.objects.skorea_provinces_2018_geo)
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.
