Public
Edited
Oct 24, 2022
data = [[10, 60], [40, 90], [60, 10], [190, 10]]
svg`<svg width=200 height=100 viewBox="0 0 200 100">
<path d="${p}" stroke="black" fill="none" />
</svg>`
p = d3.line()(data)
a = d3.area()(data)
svg`<svg width=200 height=100 viewBox="0 0 200 100">
<path d="${a}" stroke="black" fill="lightgray" />
</svg>`
{
const svg = d3.create("svg")
.attr('width', 200)
.attr('height', 100)
.attr('viewBox', '0 0 200 100')
svg.append("path")
.attr("d", a)
.style("stroke", "black")
.style("fill", "lightgray")
return svg.node()
}
radialData = [{theta: Math.PI / 8}, {theta: Math.PI/2}]
r = d3.areaRadial()
.angle(d => d.theta)
.innerRadius(20)
.outerRadius(30)
.curve(d3.curveLinear)
(radialData)
svg`<svg width=200 height=100 viewBox="-100 -50 200 100">
<path d="${r}" stroke="black" fill="lightgray" />
</svg>`
arc = d3.arc()
.innerRadius(10)
.outerRadius(40)
.startAngle(0)
.endAngle(Math.PI / 2)()
svg`<svg width=200 height=100 viewBox="-100 -50 200 100">
<path d="${arc}" stroke="black" fill="lightgray" />
</svg>`
svg`<svg width=200 height=100 viewBox="-100 -50 200 100">
<path d="${arc2}" stroke="black" fill="lightgray" />
</svg>`
arc2 = {
return d3.arc()
.innerRadius(10)
.outerRadius(40)
.startAngle(0)
.endAngle((now / 2000 % 2) * Math.PI)()
}
chart
viewof chart = {
var data = d3.range(40).map(function(i) {
return i % 5 ? {x: i / 39, y: (Math.sin(i / 3) + 2) / 4} : null;
});
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var area = d3.area()
.defined(line.defined())
.x(line.x())
.y1(line.y())
.y0(y(0));
var svg = d3.create("svg")
.datum(data)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("path")
.attr("class", "area")
.style("fill", "lightsteelblue")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
svg.append("path")
.attr("class", "line")
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "1.5px")
.attr("d", line);
svg.selectAll(".dot")
.data(data.filter(function(d) { return d; }))
.enter().append("circle")
.style("fill", "white")
.style("stroke", "steelblue")
.style("stroke-width", "1.5px")
.attr("class", "dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 3.5);
svg.node().parentNode.value = data;
svg.node().parentNode.dispatchEvent(new Event("input"));
return svg.node().parentNode;
}
{
const width = 300,
svg = d3.select(DOM.svg(width, width));
const step = (Math.PI * (-10 + ((now / 2000) % 20))) / 20;
const spiral = Array.from({ length: 76 }, (_, i) => [step * i, 2 * i]);
const path = svg.append("path")
.attr('fill', 'none').attr('stroke', 'black')
.attr('transform', `translate(${[width / 2, width / 2]})`)
path.datum(spiral).attr("d", d3.lineRadial()(spiral));
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.
