<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>
{
}
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 },
]
{
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100);
// draw lines
return svg.node();
}
widthIris = 400
heightIris = 400
marginIris = ({top: 50, right: 120, bottom: 50, left: 120})
sepalLengthExtent = null
xIris = d3.scaleLinear()
.domain().nice()
.range()
sepalWidthExtent = null
yIris = d3.scaleLinear()
.domain().nice()
.range()
species = null
colorIris = d3.scaleOrdinal()
.domain()
.range()
xAxisIris = null
yAxisIris = null
swatches({color: colorIris})
{
const svg = d3.create('svg')
.attr('width', widthIris)
.attr('height', heightIris);
// draw the circles in circlesGroup
const circlesGroup = svg.append('g');
// create and add axes and axis labels
return svg.node();
}
sites = null
varities = null
varietySiteYields = null
maxYield = 0
cellSize = 60
marginsBarley = ({top: 0, right: 130, bottom: 50, left: 120})
barleyWidth = varities.length * cellSize + marginsBarley.left + marginsBarley.right
barleyHeight = sites.length * cellSize + + marginsBarley.top + marginsBarley.bottom
xBarley = d3.scalePoint()
.domain()
.range()
.padding(0.5)
yBarley = d3.scalePoint()
.domain()
.range()
.padding(0.5)
maxRadius = cellSize / 2 - 2
radius = d3.scaleSqrt()
.domain().nice()
.range()
xAxisBarley = null
yAxisBarley = null
{
// set up
const svg = d3.create('svg')
.attr('width', barleyWidth)
.attr('height', barleyHeight);
// draw circles
const matrix = svg.append('g');
// create one circle for each element in varietySiteYields
// set the cx, cy, r, and fill attributes for each circle
// draw the axes
// draw the size legend
svg.append("g").call(sizeLegend);
return svg.node();
}
sizeLegend = g => {
g.attr("transform", `translate(${barleyWidth - marginsBarley.right + 2 * maxRadius},20)`)
.attr("font-family", "sans-serif")
.attr("font-size", 12);
g.append('text')
.attr('font-weight', 'bold')
.text('Yield');
const legend = g.selectAll("g")
.data([40, 80, 120])
.join("g")
.attr("transform", (d, i) => `translate(0, ${(i + 1) * 2 * radius(d)})`);
legend.append("circle")
.attr("r", d => radius(d))
.attr("fill", "steelblue");
legend.append("text")
.attr("x", maxRadius + 5)
.attr("dominant-baseline", "middle")
.text(d => d);
}
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.
