Public
Edited
Sep 7, 2023
Importers
1 star
x_scale = d3.scaleLinear().domain([-2, 8]).range([0, 800])
x_scale(8)
[-2, 1, Math.E, Math.PI, 8].map(x_scale)
{
let w = 800;
let h = 80;
let svg = d3
.create("svg")
.attr("overflow", "visible") // So the ends aren't cut off
.attr("viewBox", [0, 0, w, h]);
// Define the scale
let [xmin, xmax] = [-2, 8];
// let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]);
// We've got five points and we're using the selection join idiom that
// we learned last time to add them all at once.
svg
.selectAll("circle")
.data([-2, 1, Math.E, Math.PI, 8])
.join("circle")
.attr("cx", x_scale) // Use the scale to place the points
.attr("cy", h / 2) // In lieu of a y_scale, we just translate half way down
.attr("r", 4);
// Draw the axis
svg
.append("g")
// .style("font-size", "14px") // The group can be styled
.attr("transform", `translate(0, ${h / 2})`)
.call(
d3.axisBottom(x_scale)
// Several options
// .tickSize(8)
// .ticks(22)
// .tickValues([-1, 1, 5])
);
return svg.node();
}
{
let w = 800;
let h = 500;
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.attr("width", "100%")
.style("max-width", `${w}px`)
.style("border", "solid black 2px");
let pad = 10;
let [xmin, xmax, ymin, ymax] = [-3, 5, -2, 3];
let x_scale = d3
.scaleLinear()
.domain([xmin, xmax])
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain([ymin, ymax])
.range([h - pad, pad]);
// Here are the vertices of the pentagon:
let n = 5;
let pts = d3
.range(n)
.map((i) => [
Math.sin((2 * Math.PI * i) / n),
Math.cos((2 * Math.PI * i) / n)
]);
// You can examine the points, if you like.
// return pts;
// Append the polygon to the SVG and specify its
// points and other attributes.
svg
.append("polygon")
.attr(
"points",
pts.map(([x, y]) => [x_scale(x), y_scale(y)])
)
.attr("fill", "lightgray")
.attr("stroke", "black");
svg
.append("g")
.style("font-size", "14px")
.attr("transform", `translate(0, ${y_scale(0)})`)
.call(d3.axisBottom(x_scale).tickValues([-3, -2, -1, 1, 2, 3, 4, 5]));
svg
.append("g")
.style("font-size", "14px")
.attr("transform", `translate(${x_scale(0)}, 0)`)
.call(d3.axisLeft(y_scale).tickValues([-2, -1, 1, 2, 3]));
return svg.node();
}
d3.line()([
[0, 0],
[1, 1],
[2, 2]
])
{
let w = 600;
let h = 600;
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.attr("width", "100%")
.style("max-width", `${w}px`)
.style("border", "solid black 2px");
let pad = 10;
let [xmin, xmax, ymin, ymax] = [-1.2, 1.2, -1.2, 1.2];
let x_scale = d3
.scaleLinear()
.domain([xmin, xmax])
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain([ymin, ymax])
.range([h - pad, pad]);
// Here are the vertices of the pentagon:
let n = 5;
let pts = d3
.range(n)
.map((i) => [
Math.sin((2 * Math.PI * i) / n),
Math.cos((2 * Math.PI * i) / n)
]);
// Here's the new stuff
// The function that generates the path's 'd' attribute.
let path = d3
.line()
// .curve(d3.curveCardinalClosed.tension(0.5)) // Try this!
.x((d) => x_scale(d[0]))
.y((d) => y_scale(d[1]));
// Appending the path
svg
.append("path")
.attr("fill", "lightgray")
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("d", path(pts)); // Try `path(pts) + 'Z' to close!`
return svg.node();
}
function f(m, s) {
return (x) =>
Math.exp(-((x - m) ** 2 / (2 * s ** 2))) / Math.sqrt(2 * Math.PI * s ** 2);
}
m
interactive_graph = {
let w = 800;
let h = 500;
let svg = d3
.create("svg")
.attr("width", "100%")
.attr("viewBox", [0, 0, w, h])
.style("border", "solid 1px black");
let [xmin, xmax, ymin, ymax] = [-3.5, 3.5, -0.2, 1.8];
let pad = 20;
let x_scale = d3
.scaleLinear()
.domain([xmin, xmax])
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain([ymin, ymax])
.range([h - pad, pad]);
let path = d3
.line()
.x((d) => x_scale(d[0]))
.y((d) => y_scale(d[1]));
let pts = d3.range(-4, 4, 0.01).map((x) => [x, f(m, s)(x)]);
// pts = [[pts[0][0], 0]].concat(pts).concat([[pts.slice(-1)[0][0], 0]]);
let s_pts = pts.filter(([x, y]) => m - s < x && x < m + s);
s_pts = [[s_pts[0][0], 0]].concat(s_pts).concat([[s_pts.slice(-1)[0][0], 0]]);
svg
.append("path")
.attr("d", path(s_pts))
.attr("fill", "lightblue")
.attr("stroke", "blue")
.attr("stroke-width", 0.5);
svg
.append("path")
.attr("d", path(pts))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 3);
// Draw the axes
svg
.append("g")
.attr("transform", `translate(0, ${y_scale(0)})`)
.call(
d3
.axisBottom(x_scale)
.tickValues([-3, -2, -1, 1, 2, 3])
.tickFormat(d3.format("d"))
.tickSizeOuter(0)
);
svg
.append("g")
.attr("transform", `translate(${x_scale(0)})`)
.call(d3.axisLeft(y_scale).tickValues([0.5, 1, 1.5]).tickSizeOuter(0));
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.
