Notebooks 2.0 is here.
Published
Edited
Mar 1, 2018
1 fork
1 star
lineData = [{x:0,y:200},
{x:100, y:200},
{x:500,y:200}]
{
const svg = d3.select(DOM.svg(500,500))
const line = d3.line()
.x((d)=> d.x)
.y((d)=> d.y);
const xScale = d3.scaleLinear()
.domain([0, 8])
.range([0, 500]);
svg.datum(lineData).append('path')
.attr('fill', 'none')
.attr('stroke', "steelblue")
.attr('d', line);
// Origin Method
// without translate each text element, which rotation axis is rotated according to (0,0)
svg.selectAll('text.norotation')
.data(data)
.enter()
.append('text')
.text((d)=>d)
.classed('norotation', true)
.attr('fill', 'black')
.attr('x', (d,i)=> xScale(i))
.attr('y', 200)
// Modified Method
// translate each text element's position, let the rotation axis is rotatedaccording to its position
svg.selectAll('text.rotation')
.data(data)
.enter()
.append('text')
.text((d)=>d)
.classed('rotation', true)
.attr('fill', 'black')
.attr('transform', (d,i)=>{
return 'translate( '+xScale(i)+' , '+220+'),'+ 'rotate(45)';})
.attr('x', 0)
.attr('y', 0)
return svg.node()
}
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.
