Published
Edited
Apr 17, 2019
6 forks
19 stars
ClipPathUS Map - State Grid - Metro transitions on canvasAdjust Curve in parallel Sankey linksSvg Path Shape Smoothing TechniqueDefining class methods outside bodyD3 Pie Chart Update - v4-v7Extract empty hierarchy from flat dataNetwork Chart, Multiple Links, with shader arrowsd3.js zoom & minimap (forked)Dividing half circle to equal partsInputs in gridSvg Drop Shadows PlaygroundJsFiddle - embed notebookstroke-dasharray animationsPulse
D3 Lasso selection
Also listed in…
Work Utils
{
const svgNode = d3.select(svg`<svg width=300 height=200></svg>`)
const circles = svgNode.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 7)
.attr("cx", d=>d[1])
.attr("cy", d=>d[2])
.attr('fill','steelblue')
// ---------------- LASSO STUFF . ----------------
var lasso_start = function() {
console.log('start')
lasso.items()
.attr("r",7)
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
console.log('draw')
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var lasso_end = function() {
console.log('end')
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
lasso.selectedItems()
.classed("selected",true)
.attr("r",7);
lasso.notSelectedItems()
.attr("r",3.5);
};
const lasso = d3.lasso()
.closePathDistance(305)
.closePathSelect(true)
.targetArea(svgNode)
.items(circles)
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
svgNode.call(lasso);
return svgNode.node();
}
data = [
["Arsenal",30, 30],
["Chelsea", 50,100],
["Liverpool",100, 70],
["Manchester City", 74,140],
["Manchester United",150,30],
["Tottenham",203,100]
]
styles = html`
<div></div>
<style>
.lasso path {
stroke: rgb(80,80,80);
stroke-width:2px;
}
.lasso .drawn {
fill-opacity:.05 ;
}
.lasso .loop_close {
fill:none;
stroke-dasharray: 4, 4;
}
.lasso .origin {
fill:#3399FF;
fill-opacity:.5;
}
.not_possible {
fill:rgb(200,200,200);
}
.possible {
fill:#EC888C;
}
.selected {
fill: steelblue;
}
</style>
`
d3code = require('d3@v5')
d3 = {
const d3 = Object.assign(d3code,{lasso:d3lasso.lasso});
window.d3 = d3;
return d3;
}
d3lasso = require('d3-lasso')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
