2b:null 2c:["$","title",null,{"children":"Zoomable Scatterplot | vix18 | 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:T500,tooltip = { chart const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style('visibility', 'hidden') d3.selectAll("path") .on("mouseover", function(d){ d3.select(this).transition() .attr("stroke-width", d=> 1.3 * Math.sqrt(area(d["MP followers"]))) .attr("stroke-opacity", 1) }) .on("mousemove", function(d){ return tooltip .html(`\ Name: ${d.Name}
\ MP followers: ${d["MP followers"]}
\ Con followers: ${d["Con followers"]}
\ Lab followers: ${d["Lab followers"]}
\ Click to see more info.
\ `) .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+20)+"px") .style("visibility", "visible"); }) .on("mouseout", function(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(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":1612440376641.94,"size":11154034}] 2f:{"id":"fc83a67fff705c0d","slug":null,"title":"Zoomable Scatterplot","thumbnail":"656a76062855c23d9539ff5396237733de779c6cfdb8cfe035ae49876f7d5e1d","access_level":"unlisted","create_time":"$D2021-02-04T12:05:01.114Z","update_time":"$D2021-02-17T16:06:53.105Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"040799639dc29545","slug":"zoomable-scatterplot","title":"Zoomable Scatterplot","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5d53dd32a08085f0","login":"vix18","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fc8d29517df5336425f605bf4d0212743dc2327fcaf64bbd15a556c8a40ba17c","tier":"starter_2024","bio":""},"version":397,"publish_version":397,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b8b1900123f0221","login":"vix18","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fc8d29517df5336425f605bf4d0212743dc2327fcaf64bbd15a556c8a40ba17c","tier":null,"bio":""}],"members":[{"type":"individual","id":"9b8b1900123f0221","login":"vix18","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fc8d29517df5336425f605bf4d0212743dc2327fcaf64bbd15a556c8a40ba17c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"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`