Published
Edited
Feb 23, 2018
1 star
div = {
var width = 100
var height = 18
var node = DOM.element('div')
var sel = d3.select(node)
var c = d3.conventions({
sel,
height,
width,
margin: {top: 0, left: 0, right: 0, bottom: 0}
})
sel.st({display: 'inline-block'})
var data = d3.range(width).map((d, i) => Math.random()*i)
c.x.domain([0, width])
c.y.domain([0, width])
c.svg.append('path').at({
d: d3.line().x((d, i) => c.x(i)).y(d => c.y(d))(data),
fill: 'none',
stroke: '#f0f'
})
// Changing c.svg's inline style from absolute to relative doesn't work
c.svg.st({position: 'relative'})
c.svg.style('position', 'relative')
console.log(c.svg.style('position')) // relative
console.log(d3.select(node).select('svg').style('position')) // Back to absolute!!
// This does work? Comment out to see chart overlapping with text above
d3.select(node).select('svg').st({position: 'relative'})
console.log(d3.select(c.sel.node()).style('position')) // relative
return node
}
d3.select(div).select('svg').style('position')
d3.select(div).selectAll('svg').size()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
