Public
Edited
Nov 13
function generatePattern(id, density) {
const patternVector = document.createElementNS('http://www.w3.org/2000/svg', 'pattern')
patternVector.setAttribute('id', id)
patternVector.setAttribute('patternUnits', 'userSpaceOnUse')
patternVector.setAttribute('patternTransform', 'rotate(-45)')
patternVector.setAttribute('width', 1)
patternVector.setAttribute('height', 2)
const lineVector = document.createElementNS('http://www.w3.org/2000/svg', 'line')
lineVector.setAttribute('x1', 0)
lineVector.setAttribute('x2', '100%')
lineVector.setAttribute('y1', 0)
lineVector.setAttribute('y2', 0)
lineVector.setAttribute ('stroke', 'black')
lineVector.setAttribute('stroke-width', 1)
patternVector.appendChild(lineVector)
return patternVector
}
generatePattern('test', 1)
function test () {
const test = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
test.appendChild(generatePattern('asd', 1))
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
rect.setAttribute('x', 0)
rect.setAttribute('y', 0)
rect.setAttribute('height', 100)
rect.setAttribute('width', 100)
rect.setAttribute('style', 'fill: url(#asd)')
rect.setAttribute('stroke-width', '1')
rect.setAttribute('stroke', 'black')
test.appendChild(rect)
return test
}();
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.
