Zoomable Scatterplot / Brett Cooper

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);

}

});

}

reset, chart.reset()

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);

})

}

data = FileAttachment("Influencers.csv").csv()

data.forEach(d => {

d["Con followers"] = Number(d["Con followers"])

d["Lab followers"] = Number(d["Lab followers"])

d["MP followers"] = Number(d["MP followers"])

d["P_con_mp"] = Number(d["P_con_mp"])

d["P_lab_mp"] = Number(d["P_lab_mp"])

d["Colour"] = Number(d["P_lab_mp - P_con_mp"])

})

topInfluencers = data.filter(d =>{

return (d["MP followers"] > 10)

})

x = d3.scaleLinear()

.domain([0, 318])

.range([0, mywidth])

y = d3.scaleLinear()

.domain([0, 195])

.range([height, 0])

z = d3.scaleBivariate()

d3.scaleBivariate = function() {

function scaleBivariate(value) {

var r = reds(value[0]);

var b = blues(value[1]);

return "rgb("+r+","+0+","+b+")";

}

var blues = d3.scaleLinear()

.range([55, 355]) // higher second value means brighter colours

.domain([0, 318/1.2]);

var reds = d3.scaleLinear()

.range([55, 355])

.domain([0,195/1.2]);

return scaleBivariate;

}

opacity = d3.scaleLinear()

.range([0, 1])

.domain([0, 513])

area = d3.scaleLinear()

.range([0, 500])

.domain([0, 513])

xAxis = (g, x) => g

.attr("transform", `translate(0,${height})`)

.call(d3.axisTop(x).ticks(12))

.call(g => g.select(".domain").attr("display", "none"))

yAxis = (g, y) => g

.call(d3.axisRight(y).ticks(12 * k))

.call(g => g.select(".domain").attr("display", "none"))

grid = (g, x, y) => g

.attr("stroke", "currentColor")

.attr("stroke-opacity", 0.1)

.call(g => g

.selectAll(".x")

.data(x.ticks(12))

.join(

enter => enter.append("line").attr("class", "x").attr("y2", height),

update => update,

exit => exit.remove()

)

.attr("x1", d => 0.5 + x(d))

.attr("x2", d => 0.5 + x(d)))

.call(g => g

.selectAll(".y")

.data(y.ticks(12 * k))

.join(

enter => enter.append("line").attr("class", "y").attr("x2", mywidth),

update => update,

exit => exit.remove()

)

.attr("y1", d => 0.5 + y(d))

.attr("y2", d => 0.5 + y(d)));

k = height / mywidth

mywidth = 600

height = 600

d3 = require("d3@6")

html`

<style>

:root {

--text: hsl(153, 73%, 97%);

}

.axis line,

.axis path {

stroke: var(--text);

}

.axis text {

color: var(--text);

transform: rotate(45deg);

}

.circle {

fill: hsla(154, 75%, 86%, 0.8);

stroke: hsla(154, 75%, 86%, 1);

}

.tooltip {

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

background: rgba(69,77,93,.9);

border-radius: .1rem;

color: #fff;

display: block;

font-size: 11px;

max-width: 320px;

padding: .2rem .4rem;

position: absolute;

text-overflow: ellipsis;

white-space: pre;

z-index: 300;

visibility: hidden;

}

.tooltip p {

margin: 0;

padding: 0;

}

.label {

font-family: verdana;

fill: hsl(153, 73%, 97%);

}

</style>

`

One platform to build and deploy the best data apps