30:Tbd5,chart = { replay; const svg = d3.select(DOM.svg(width, height)).call(addArrow) let tooltip; const updateTooltip = function(d) { console.log(d) d3.select(this).attr("stroke", "black") tooltip .style("opacity", 1) .style("pointer-events", "none") .html(`

${d.title}

${d3.timeFormat("%Y-%m-%d")(d.date)}
@ ${d.location}
${d.teachers} teacher(s)
${d.participants} participants

`) } const hideTooltip = function(d){ d3.select(this).attr("stroke", "none") tooltip.style("opacity",0); } const moveTooltip = function(d){ const mouse = d3.mouse(svg.node()); tooltip.style("transform", `translate(${mouse[0]}px, ${mouse[1]+30}px)`) } const getLineLength = (data) =>{ return d3.create("svg:path").attr("d", line(data)).node().getTotalLength() } const wExtent = [margin.left, width - margin.right]; const hExtent = [height - margin.bottom, margin.top]; const rExtent = [3,20]; profitScale.range(hExtent) partScale.range(rExtent) hourScale.range(wExtent) svg.append("g").call(xAxis, hourScale, "Cost vs course length") const yAxisG = svg.append("g") yAxisG.call(yAxis, profitScale, "Profit") yAxisG.selectAll("line").attr("stroke", "#ddd") const size = d=> partScale(+d.participants); const y = d=> profitScale(+d.profit); const x = d=> hourScale(+d.hours); const getColor = d=> color(d.type); const position = (d,i)=> `translate(${x(d)},${(y(d))})` const line = d3.line().x(x).y(y).curve(d3.curveCatmullRom); const lineLength = getLineLength(selectedCourses); const duration = 300 * selectedCourses.length; const g = svg.append("g") .append("g") g .append("path") .datum(selectedCourses) .style("pointer-events", "none") .attr('stroke', "black") .attr('fill', 'none') .attr("d", line) .attr("stroke-width", 2) .attr("stroke-dasharray", `0, ${lineLength}`) .transition() .ease(d3.easeLinear) .duration(duration) .attr("stroke-dasharray", `${lineLength}, ${lineLength}`); const courses = g .selectAll("g") .data(selectedCourses) .enter() .append("g") .attr("transform", position) .on("mousemove", moveTooltip ) .on("mouseover", updateTooltip) .on("mouseout", hideTooltip) courses .append("circle") .style('cursor', 'pointer') .attr("fill", getColor) .attr("r", 0) .style("opacity", .8) .transition() .delay((d,i)=> getLineLength(selectedCourses.slice(0, i + 1)) / lineLength * (duration - 125)) .attr("r", size) courses .append("circle") .attr("fill", "black") .attr("r", 0) .transition() .delay((d,i)=> getLineLength(selectedCourses.slice(0, i + 1)) / lineLength * (duration - 125)) .attr("r", 2) tooltip = svg.append("foreignObject").attr("height",300).attr("width",300).style("background", "rgba(255,255,255,0.2)"); return Object.assign(svg.node(), {}); }31:[] 2e:{"title":"SOS courses (connected scatterplot)","cells":[{"id":0,"value":"md`# SOS courses (connected scatterplot)\n\nAll the courses of la Scuola Open Source.\n\nThe direction of the path represents the courses chronology whilst the size of the circle indicates the number of participants.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"viewof type = select({\n title: \"Choose a course type\",\n value: \"x\",\n options: types,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"viewof replay = html`