In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published unlisted
Edited
Mar 15, 2021
md`# SVG experiments `
d3 = require('d3')
movingNZ = { // keeps adding to existing image
let o = d3.selectAll('#nzsvg')
.style('width',width)
.select('g')
.attr('transform',`translate(${-width*2} 0)`); // so odd, I think it's because the image is big but scaled
o.append('rect')
.attr('id','infoBox')
.attr('x',1500)
.attr('y',100)
.attr('width',7000) // << that rect is huge
.attr('height',1400)
.attr('fill','green')
}
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
let g = svg.append('g')
g.append('rect')
.attr('id','testzone')
.attr('x',width/4)
.attr('y',height/4)
.attr('width',width/2)
.attr('height',height/2)
.attr('fill','#80000080')
let g2 = svg.append('g')
.append("svg:image")
.attr("xlink:href", image)
.attr("width", 380)
.attr("height", 380)
.attr("x", 0)
.attr("y",10);
return svg.node();
}
image = FileAttachment("New_Zealand_Simplified.svg").url()
height = 400
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.
