NYT reporter
Published
Edited
Apr 12, 2020
1 star
viz = {
// Overall vars
// Set the margin (spacing around the viz)
const margin = 0
// Adjust the height and width to remove the margin
const height = 500 - margin * 2
const width = 1000 - margin * 2
// Add the margin back into the SVG and create the SVG wrapper
const svgW = d3.select(DOM.svg(width + margin * 2, height + margin * 2))
// Append a group, which represents the main targetable SVG
const svg = svgW.append('g').attr('transform', `translate(${margin},${margin})`)
// Create some fake data and some scales
var x = d3.scaleLinear().domain([0,data.length]).range([0,width])
var y = d3.scaleLinear().domain(d3.extent(data)).range([height,0])
var gradient = svg
.append("linearGradient")
.attr("y1", 0)
.attr("y2", height)
.attr("x1", "0")
.attr("x2", "0")
.attr("id", "gradient")
.attr("gradientUnits", "userSpaceOnUse")
gradient
.append("stop")
.attr("offset", "0")
.attr("stop-color", "black")
gradient
.append("stop")
.attr("offset", "1")
.attr("stop-color", "red")
// Here is our background viz
svg.append('rect')
.attr('width', width)
.attr('height', height)
.attr('opacity', .1)
.attr('fill', 'url(#gradient)')
// Here is a rect on top
var rect = svg
.append('rect')
.attr('width', width)
.attr('height', 50)
.attr('y', 140)
.attr('stroke', 'white')
.attr('stroke-width', 1)
.attr('fill', 'url(#gradient)')
rect.transition().duration(1000)
.attr('y', height-50)
// Change the position of our rect on mouseover
svg.on('mousemove', function(d){
rect.attr('y', d3.mouse(this)[1])
})
return svgW.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.
