Published
Edited
Mar 29, 2020
Importers
md`# SVG_lib
Shortcuts for SVG elements`
xmlns = "http://www.w3.org/2000/svg"
svgSettings = {
let svgSettings = {
'backgroundColor':'#ffffff',
'strokeColor':'#000000',
'strokeWidth':'1',
'fill':'none'
}
return svgSettings
}
function svgElem(width,height){
const svgElem = document.createElementNS(xmlns, "svg");
svgElem.setAttributeNS(null, 'width', width);
svgElem.setAttributeNS(null, 'height', height);
svgElem.style.backgroundColor = svgSettings.backgroundColor;
return svgElem
}
function polyline(path) {
const node = document.createElementNS(xmlns, "polyline");
var path_points = ''
for (var i=0; i<path.length; i++){
const x = path[i][0]
const y = path[i][1]
path_points += x+','+y+' '
}
path_points = path_points.slice(0,-1);
node.setAttributeNS(null, 'points', path_points);
node.setAttributeNS(null, 'fill', 'none');
node.setAttributeNS(null, 'style',
'stroke:'+svgSettings['strokeColor']+
';stroke-width:'+svgSettings['strokeWidth']+';'
);
return node;
}
function rect(width,height,x,y) {
if (x === undefined) { x = 0 }
if (y === undefined) { y = 0 }
let rectangle = document.createElementNS(xmlns, "rect")
rectangle.setAttributeNS(null, 'width', width);
rectangle.setAttributeNS(null, 'height', height);
rectangle.setAttributeNS(null, 'x', x);
rectangle.setAttributeNS(null, 'y', y);
rectangle.setAttributeNS(null, 'fill', svgSettings['fill']);
rectangle.setAttributeNS(null, 'style',
'stroke:'+svgSettings['strokeColor']+
';stroke-width:'+svgSettings['strokeWidth']+';'
)
return rectangle
}
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.
