2b:null 2c:["$","title",null,{"children":"D3 scatterplot, tooltip and data in table | Stéphane Legrand | Observable"}] 31:T508,style = html` `32:T561,async function main() { const margin = { top: 5, right: 10, bottom: 50, left: 70 } const outerWidth = elemGraph.offsetWidth const outerHeight = elemGraph.offsetHeight const innerWidth = outerWidth - margin.right - (margin.left * 2) const innerHeight = outerHeight - margin.top - (margin.bottom * 2) const data = await getData() const x = xScale(innerWidth, data) const y = yScale(innerHeight, data) const xAxis = d3.axisBottom(x) const yAxis = d3.axisLeft(y) const xGrid = d3.axisBottom(x) .tickFormat('') .tickSizeInner(- innerHeight) const yGrid = d3.axisLeft(y) .tickFormat('') .tickSizeInner(- innerWidth) const graph = d3.select(elemGraph) const svg = graph.append("svg") .attr("width", outerWidth) .attr("height", outerHeight) .attr("viewBox", [0, 0, outerWidth, outerHeight]) axis(margin.left, innerHeight + margin.top, xAxis, svg) axis(margin.left, margin.top, yAxis, svg) labelAxisX((innerWidth / 2) + margin.left, innerHeight + margin.bottom, "girth (in)", svg) labelAxisY(margin.left / 2, innerHeight / 2, "height (ft)", svg) grid(margin.left, innerHeight + margin.top, xGrid, svg) grid(margin.left, margin.top, yGrid, svg) const cs = colorScale(data) dots(x, y, margin, cs, data, svg) tooltips(svg) table(d3.select(elemTable), cs, data) }33:[{"id":"3506d09c0b49af2816ee73b079eabc715e8fec31b765010ce3e9a7dc7d9b3afeb9daf2213f73bffad8780e10ad8c256d5a7665c4ccc6b0e313ba147f1665f0ec","href":"https://static.observableusercontent.com/files/3506d09c0b49af2816ee73b079eabc715e8fec31b765010ce3e9a7dc7d9b3afeb9daf2213f73bffad8780e10ad8c256d5a7665c4ccc6b0e313ba147f1665f0ec","name":"trees.csv","type":"text/csv","lastModified":1618918703301.812,"size":860}] 2f:{"id":"4405a7c9c9102319","slug":"d3-scatterplot-tooltip-and-data-in-table","title":"D3 scatterplot, tooltip and data in table","thumbnail":"f44317cb34e05f381f34fa0e0d5cc09a6983e30a78fdf2b4185bb6be7183e177","access_level":"public","create_time":"$D2021-04-19T22:34:08.483Z","update_time":"$D2021-04-20T12:58:17.201Z","view_time":null,"first_public_time":"$D2021-04-19T23:00:33.485Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"2c5a4b2558f7a4b8","login":"slegrand45","name":"Stéphane Legrand","avatar_url":"https://avatars-next.observableusercontent.com/c6cacc2c8d85710820dff644338e87a9c73ef630c78b8e461b72136a4efe5d88","tier":"starter_2024"},"version":233,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e69b01d202d99f96","login":"slegrand45","name":"Stéphane Legrand","avatar_url":"https://avatars-next.observableusercontent.com/c6cacc2c8d85710820dff644338e87a9c73ef630c78b8e461b72136a4efe5d88","tier":null}],"members":[{"type":"individual","id":"e69b01d202d99f96","login":"slegrand45","name":"Stéphane Legrand","avatar_url":"https://avatars-next.observableusercontent.com/c6cacc2c8d85710820dff644338e87a9c73ef630c78b8e461b72136a4efe5d88","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"D3 scatterplot, tooltip and data in table","cells":[{"id":48,"value":"md `# D3 scatterplot, tooltip and data in table`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"elemContainer = html`

${elemGraph}${elemTable}

${style}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"elemGraph = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"elemTable = html`\n

\n \n \n \n \n \n \n \n \n \n \n

	volume (ft³)	girth (in)	height (ft)

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`Import D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"md`Import popper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"popperjs = require(\"@popperjs/core@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"md`Import tippy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`Format data number to be sure to have at least 2 fraction digits`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"function fmtNumber(n) {\n const fmt = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2 })\n return n !== \"\" ? fmt.format(n) : n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"md`We don't use the original column names`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"function cleanData(e) {\n const index = parseInt(e[\"Index\"], 10)\n const girth = parseFloat(e[\" \\\"Girth (in)\\\"\"])\n const height = parseFloat(e[\" \\\"Height (ft)\\\"\"])\n const volume = parseFloat(e[\" \\\"Volume(ft^3)\\\"\"])\n if (index > 0) {\n return {\n index: index,\n girth: girth,\n height: height,\n volume: volume,\n }\n }\n return null\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"md`Get clean and sorted data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"async function getData() {\n let data = await FileAttachment(\"trees.csv\").csv() // await d3.csv(\"trees.csv\")\n return data.map(e => cleanData(e))\n .filter(e => e !== null)\n .sort((a,b) => d3.descending(a.volume, b.volume)\n || d3.descending(a.girth, b.girth)\n || d3.descending(a.height, b.height))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md`Scales`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"function xScale(width, data) {\n return d3.scaleLinear()\n .domain([d3.min(data, e => e.girth), d3.max(data, e => e.girth)]).nice()\n .range([0, width])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"function yScale(height, data) {\n return d3.scaleLinear()\n .domain([d3.min(data, e => e.height), d3.max(data, e => e.height)]).nice()\n .range([height, 0])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"function colorScale(data) {\n return d3.scaleSequential(d3.interpolateWarm)\n .domain([d3.min(data, e => e.volume), d3.max(data, e => e.volume)]).nice()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`Axis`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"function axis(trX, trY, axis, svg) {\n svg.append(\"g\")\n .attr(\"transform\", `translate(${trX}, ${trY})`)\n .call(axis)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"function labelAxisX(trX, trY, label, svg) {\n svg.append(\"text\")\n .attr(\"transform\", `translate(${trX}, ${trY})`)\n .style(\"text-anchor\", \"middle\")\n .text(label)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"function labelAxisY(x, y, label, svg) {\n svg.append(\"text\")\n .attr(\"transform\", `translate(${x}, ${y}) rotate(-90)`)\n .style(\"text-anchor\", \"middle\")\n .text(label)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"md`Grid`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"function grid(trX, trY, grid, svg) {\n svg.append('g')\n .attr('class', 'grid')\n .attr('transform', `translate(${trX}, ${trY})`)\n .call(grid)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`Highlight row in the data table`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"function highlightTr(index) {\n const tds = d3.selectAll(`#table tr[data-id=\"${index}\"] td.highlight`)\n tds.style(\"background-color\", \"#ffff99\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"function nohighlightTr(index) {\n const tds = d3.selectAll(`#table tr[data-id=\"${index}\"] td.highlight`)\n tds.style(\"background-color\", \"white\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"md`Dots`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"function dots(x, y, margin, colorScale, data, svg) {\n const dot = svg.append(\"g\")\n .attr(\"stroke-width\", 1.5)\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"fill\", d => colorScale(d.volume))\n .attr(\"stroke\", d => colorScale(d.volume))\n .attr(\"transform\",\n d => `translate(${x(d.girth) + margin.left - 3}, ${y(d.height) + margin.top - 3})`)\n .attr(\"width\", 6)\n .attr(\"height\", 6)\n .attr('class', 'dot')\n .attr('data-id', d => d.index)\n .on(\"mouseover\", function(event, d) {\n highlightTr(d.index)\n })\n .on(\"mouseout\", function(event, d) {\n nohighlightTr(d.index)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`Tooltips with tippy library`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"function tooltips(svg) {\n const dots = svg.selectAll('rect.dot')\n const html = d => \"\"\n + ``\n + ``\n + ``\n + \"

girth (in)	${fmtNumber(d.girth)}
height (ft)	${fmtNumber(d.height)}
volume (ft³)	${fmtNumber(d.volume)}

\"\n dots.attr('data-tippy-allowHTML', true)\n dots.attr('data-tippy-content', d => html(d))\n tippy(dots.nodes())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"function getDotTooltip(id) {\n return d3.select(`#graph .dot[data-id=\"${id}\"]`)\n .node()\n ._tippy\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"md`Display data in the html table`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"function table(elem, colorScale, data) {\n const tr = elem.select(\"tbody\")\n .selectAll(\"tr\")\n .data(data)\n .enter()\n .append(\"tr\")\n .style(\"background-color\", d => colorScale(d.volume))\n .attr('data-id', d => d.index)\n .on(\"mouseover\", function(event, d) {\n highlightTr(d.index)\n getDotTooltip(d.index).show()\n })\n .on(\"mouseout\", function(event, d) {\n nohighlightTr(d.index)\n getDotTooltip(d.index).hide()\n })\n tr.selectAll(\"td\")\n .data(d => [ '', d.volume, d.girth, d.height ])\n .enter()\n .append(\"td\")\n .attr('class', (d, i) => i > 0 ? \"highlight\" : null)\n .style(\"background-color\", d => d === \"\" ? null : \"white\")\n .text(d => fmtNumber(d))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`Main function`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"md`Run it!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"main()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"