2b:null 2c:["$","title",null,{"children":"Zoomable Scatterplot | Brett Cooper | Observable"}] 31:T50b,chart = { const zoom = d3.zoom() .scaleExtent([1, 50]) .on("zoom", zoomed); const svg = d3.create("svg") .attr("viewBox", [0, 0, mywidth, height]); const gGrid = svg.append("g"); const gDot = svg.append("g") .attr("fill", "none") .attr("stroke-linecap", "round"); gDot.selectAll("path") .data(topInfluencers) .join("path") .attr("d", d => `M${x(d["Con followers"])},${y(d["Lab followers"])}h0`) .attr("stroke", d => z([d["Lab followers"], d["Con followers"]])) .attr("stroke-width", d=> Math.sqrt(area(d["MP followers"]))) .attr("stroke-opacity", d=> opacity(d["MP followers"])) const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function zoomed({transform}) { const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); gDot.attr("transform", transform).attr("stroke-width", Math.sqrt(area(transform.k))); gx.call(xAxis, zx); gy.call(yAxis, zy); gGrid.call(grid, zx, zy); } return Object.assign(svg.node(), { reset() { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } }); }32:T4c1,tooltip = { chart const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style('visibility', 'hidden') d3.selectAll("path") .on("mouseover", function(e, d){ d3.select(this).transition() .attr("stroke-width", d=> 1.3 * Math.sqrt(area(d["MP followers"]))) .attr("stroke-opacity", 1) }) .on("mousemove", function(e, d){ return tooltip.html(`\ Name: ${d.Name} MP followers: ${d["MP followers"]} Con followers: ${d["Con followers"]} Lab followers: ${d["Lab followers"]} Click to visit ${d.Name}.`) .style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible"); }) .on("mouseout", function(e, d){ d3.select(this).transition() .attr("stroke-width", d=> Math.sqrt(area(d["MP followers"]))) .attr("stroke-opacity", d=> opacity(d["MP followers"])) return tooltip.html(``).style("visibility", "hidden"); }) .on("click", function(e, d) { d3.select(this).transition() window.open("https://twitter.com/"+d.Name); }) }33:[{"id":"8e4371790541c9f3d3d35430fef52a1526f735680f2580ebaae080f326468d0539ae27b813c3682a9b6117ddd89d27305bcb2237258aa60050c186f5278502d5","href":"https://static.observableusercontent.com/files/8e4371790541c9f3d3d35430fef52a1526f735680f2580ebaae080f326468d0539ae27b813c3682a9b6117ddd89d27305bcb2237258aa60050c186f5278502d5","name":"Influencers.csv","type":"text/csv","lastModified":1612478805864.502,"size":11154034}] 2f:{"id":"7430d08ce5b1283d","slug":null,"title":"Zoomable Scatterplot","thumbnail":"656a76062855c23d9539ff5396237733de779c6cfdb8cfe035ae49876f7d5e1d","access_level":"unlisted","create_time":"$D2021-02-04T22:46:45.864Z","update_time":"$D2021-02-04T23:04:42.792Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024","bio":"In New Zealand being kid of human.\n\nWe might make mistakes but we will make other things too. - \nMichael Joseph Savage"},"version":409,"publish_version":409,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"bio":"In New Zealand being kid of human.\n\nWe might make mistakes but we will make other things too. - \nMichael Joseph Savage"}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zoomable Scatterplot","cells":[{"id":0,"value":"md`# Zoomable Scatterplot\n\nThe scatterplot allows zooming using the mouse or touch.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"viewof reset = html`