Published
Edited
Sep 22, 2021
Insert cell
Insert cell
Insert cell
Insert cell
svg`
<svg width="100" height="100">
<g transform="translate(50, 50)">
<circle r="50" fill="steelblue"/>
<text fill="white" font-size="50" dominant-baseline="middle" text-anchor="middle">vis</text>
</g>
</svg>
`
Insert cell
{
const svg = d3.create('svg').attr('width', 100).attr('height', 100)
const transform = svg.append('g').attr('transform', row => `translate(50,50)`)
transform.append('circle').attr('r', 50).attr('fill', "steelblue")
transform.append('text').attr('fill', 'white').attr('font-size', 50).attr('dominant-baseline', 'middle').attr('text-anchor', 'middle')
.text('vis')
return svg.node()
}
Insert cell
Insert cell
segments = [
{ x1: 5, y1: 5, x2: 5, y2: 95 },
{ x1: 45, y1: 5, x2: 45, y2: 95 },
{ x1: 5, y1: 50, x2: 45, y2: 50 },
{ x1: 55, y1: 5, x2: 95, y2: 5 },
{ x1: 55, y1: 95, x2: 95, y2: 95 },
{ x1: 75, y1: 5, x2: 75, y2: 95 },
]
Insert cell
{
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100);
svg.selectAll('segments').data(segments).join('line')
.attr('x1', seg => seg.x1)
.attr('y1', seg => seg.y1)
.attr('x2', seg => seg.x2)
.attr('y2', seg => seg.y2)
.attr('stroke', 'black')
.attr('stroke-width', 3)
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sepalLengthExtent = d3.extent(iris, iris => iris.sepalLength)
Insert cell
Insert cell
xIris = d3.scaleLinear()
.domain().nice()
.range()
Insert cell
Insert cell
sepalWidthExtent = null
Insert cell
Insert cell
yIris = d3.scaleLinear()
.domain().nice()
.range()
Insert cell
Insert cell
species = null
Insert cell
Insert cell
colorIris = d3.scaleOrdinal()
.domain()
.range()
Insert cell
Insert cell
Insert cell
{
// set up
const margin = {top: 50, right: 120, bottom: 50, left: 120};

const svg = d3.create('svg')
.attr('width', widthIris + margin.left + margin.right)
.attr('height', heightIris + margin.top + margin.bottom);

const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// draw the circles in circlesGroup
const circlesGroup = g.append('g');
// create and add axes
g.append("g").call(xAxisIris);
g.append("g").call(yAxisIris);
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sites = d3.groupSort(
barley,
group => d3.sum(group, d => d.yield),
d => d.site
).reverse()
Insert cell
Insert cell
varities = d3.groupSort(
barley,
group => d3.sum(group, d => d.yield),
d => d.variety
).reverse()
Insert cell
Insert cell
varietySiteAmounts = d3.flatRollup(
barley,
group => d3.sum(group, d => d.yield),
d => d.variety,
d => d.site
).map(([variety, site, amount]) => ({variety, site, amount}))
Insert cell
Insert cell
maxAmount = d3.max(varietySiteAmounts, d => d.amount)
Insert cell
Insert cell
cellSize = 60
Insert cell
barleyWidth = varities.length * cellSize
Insert cell
barleyHeight = sites.length * cellSize
Insert cell
Insert cell
xBarley = d3.scalePoint()
.domain()
.range()
.padding(0.5)
Insert cell
yBarley = d3.scalePoint()
.domain()
.range()
.padding(0.5)
Insert cell
Insert cell
maxRadius = cellSize / 2 - 2
Insert cell
Insert cell
radius = d3.scaleSqrt()
.domain().nice()
.range()
Insert cell
Insert cell
{
// set up

const svg = d3.create('svg')
.attr('width', barleyWidth + marginsBarley.left + marginsBarley.right)
.attr('height', barleyHeight + marginsBarley.top + marginsBarley.bottom);

const g = svg.append("g")
.attr("transform", `translate(${marginsBarley.left}, ${marginsBarley.top})`);
// draw circles
const matrix = g.append('g');
// create one circle for each element in varietySiteAmounts
// set the cx, cy, r, and fill attributes for each circle

// legend
g.append("g").call(sizeLegend);
// axes
g.append("g").call(xAxisBarley);
g.append("g").call(yAxisBarley);
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more