30:T699,chart = { let fullWidth = settings.width + settings.margin.left + settings.margin.right, fullHeight = settings.height + settings.margin.top + settings.margin.bottom const svg = d3.select(DOM.svg(fullWidth, fullHeight)); const xScale = d3.scaleLinear() .rangeRound([0, settings.width]) .domain(d3.extent(data, function(d) { return +d.xValue; })); const yScale = d3.scaleLinear() .rangeRound([settings.height, 0]) .domain([-.05, 1]); const g = svg.append("g") .attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")"); svg.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(" + settings.margin.left + "," + (settings.height + settings.margin.top) + ")") .call(d3.axisBottom(xScale)); svg.append("g") .attr("class", "axis axis--y") .attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")") .call(d3.axisLeft(yScale)); const circles = g .selectAll("circle").data(data); circles.enter().append("circle") .attr("cx", function(d) { return xScale(d.xValue)}) .attr("cy", function(d) { return yScale(0)}) .attr("r", 10) .attr("fill", (d) => d.color) .style("opacity", .3); svg.node().update = () => { settings.position = settings.position == "base" ? "y": "base"; g.selectAll("circle") .transition().duration(settings.delay) .delay((d) => xScale(d.xValue) / xScale.range()[1] * 500) .attr("cx", function(d) { return xScale(d.xValue)}) .attr("cy", function(d) { return settings.position == "y" ? yScale(d.yValue) : yScale(0)}) } return svg.node() }31:[] 2e:{"title":"Delay transitions","cells":[{"id":0,"value":"md`# Delay transitions\nThis brief demo shows the use of data attributes in the .delay() method to achieve an animated transition based on the x position of each circle. Data from the Wisconsin Breast Cancer dataset, as was used in this visual explanation of binary prediction performance metrics. \\n\ntl;dr:\n\n

\n\ncircles.transition()\n  .duration(500)\n  .delay((d) => xScale(d.x) / xScale.range()[1] * 500)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof button = {\n const form = html`