30:Taa7,getScatterPlot = function(data, metrics=[], { colorScale="interpolatePuBu", tooltipMetrics=[], }={}) { // parse data const accessors = [ metrics[0] ? d => d[metrics[0]] : d => d, metrics[1] ? d => d[metrics[1]] : d => d, metrics[2] ? d => d[metrics[2]] : d => d, ] // set up dimensions & chart elements const dms = getDimensions({ width: width, height: 500, marginTop: 50, marginBottom: 50, marginLeft: 100, }) const {wrapper, svg, bounds} = drawChart(dms) const xScale = getScaleWithAxis( "x", dms, data, accessors[0], bounds, metrics[0] ) const x = d => xScale(accessors[0](d)) const yScale = getScaleWithAxis( "y", dms, data, accessors[1], bounds, metrics[1] ) const y = d => yScale(accessors[1](d)) const metric2Values = [...new Set(data.map(accessors[2]))] const colorMetricType = getMetricType(metric2Values) const colorScaleScale = getColorScaleWithLegend( dms, data, accessors[2], bounds, colorScale, metrics[2] ) const color = d => colorScaleScale(accessors[2](d)) // add tooltip const tooltipWidth = 220 const tooltip = getTooltip(wrapper, tooltipWidth) const sortedData = [...data].sort((a, b) => accessors[0](a) > accessors[0](b) ? -1 : 1) // draw data bounds.selectAll("circle") .data(sortedData) .join("circle") .attr("cx", x) .attr("cy", y) .attr("r", 5) .attr("fill", color) // add interaction const delaunay = d3.Delaunay.from(sortedData.map(d => ([ x(d), y(d), ]))) bounds.append("rect") .attr("width", dms.boundedWidth) .attr("height", dms.boundedHeight) .style("fill", "transparent") .on("mousemove", function(e) { const [mouseX, mouseY] = d3.mouse(this) const index = delaunay.find(mouseX, mouseY) const point = sortedData[index] let parsedX = x(point) + dms.marginLeft if (parsedX > dms.width - tooltipWidth - 10) parsedX -= tooltipWidth let parsedY = y(point) + dms.marginTop tooltip.style("opacity", 1) tooltip.style("transform", `translate(${parsedX}px, calc(${parsedY > dms.height - 200 ? -100 : 0}% + ${parsedY}px))`) tooltip.html([ `

${metrics[0]} (x): ${ accessors[0](point) }

`, `

${metrics[1]} (y): ${ accessors[1](point) }

`, `

${metrics[2]} (color): ${ accessors[2](point) }

`, ...tooltipMetrics.map(metric => ( `

${ metric }: ${ point[metric] }

` )), ].join(" ")) }) .on("mouseleave", metric => { tooltip.style("opacity", 0) }) return wrapper.node(); }31:[] 2e:{"title":"Scatter plot","cells":[{"id":0,"value":"md`# Scatter plot`","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {move, getDimensions, drawChart, getMetricType, getScaleWithAxis, getColorScaleWithLegend, getTooltip} from \"@wattenberger/chart-utility-functions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}