2d:null 2e:["$","title",null,{"children":"2D Explore | Peter Beshai | Observable"}] 33:T67b,viewof dataType = { const form = html`` form.type.oninput = () => { console.log(form.type.value); const newValue = form.type.value; clearExtensions(); if (newValue === 'tree') { setupTree(); } else { form.value = { type: form.type.value } } } function clearExtensions() { form.querySelector('.form-extensions').innerHTML = ''; } function setupTree() { const extensionsRoot = form.querySelector('.form-extensions'); const idKey = "id"; const parentKey = "parent"; const sortKey = ""; const type = "tree"; form.value = { type, idKey, parentKey }; extensionsRoot.appendChild(html`

ID Field

`) extensionsRoot.appendChild(html`

Parent ID Field

`) extensionsRoot.appendChild(html`

Sort Field

`) form.treeIdKey.oninput = () => { form.value.idKey = form.treeIdKey.value; } form.treeParentKey.oninput = () => { form.value.parentKey = form.treeParentKey.value; } form.treeSortKey.oninput = () => { form.value.sortKey = form.treeSortKey.value; } } form.value={ type: 'any' }; return form; }34:T433,viewof colorScheme = { if (!colorByKey || colorByKey === 'none' || colorDataType === 'number') { const result = html`

`; result.value = []; return result; } const scheme = d3.schemeCategory10; const form = html`` form.value = scheme; form.oninput = (evt) => { console.log(evt.target, evt.target.name); let values; // from text input if (evt.target.name === 'colorStr') { values = JSON.parse(evt.target.value); // update color inputs values.forEach((color, i) => { form[i].value = color; }); // from color input } else { values = Array.from(form.querySelectorAll('input[type="color"]')).map(d => d.value) // update text input form.colorStr.value = JSON.stringify(values); } form.value = values; } return form; }35:T622,legend = { if (!colorByKey || colorByKey === 'none') { if (activeColorValue !== null) { mutable activeColorValue = null; } return html`Coloring all points by default color (${pointDefaultColor})` } if (colorDataType === 'number') { if (activeColorValue !== null) { mutable activeColorValue = null; } return md`Using an interpolated color scale for numeric color attribute **${colorByKey}**.` } // show a legend for ordinal types const maxColorValues = 20; const shownColorValues = colorValues.slice(0, maxColorValues); if (activeColorValue != null && !shownColorValues.find(d => d.key === activeColorValue)) { mutable activeColorValue = null; } const legend = html`

${shownColorValues.map(value => { const colorValue = value.key; const numMatches = value.values.length; const active = activeColorValue == null || activeColorValue === colorValue; return html`

` })} ` d3.select(legend).selectAll('.legend-item').on('click', function() { if (activeColorValue === this.value) { mutable activeColorValue = null; } else { mutable activeColorValue = this.value; } }); return legend; }36:T527,vis = { const canvas = DOM.canvas(width, visHeight); const ctx = canvas.getContext("2d"); console.log('RENDER') ctx.save(); // erase what is on the canvas currently ctx.clearRect(0, 0, width, visHeight); ctx.translate(padding.left, padding.top); // if tree, handle specially if (isTreeData) { renderLinks(ctx); } // render nodes for (let d of renderData) { const x = xScale(d.x); const y = yScale(d.y); const color = getColorForPoint(d); const alpha = getAlphaForPoint(d); // draw circle ctx.globalAlpha = alpha; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, pointRadius, 0, 2 * Math.PI); ctx.fill(); } const container = html`

`; container.appendChild(canvas); // initialize highlight layer const highlightSvg = DOM.svg(width, visHeight); container.appendChild(highlightSvg); const highlightG = d3.select(highlightSvg) .attr('class', 'highlight-svg') .append('g') .attr('transform', `translate(${padding.left} ${padding.top})`) highlightG.append('circle') .attr('r', pointRadius * 2) .attr('class', 'highlight-circle') .style('display', 'none') container.appendChild(html`

`) return container; }37:T450,css = html` CSS styling defined here. `38:T4f6,{ const canvas = d3.select(vis).select('.highlight-svg'); // setup hover handler const voronoiData = renderData; let voronoiDiagram; try { voronoiDiagram = d3 .voronoi() .x(d => padding.left + xScale(d.x) + Math.random() / 100) .y(d => padding.top + yScale(d.y) + Math.random() / 100)(voronoiData); } catch (e) { console.error('Error running voronoi', e); canvas.on('mousemove', null); voronoiDiagram = null; return; } const voronoiRadius = plotAreaWidth / 10; canvas.on('mousemove', function mouseMoveHandler() { // get the current mouse position var ref = d3.mouse(this); var mx = ref[0]; var my = ref[1]; // use the new diagram.find() function to find the voronoi site closest to // the mouse, limited by max distance defined by voronoiRadius var site = voronoiDiagram.find(mx, my, voronoiRadius); // debugVoronoi(); // highlight the point if we found one, otherwise hide the highlight circle highlight(site && site.data); }) .on('mouseleave', function mouseLeaveHandler() { // hide the highlight circle when the mouse leaves the chart highlight(null); }) return html`Set up point voronoi hover behavior` }39:T408,{ const highlightCircle = d3.select('.highlight-circle'); const infoContainer = d3.select(vis).select('.highlight-info-container'); const tooltipDistance = 25; if (highlightPoint == null) { highlightCircle.style('display', 'none'); infoContainer.style('display', 'none') } else { const x = xScale(highlightPoint.x); const y = yScale(highlightPoint.y); highlightCircle.style('display', '') .attr('transform', `translate(${x} ${y})`); const yInfo = y + padding.top + 10; const xInfo = x + padding.left + tooltipDistance; infoContainer .style('display', '') .style('top', `${yInfo}px`) .html(getHighlightInfo()); console.log(xInfo, width) if (xInfo < width / 2) { infoContainer .style('right', '') .style('left', `${xInfo}px`) } else { infoContainer .style('right', `${width - xInfo + (2 * tooltipDistance)}px`) .style('left', '') } } return html`Set up SVG hover behavior` }3a:T5a0,data = { return Files.text(inputFile) .then(text => { console.log('got inputFile', inputFile.name); let rawData; // handle parsing CSV if (/\.csv$/.test(inputFile.name)) { rawData = d3.csvParse(text, d => { // try to be smart about converting types Object.keys(d).forEach(key => { if (d[key] === "true") { d[key] = true; } else if (d[key] === "false") { d[key] = false; } else if (d[key] === "null" || d[key] === "undefined" || d[key] === "") { d[key] = undefined; } else if (!isNaN(+d[key])) { d[key] = +d[key] } }); return d; }); } else { rawData = JSON.parse(text); } let transformedData = transformJson(rawData); if (dataType.type === 'tree') { try { transformedData = treeLayout(transformedData, dataType.idKey, dataType.parentKey, dataType.sortKey); } catch (e) { console.error(e) } } // ensure x, y, and id are present for each data point rawData.forEach((d, i) => { if (d.id == null) { d.id = makeId() } }); // assign random x and y values if no x and y provided if (transformedData.every(d => d.x == null && d.y == null)) { randomLayout(transformedData); } return transformedData; }) }3b:Tc9a,lasso = { function polygonToPath(polygon) { return ("M" + (polygon.map(function (d) { return d.join(','); }).join('L'))); } function distance(pt1, pt2) { return Math.sqrt(Math.pow( (pt2[0] - pt1[0]), 2 ) + Math.pow( (pt2[1] - pt1[1]), 2 )); } // export default function lasso() { function lasso() { var dispatch = d3.dispatch('start', 'end'); // distance last point has to be to first point before it auto closes when mouse is released var closeDistance = 300; function lasso(root) { // append a with a rect var g = root.append('g').attr('class', 'lasso-group'); var bbox = root.node().getBoundingClientRect(); var area = g .append('rect') .attr('width', bbox.width) .attr('height', bbox.height) .attr('fill', 'tomato') .attr('opacity', 0); var drag = d3 .drag() .on('start', handleDragStart) .on('drag', handleDrag) .on('end', handleDragEnd); area.call(drag); var lassoPolygon; var lassoPath; var closePath; function handleDragStart() { lassoPolygon = [d3.mouse(this)]; if (lassoPath) { lassoPath.remove(); } lassoPath = g .append('path') .attr('fill', '#0bb') .attr('fill-opacity', 0.1) .attr('stroke', '#0bb') .attr('stroke-dasharray', '3, 3'); closePath = g .append('line') .attr('x2', lassoPolygon[0][0]) .attr('y2', lassoPolygon[0][1]) .attr('stroke', '#0bb') .attr('stroke-dasharray', '3, 3') .attr('opacity', 0); dispatch.call('start', lasso, lassoPolygon); } function handleDrag() { var point = d3.mouse(this); lassoPolygon.push(point); lassoPath.attr('d', polygonToPath(lassoPolygon)); // indicate if we are within closing distance if ( distance(lassoPolygon[0], lassoPolygon[lassoPolygon.length - 1]) < closeDistance ) { closePath .attr('x1', point[0]) .attr('y1', point[1]) .attr('opacity', 1); } else { closePath.attr('opacity', 0); } } function handleDragEnd() { // remove the close path closePath.remove(); closePath = null; // succesfully closed if ( distance(lassoPolygon[0], lassoPolygon[lassoPolygon.length - 1]) < closeDistance ) { lassoPath.attr('d', polygonToPath(lassoPolygon) + 'Z'); dispatch.call('end', lasso, lassoPolygon); // otherwise cancel } else { lassoPath.remove(); lassoPath = null; lassoPolygon = null; } } lasso.reset = function () { if (lassoPath) { lassoPath.remove(); lassoPath = null; } lassoPolygon = null; if (closePath) { closePath.remove(); closePath = null; } }; } lasso.on = function (type, callback) { dispatch.on(type, callback); return lasso; }; return lasso; } return lasso; }3c:[] 31:{"id":"3156952ce72bd649","slug":"2d-explore","title":"2D Explore","thumbnail":"52a1a955f0a15f07ef5603c371bdca15d54cb83e258c366a091f2a2d54b3afd3","access_level":"public","create_time":"$D2018-05-07T22:08:32.188Z","update_time":"$D2018-05-15T14:52:29.655Z","view_time":null,"first_public_time":"$D2018-05-08T02:55:14.914Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6acf8922a00de1ff","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":"starter_2024"},"version":981,"publish_version":981,"role":null,"authored":false,"authors":[{"type":"individual","id":"26ab57b8a43a5dda","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":null}],"members":[{"type":"individual","id":"26ab57b8a43a5dda","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"2D Explore","cells":[{"id":0,"value":"md`# 2D Explore\n\nExplore any dataset with x and y coordinates. \n\nExample dataset:\n\n\\`\\`\\`\n[ \n { \"x\": 123, \"y\": 50, \"foo\": \"test\" },\n { \"x\": -33, \"y\": 680, \"foo\": \"test2\" }\n]\n\\`\\`\\`\n\nOptionally have dataset in a different format and interpret it via the **transformJson** function below. If no x and y coordinates are detected, random ones will be generated.\n\n## Start by selecting a JSON or CSV file\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof inputFile = DOM.input('file')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`\n---\nSpecify a transformation function \\`transformJson\\` to take your data file to access just the collection of data points to render.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function transformJson(jsonData) {\n // If your jsonData isn't just a flat array, access the flat array of items here.\n // e.g. for a file: { data: [point1, point2, ...] }, you'd do return jsonData.data;\n // jsonData.forEach((d, i) => {\n // d.x = Math.cos(i);\n // d.y = Math.sin(i);\n // });\n \n return jsonData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"md`If you have a special type of data (e.g. a tree), specify it here to affect how rendering works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof pointRadius = {\n const range = DOM.range(\n 1, // min\n 20, // max\n 1 // step\n )\n \n range.value = 3; // initial value\n \n return range;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof pointAlpha = {\n const range = DOM.range(\n 0, // min\n 1, // max\n 0.05 // step\n )\n \n range.value = 0.5; // initial value\n \n return range;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof colorByKey = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"viewof colorLogScale = checkbox({\n options: [\n { value: 'use-log', label: 'Use a color log scale' }\n ],\n value: 'use-log'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"viewof pointDefaultColor = {\n const input = DOM.input(\"color\");\n \n input.value = \"#111111\"\n \n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"viewof inactivePointColor = {\n const input = DOM.input(\"color\");\n \n input.value = \"#cccccc\"\n \n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"viewof inactivePointAlpha = {\n const range = DOM.range(\n 0, // min\n 1, // max\n 0.05 // step\n )\n \n range.value = 0.4; // initial value\n \n return range;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof visHeight = {\n const range = DOM.range(\n 100, // min\n 2000, // max\n 100 // step\n )\n \n range.value = 600; // initial value\n \n return range;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`\nHover over any given point to see details below. \n\nClick and drag a lasso to select a subset of the points. This updates the table below and the visualization. Select nothing (or just click) to reset to the whole dataset. You can filter which nodes are colored in by entering a search string in the input field below or for ordinal color scheme by selecting a value in the legend.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"viewof searchString = html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"DOM.download(\n new Blob([JSON.stringify(activeData, null, 2)], {type: \"application/json\"}),\n \"2d-explore-visible-data.json\", // optional file name\n \"Download visible data as JSON\" // optional button label\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"{\n let tableData = activeData;\n let header;\n if (!tableData || !tableData.length) {\n return html`No data.`;\n }\n \n const limit = 500;\n if (tableData.length > limit) {\n tableData = tableData.slice(0, limit);\n header = `Data (first ${limit} points)`\n } else {\n header = `Data (selected)`\n }\n \n return html`

${header}

${table(tableData, {\n style: 'compact'\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"md`### Tree Specific Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"viewof linkColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"viewof linkWidth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`\n---\n### Code below...\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"function renderLinks(ctx) {\n if (!data || !data.links) {\n return;\n }\n console.log('rendering links', data.links);\n ctx.save();\n for (let d of data.links) {\n const sx = xScale(d.source.x);\n const sy = yScale(d.source.y);\n const tx = xScale(d.target.x);\n const ty = yScale(d.target.y);\n const color = linkColor;\n const alpha = getAlphaForPoint(d.source.data);\n \n // draw circle\n ctx.globalAlpha = alpha;\n ctx.strokeStyle = color;\n ctx.strokeWidth = linkWidth;\n ctx.beginPath();\n ctx.moveTo(sx, sy);\n ctx.lineTo(tx, ty);\n ctx.stroke();\n }\n \n ctx.restore();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"colorExtent = d3.extent(data.filter(d => d[colorByKey] != null), d => d[colorByKey])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"colorScale = {\n let scale;\n \n if (colorDataType === 'number') {\n if (colorLogScale) {\n scale= d3.scaleLog().domain(colorExtent).range(['#000000', '#00bbbb'])\n } else {\n scale = d3.scaleSequential().interpolator(d3.interpolateViridis)\n .domain(colorExtent);\n }\n } else {\n scale = d3.scaleOrdinal().range(colorScheme);\n }\n \n return scale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"/**\n * Returns true if the point contains this text in any field\n */\nfunction pointContainsText(d, text) {\n return Object.keys(d).some(key => {\n return `${d[key]}`.toLowerCase().includes(text.toLowerCase())\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"function isPointInactive(d) {\n return (activeColorValue != null && activeColorValue !== d[colorByKey]) || \n (searchString !== null && searchString.trim() !== '' && !pointContainsText(d, searchString));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"function getColorForPoint(d) {\n if (isPointInactive(d)) {\n return inactivePointColor;\n }\n \n if (colorByKey && colorByKey !== 'none') {\n return colorScale(d[colorByKey]); \n }\n return pointDefaultColor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"function getAlphaForPoint(d) {\n if (isPointInactive(d)) {\n return inactivePointAlpha;\n }\n \n return pointAlpha;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"mutable activeColorValue = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"colorValues = {\n if (!colorByKey || colorByKey === 'none' || colorDataType === 'number') {\n return [];\n }\n \n return d3.nest()\n .key(d => d[colorByKey])\n .entries(data)\n .sort((a, b) => b.values.length - a.values.length)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"colorDataType = {\n const dataItem = data.find(d => d[colorByKey] != null);\n \n if (dataItem && typeof dataItem[colorByKey] === 'number') {\n return 'number';\n }\n \n return 'string';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"/**\n * Helper function to get x and y positions for nodes of a tree\n */\nfunction treeLayout(jsonData, idKey, parentKey, sortKey) {\n if (sortKey && sortKey.trim() !== '') {\n jsonData.sort((a, b) => {\n if (typeof a[sortKey] === 'number') {\n return a[sortKey] - b[sortKey];\n } \n return String(a[sortKey]).localeCompare(String(b[sortKey]));\n })\n }\n \n const stratify = d3.stratify()\n .id(d => d[idKey])\n .parentId(d => d[parentKey]);\n const rootNode = stratify(jsonData);\n\n // compute tree layout\n const tree = d3.tree();\n tree(rootNode);\n \n // map x and y into the original data\n const nodes = rootNode.descendants();\n nodes.forEach(node => {\n node.data.x = node.x;\n node.data.y = node.y;\n });\n \n const treeData = nodes.map(d => d.data);\n treeData._tree = true; // internal flag to note we are using tree data\n treeData.links = rootNode.links();\n \n return treeData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"isTreeData = !!data._tree","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"function randomLayout(jsonData) {\n jsonData.forEach(d => {\n d.x = Math.random();\n d.y = Math.random();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"mutable highlightPoint = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"\nfunction getHighlightInfo() {\n console.log('rendering...');\n if (highlightPoint) {\n return `\n\n \n ${Object.keys(highlightPoint).map(key => {\n return ``;\n }).join('\\n')}\n \n

${key}	${highlightPoint[key]}

\n`\n } else {\n return `\n

Hover over the plot above to see point details

\n`;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"{\n // when a lasso is completed, filter to the points within the lasso polygon\n function handleLassoEnd(lassoPolygon) {\n const selectedPoints = renderData.filter(d => {\n // note we have to undo any transforms done to the x and y to match with the\n // coordinate system in the svg.\n const x = xScale(d.x) + padding.left;\n const y = yScale(d.y) + padding.top;\n\n return d3.polygonContains(lassoPolygon, [x, y]);\n });\n\n updateSelectedPoints(selectedPoints);\n }\n\n // reset selected points when starting a new polygon\n function handleLassoStart(lassoPolygon) {\n highlight(null);\n // updateSelectedPoints([]);\n }\n \n // attach lasso to interaction SVG\n const lassoInstance = lasso()\n .on('end', handleLassoEnd)\n .on('start', handleLassoStart);\n \n d3.select(vis).select('.highlight-svg').call(lassoInstance);\n\n return html`Set up lasso`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"function highlight(d) {\n mutable highlightPoint = d\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function updateSelectedPoints(newPoints) {\n console.log('new selected data', newPoints);\n \n if (!newPoints || !newPoints.length) {\n mutable selectedData = null;\n } else {\n mutable selectedData = newPoints;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"mutable selectedData = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"renderData = selectedData == null ? data : selectedData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"activeData = renderData.filter(d => !isPointInactive(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"xExtent = d3.extent(renderData, d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"yExtent = d3.extent(renderData, d => d.y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"makeId = {\n // const ShortUniqueId = require('short-unique-id')\n const uid = new ShortUniqueId()\n return function () {\n return uid.randomUUID(8)\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// sadly shortid doesn't seem to work in Observable so use this\nShortUniqueId = require('short-unique-id')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"padding = ({ top: 40, right: 40, bottom: 40, left: 40 })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"plotAreaWidth = width - padding.left - padding.right\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"plotAreaHeight = visHeight - padding.top - padding.bottom\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"xScale = d3\n .scaleLinear()\n .domain(xExtent)\n .range([0, plotAreaWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"yScale = d3\n .scaleLinear()\n .domain(yExtent)\n .range([0, plotAreaHeight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"