map = html`<svg viewBox="0 0 ${800} ${500}" style="display: block;" id="roughmap">
</svg>`
mapSVG = {
var selector = 'roughmap';
let svg = d3.select('#roughmap');
var rc = rough.svg(document.getElementById('roughmap'));
let feat = d3
.json(
"https://gist.githubusercontent.com/rveciana/181f41663ae9cef7c00ad80cd085f413/raw/63a2b578f5d9536ca51c49e71f3d6a429ae93392/us.json"
)
.then(us => {
var projection = d3.geoAlbersUsa();
var mappath = d3.geoPath().projection(projection);
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
var features = topojson.feature(us, us.objects.states).features;
svg
.selectAll('.state')
.data(features)
.enter()
.append('g')
.attr('class', 'state');
d3.selectAll('.state').each(function(d, i) {
d3.select(this)
.node()
.appendChild(
rc.path(mappath(d), {
fill: colorScale(d.id),
fillStyle: 'cross-hatch',
roughness: 3,
simplification: 5,
fillWeight: 1.5
})
);
});
});
}
test = html`<svg id="test"></svg>`
testSVG = () => {
const svg = document.getElementById('test');
let rc = rough.svg(svg);
// svg.appendChild(
// rc.path('M400 100 h 90 v 90 h -90z', {
// stroke: 'red',
// strokeWidth: '3',
// fill: 'rgba(0,0,255,0.2)',
// fillStyle: 'solid'
// })
// );
svg.appendChild(
rc.path('M400 250 h 90 v 90 h -90z', {
fill: 'chartreuse',
fillWeight: 4,
hachureGap: 8,
roughness: 2
})
);
svg.appendChild(
rc.rectangle(140, 10, 100, 100, {
fill: 'rgba(255,0,0,0.2)',
roughness: 2
})
);
}
testSVG()
rough = require('roughjs@3.0.0/dist/rough.js').catch(() => window.rough)
d3=require('d3@5')
topojson = require("topojson")
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.
