Public
Edited
Nov 21, 2022
{
const data = [
{
x: 20,
r: 10,
y: [20,40]
},
{
x: 30,
r: 50,
y: [-10,80]
}
]
const margin = {top: 40, left: 40, bottom: 80, right: 40};
const chartHeight=0.25*width;
//svg
let svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} ${chartHeight}`);
svg
.selectAll('g.datapoint')
.data(data)
.enter()
.append('g')
.attr('class', 'datapoint')
.attr('transform', d => `translate(${d.x}, ${0.5*chartHeight})`)
return svg.node();
}
{
const data = [
{
x: 200,
r: 10,
y: [20,40]
},
{
x: 400,
r: 50,
y: [-10,80]
}
]
const margin = {top: 40, left: 40, bottom: 80, right: 40};
const chartHeight=0.25*width;
//svg
let svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} ${chartHeight}`);
svg
.selectAll('g.datapoint')
.data(data)
.enter()
.append('g')
.attr('class', 'datapoint')
.attr('transform', d => `translate(${d.x}, ${0.5*chartHeight})`)
.append('circle')
.attr('r', d => d.r)
.attr('fill', 'black')
return svg.node();
}
{
const data = [
{
x: 200,
r: 10,
y: [20,40]
},
{
x: 400,
r: 50,
y: [-10,80]
}
]
const margin = {top: 40, left: 40, bottom: 80, right: 40};
const chartHeight=0.25*width;
//svg
let svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} ${chartHeight}`);
svg
.selectAll('g.datapoint')
.data(data)
.enter()
.append('g')
.attr('class', 'datapoint')
.attr('transform', d => `translate(${d.x}, ${0.5*chartHeight})`)
.append('circle')
.attr('r', d => d.r)
.attr('fill', 'black')
svg.selectAll('g.datapoint')
.data(data)
.update()
.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.attr('fill','none')
.attr('d', d => `M0 0 l${d.y[0]} ${d.y[1]}`)
return svg.node();
}
{
const data = [
{
x: 200,
r: 10,
y: [20,40]
},
{
x: 400,
r: 50,
y: [-10,80]
}
]
const margin = {top: 40, left: 40, bottom: 80, right: 40};
const chartHeight=0.25*width;
//svg
let svg = d3.create('svg')
.attr('viewBox', `0 0 ${width} ${chartHeight}`);
svg
.selectAll('g.datapoint')
.data(data)
.enter()
.append('g')
.attr('class', 'datapoint')
.attr('transform', d => `translate(${d.x}, ${0.5*chartHeight})`)
.append('circle')
.attr('r', d => d.r)
.attr('fill', 'black')
svg.selectAll('g.datapoint')
.data(data)
.append('path')
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.attr('fill','none')
.attr('d', d => `M0 0 l${d.y[0]} ${d.y[1]}`)
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.
