2a:null 2b:["$","title",null,{"children":"SOS courses (connected scatterplot) | Danilo Di Cuia | Observable"}] 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:{"id":"1fe44824ed4ee528","slug":"sos-courses","title":"SOS courses (connected scatterplot)","thumbnail":"0cf5a000705268100ca02c3bc73aca6e46687e5540a8b15b17ab55e23d9f3904","access_level":"public","create_time":"$D2018-11-18T19:15:58.971Z","update_time":"$D2020-09-01T18:17:25.467Z","view_time":null,"first_public_time":"$D2018-11-18T22:15:44.289Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":"starter_2024"},"version":856,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"55520ddc700d286d","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":null}],"members":[{"type":"individual","id":"55520ddc700d286d","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":null,"role":"editor"},{"type":"team","id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia","avatar_url":"https://avatars-next.observableusercontent.com/5a45613905d20893204c493a74859b19e92527edd065ed5c2e7d494ee41aafda","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"viewof replay = html`