Last active
August 29, 2015 14:19
-
-
Save skokenes/498a150f94cd21e2270f to your computer and use it in GitHub Desktop.
Lasso Map Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .subunit { | |
| fill: none; | |
| stroke: #777; | |
| } | |
| .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; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src = "lasso.min.js"></script> | |
| <script> | |
| function lassoFunction (svg){ | |
| // Lasso functions to execute while lassoing | |
| var lasso_start = function() { | |
| lasso.items() | |
| //.attr("r",3.5) // reset size | |
| .style("fill",null) // clear all of the fills | |
| .classed({"not_possible":true,"selected":false}); // style as not possible | |
| }; | |
| var lasso_draw = function() { | |
| // Style the possible dots | |
| lasso.items().filter(function(d) {return d.possible===true}) | |
| .classed({"not_possible":false,"possible":true}); | |
| // Style the not possible dot | |
| lasso.items().filter(function(d) {return d.possible===false}) | |
| .classed({"not_possible":true,"possible":false}); | |
| }; | |
| var lasso_end = function() { | |
| var selected; | |
| // var data = thisArea.data.objects; | |
| //var keys = Object.keys(thisArea.database.data[0]); | |
| var previousSelection=d3.selectAll(".selectedData"); | |
| // Reset the color of all dots | |
| lasso.items() | |
| .style("fill", function(d) { return "red"; }); | |
| // Style the selected dots | |
| selected=lasso.items().filter(function(d) { | |
| return d.selected===true}) | |
| .classed({"not_possible":false,"possible":false}) | |
| .attr({ | |
| "r":17, | |
| }) | |
| .classed("selectedData",true) | |
| .on("click",function(d){ | |
| operationsMenu(d3.mouse(this),thisArea); | |
| }); | |
| // Reset the style of the not selected dots | |
| lasso.items().filter(function(d) {return d.selected===false}) | |
| .classed({"not_possible":false,"possible":false}) | |
| //.attr("r",3.5); | |
| for (i=0; i<selected[0].length;i++) { | |
| selectedItems.push(data[selected[0][i].id.split("_")[1]]) | |
| } | |
| //Each selection is made on one graph. Save the first element parent to the list in each lasso. | |
| //parentsOfSelection.push(selected[0][0].classList[0]); | |
| //parentsOfSelection=cleanArray(parentsOfSelection) | |
| //Remove duplicates from selectedItems | |
| //removeDuplicates(selectedItems,keys); | |
| }; | |
| // Create the area where the lasso event can be triggered | |
| var lasso_area = svg.append("rect") | |
| .attr("width",width) | |
| .attr("height",height) | |
| .style("opacity",0); | |
| // Define the lasso | |
| var lasso = d3.lasso() | |
| .closePathDistance(75) // max distance for the lasso loop to be closed | |
| .closePathSelect(true) // can items be selected by closing the path? | |
| .hoverSelect(true) // can items by selected by hovering over them? | |
| .area(lasso_area) // area where the lasso can be started | |
| .on("start",lasso_start) // lasso start function | |
| .on("draw",lasso_draw) // lasso draw function | |
| .on("end",lasso_end); // lasso end function | |
| // Init the lasso on the svg:g that contains the dots | |
| svg.call(lasso); | |
| return lasso; | |
| } | |
| </script> | |
| <script> | |
| var data = [[19.084743376000063, -155.77583923699996],[21.276625083000056, -157.80294715899998],[21.30423490800007, -157.79986941499996]]; | |
| var width = 2000, | |
| height = 2000; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var lasso = lassoFunction(svg); | |
| var projection = d3.geo.mercator() | |
| .scale(6000) | |
| .translate([17000 , 2500]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| d3.json("test.json", function(error, hawaii) { | |
| if (error) return console.error(error); | |
| svg.selectAll(".subunit") | |
| .data(topojson.feature(hawaii, hawaii.objects.filterMap).features) | |
| .enter().append("path") | |
| .attr("class", function(d) { | |
| return "subunit " + d.id; }) | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(topojson.feature(hawaii, hawaii.objects.hawaiiPlaces)) | |
| .attr("d", path) | |
| .attr("class", "place"); | |
| svg.selectAll(".place-label") | |
| .data(topojson.feature(hawaii, hawaii.objects.hawaiiPlaces).features) | |
| .enter().append("text") | |
| .attr("class", "place-label") | |
| .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
| .attr("dy", "-0.2em") | |
| .text(function(d) { return d.properties.name; }); | |
| svg.selectAll(".pin") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class","pin") | |
| .attr("r", 5) | |
| .attr("fill","red") | |
| .attr("transform", function(d) { | |
| return "translate(" + projection([ | |
| //coordinates should be passed longitude,latitude | |
| d[1], | |
| d[0] | |
| ]) + ")" | |
| }); | |
| lasso.items(d3.selectAll(".pin")); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.lasso=function(){function t(){function t(){u="",P.attr("d",null),v.attr("d",null),g=0;var t=y[0][0].getBoundingClientRect();n[0].forEach(function(e){e.hoverSelected=!1,e.loopSelected=!1;var n=(e.getBBox(),e.getBoundingClientRect());e.lassoPoint={cx:Math.round(n.left-t.left+n.width/2),cy:Math.round(n.top-t.top+n.height/2),edges:{top:0,right:0,bottom:0,left:0},close_edges:{left:0,right:0}}}),1==a&&n.on("mouseover.lasso",function(){d3.select(this)[0][0].hoverSelected=!0}),i.start()}function c(){var t=d3.mouse(this)[0],a=d3.mouse(this)[1];""==u?(u=u+"M "+t+" "+a,h=[t,a],M.attr("cx",t).attr("cy",a).attr("r",7).attr("display",null)):u=u+" L "+t+" "+a,n[0].forEach(function(t){t.lassoPoint.close_edges={left:0,right:0}});var l=Math.sqrt(Math.pow(t-h[0],2)+Math.pow(a-h[1],2)),c="M "+t+" "+a+" L "+h[0]+" "+h[1];P.attr("d",u),o>=l?v.attr("display",null):v.attr("display","none"),s=o>=l?!0:!1;var d=u+"Z";x.attr("d",d);for(var y=P.node(),p=y.getTotalLength(),m=(y.getPointAtLength(g-1),g);p>=m;m++){var _=y.getPointAtLength(m),S={x:Math.round(100*_.x)/100,y:Math.round(100*_.y)/100},b=y.getPointAtLength(m-1),L={x:Math.round(100*b.x)/100,y:Math.round(100*b.y)/100};n[0].filter(function(t){var n;return t.lassoPoint.cy===S.y&&t.lassoPoint.cy!=L.y?(f={x:L.x,y:L.y},n=!1):t.lassoPoint.cy===S.y&&t.lassoPoint.cy===L.y?n=!1:t.lassoPoint.cy===L.y&&t.lassoPoint.cy!=S.y?n=e(t.lassoPoint.cy-S.y)!=e(t.lassoPoint.cy-f.y):(f={x:L.x,y:L.y},n=e(t.lassoPoint.cy-S.y)!=e(t.lassoPoint.cy-L.y)),n}).forEach(function(t){S.x>t.lassoPoint.cx&&(t.lassoPoint.edges.right=t.lassoPoint.edges.right+1),S.x<t.lassoPoint.cx&&(t.lassoPoint.edges.left=t.lassoPoint.edges.left+1)})}if(1==s&&1==r){v.attr("d",c),close_path_node=v.node();for(var w=close_path_node.getTotalLength(),m=0;w>=m;m++){var _=close_path_node.getPointAtLength(m),b=close_path_node.getPointAtLength(m-1);n[0].filter(function(t){return t.lassoPoint.cy==Math.round(_.y)}).forEach(function(t){Math.round(_.y)!=Math.round(b.y)&&Math.round(_.x)>t.lassoPoint.cx&&(t.lassoPoint.close_edges.right=1),Math.round(_.y)!=Math.round(b.y)&&Math.round(_.x)<t.lassoPoint.cx&&(t.lassoPoint.close_edges.left=1)})}n[0].forEach(function(t){t.loopSelected=t.lassoPoint.edges.left+t.lassoPoint.close_edges.left>0&&(t.lassoPoint.edges.right+t.lassoPoint.close_edges.right)%2==1?!0:!1})}else n[0].forEach(function(t){t.loopSelected=!1});d3.selectAll(n[0].filter(function(t){return t.loopSelected&&s||t.hoverSelected})).attr("d",function(t){return t.possible=!0}),d3.selectAll(n[0].filter(function(t){return!(t.loopSelected&&s||t.hoverSelected)})).attr("d",function(t){return t.possible=!1}),i.draw(),g=p+1}function d(){n.on("mouseover.lasso",null),n.filter(function(t){return t.possible===!0}).attr("d",function(t){return t.selected=!0}),n.filter(function(t){return t.possible===!1}).attr("d",function(t){return t.selected=!1}),n.attr("d",function(t){return t.possible=!1}),P.attr("d",null),v.attr("d",null),M.attr("display","none"),i.end()}var u,h,f,g,y=d3.select(this[0][0]),p=y.append("g").attr("class","lasso"),P=p.append("path").attr("class","drawn"),v=p.append("path").attr("class","loop_close"),x=p.append("path").attr("display","none"),M=p.append("circle").attr("class","origin"),m=d3.behavior.drag().on("dragstart",t).on("drag",c).on("dragend",d);l.call(m)}function e(t){return t?0>t?-1:1:0}var n=null,o=75,r=!0,s=!1,a=!0,l=null,i={start:function(){},draw:function(){},end:function(){}};return t.items=function(e){return arguments.length?(n=e,n[0].forEach(function(t){var e=d3.select(t);"undefined"==typeof e.datum()?e.datum({possible:!1,selected:!1}):e.attr("d",function(t){return t.possible=!1,t.selected=!1,t})}),t):n},t.closePathDistance=function(e){return arguments.length?(o=e,t):o},t.closePathSelect=function(e){return arguments.length?(r=1==e?!0:!1,t):r},t.isPathClosed=function(e){return arguments.length?(s=1==e?!0:!1,t):s},t.hoverSelect=function(e){return arguments.length?(a=1==e?!0:!1,t):a},t.on=function(e,n){if(!arguments.length)return i;if(1===arguments.length)return i[e];var o=["start","draw","end"];return o.indexOf(e)>-1&&(i[e]=n),t},t.area=function(e){return arguments.length?(l=e,t):l},t}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"type":"Topology","objects":{"filterMap":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","properties":{"name":"Hawaii"},"id":"USH","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]],[[7]],[[8]],[[9]],[[10]],[[11]],[[12]],[[13]]]}]},"hawaiiPlaces":{"type":"GeometryCollection","geometries":[{"type":"Point","properties":{"name":"Lihue"},"coordinates":[8059,3238]},{"type":"Point","properties":{"name":"Wahiawa"},"coordinates":[8633,2735]},{"type":"Point","properties":{"name":"Wailuku"},"coordinates":[9279,2091]},{"type":"Point","properties":{"name":"Kailua-Kona"},"coordinates":[9501,786]},{"type":"Point","properties":{"name":"Hilo"},"coordinates":[9882,836]},{"type":"Point","properties":{"name":"Honolulu"},"coordinates":[8702,2530]}]}},"arcs":[[[9662,1297],[8,-16],[10,6],[15,-2],[16,-14],[30,-24],[37,-46],[50,-75],[20,-30],[23,-53],[12,-38],[0,-42],[-1,-55],[2,-43],[11,1],[17,18],[12,-20],[6,-22],[-2,-45],[6,-28],[7,-26],[22,-47],[22,-23],[9,-19],[5,-22],[-1,-28],[-6,-16],[-19,-54],[-19,-17],[-27,-61],[-18,-12],[0,-12],[-16,-9],[-13,-23],[-25,-18],[-22,-14],[-17,10],[-11,1],[-9,-7],[-10,-14],[-13,-22],[-8,-23],[-9,-3],[-6,-7],[-10,-14],[-6,-11],[-22,-29],[-6,-5],[-19,-42],[-3,-17],[1,-38],[-8,-20],[-13,-31],[-7,-44],[-7,-16],[-7,-15],[-10,-21],[-4,5],[0,23],[-9,17],[-17,22],[-20,29],[-11,17],[-18,11],[-8,5],[-2,20],[-3,19],[-6,4],[-3,28],[-4,45],[5,53],[10,153],[-1,26],[-6,25],[-5,33],[-7,50],[-3,21],[-4,13],[-4,21],[1,23],[-5,22],[-3,24],[-4,30],[-8,26],[-6,11],[-9,26],[-10,67],[4,30],[5,25],[9,18],[9,14],[4,11],[2,20],[6,11],[18,16],[8,35],[5,12],[9,40],[10,25],[6,0],[3,33],[2,14],[-3,20],[-7,16],[-15,53],[-6,47],[-1,37],[0,34],[8,37],[6,12],[15,0],[28,-15],[12,-5],[2,-6],[1,-8],[1,-10],[7,-27],[16,-15],[11,-14],[7,-21],[11,-11]],[[9267,1712],[-5,-20],[-12,0],[-11,5],[-8,-4],[-12,-6],[-14,-4],[-9,22],[5,16],[9,18],[12,19],[13,16],[11,10],[9,-2],[11,-29],[-6,-31],[7,-10]],[[9105,1926],[-20,-3],[-9,29],[-2,24],[-1,20],[0,25],[-1,22],[-7,10],[-18,16],[-5,20],[3,23],[10,12],[18,5],[41,-15],[19,-39],[7,-17],[7,-20],[4,-17],[1,-13],[-2,-18],[-10,-34],[-19,-20],[-16,-10]],[[9243,2234],[4,-10],[4,-2],[7,-8],[5,-6],[2,-13],[5,-3],[2,-14],[0,-13],[5,-12],[4,-14],[3,-16],[5,-19],[8,2],[4,12],[9,0],[6,3],[12,1],[5,3],[14,23],[6,6],[7,1],[7,0],[7,-2],[6,-6],[2,-1],[1,0],[1,-3],[1,-4],[6,4],[7,-10],[2,-12],[3,-6],[3,-8],[4,-13],[8,-12],[5,-12],[1,-10],[5,-1],[2,0],[2,6],[5,-10],[3,-14],[2,-9],[15,-5],[14,-16],[21,-16],[10,-46],[-2,-41],[-8,-34],[-11,-7],[-8,-30],[-12,0],[-23,-28],[-15,1],[-9,2],[-8,-1],[-21,-23],[-13,-16],[-8,-8],[-10,6],[-4,1],[-7,5],[-5,-4],[-18,-2],[-12,26],[-1,11],[-6,14],[4,8],[0,18],[-4,70],[-3,19],[0,21],[-2,18],[-2,3],[-3,7],[-5,6],[-6,-1],[-6,-6],[-3,-15],[-5,-2],[-6,8],[-6,11],[-10,4],[-9,13],[-6,-1],[-5,17],[-10,25],[-12,37],[-1,23],[-4,12],[2,22],[2,29],[4,25],[5,17],[5,1],[3,9],[1,8],[4,6],[3,-1],[5,-1],[4,3],[1,5],[3,0],[3,-5]],[[8963,2438],[6,-2],[10,1],[6,-4],[3,-12],[7,0],[40,-14],[22,-8],[16,-2],[3,12],[1,10],[2,8],[4,3],[6,-18],[2,-20],[9,-7],[12,-6],[22,1],[9,3],[6,5],[5,4],[3,-2],[8,2],[6,-5],[4,-2],[5,2],[2,-4],[-1,-5],[3,-4],[7,1],[3,-5],[-8,-35],[-13,-30],[-17,-20],[-16,-16],[-16,-8],[-17,4],[-16,8],[-33,20],[-20,17],[-29,-6],[-20,-2],[-15,-6],[-12,2],[-10,-1],[-8,8],[-5,15],[0,20],[3,16],[5,13],[8,7],[7,19],[2,20],[-6,16],[0,8],[5,-1]],[[8688,2835],[3,-18],[4,-6],[2,-7],[1,-12],[3,2],[4,-3],[3,-9],[4,-15],[1,-16],[0,-8],[-4,0],[-2,-6],[1,-18],[1,-11],[1,-18],[4,-3],[5,-5],[4,-12],[4,-13],[6,-5],[1,-8],[4,-4],[3,8],[4,13],[-6,10],[0,12],[5,5],[10,-3],[6,3],[1,-8],[-6,-14],[-2,-19],[1,-15],[7,-10],[6,-13],[1,-9],[-2,-12],[2,-12],[4,-17],[9,-14],[9,-11],[3,-6],[-5,-14],[-11,-22],[-4,-10],[-4,-4],[-2,7],[1,9],[-4,8],[-11,-7],[-10,-3],[-7,-8],[-6,-11],[-7,0],[-3,3],[-2,9],[-3,12],[-14,14],[-7,8],[-5,15],[-1,10],[0,10],[-3,-3],[-6,-13],[4,-11],[-18,-3],[1,5],[2,3],[-3,7],[-7,-1],[0,11],[-1,8],[1,7],[-2,7],[5,5],[4,5],[5,6],[2,9],[-5,10],[-5,4],[-3,4],[-1,-4],[-2,-13],[-4,4],[-3,9],[-2,7],[0,-14],[2,-17],[-2,-3],[-9,18],[-4,8],[3,-18],[7,-17],[5,-10],[4,-8],[-2,-16],[-8,-7],[-10,-4],[-15,-8],[-8,-2],[-7,-5],[-2,2],[-2,4],[-5,6],[-4,36],[-4,28],[-6,16],[-4,14],[-8,10],[-2,28],[-3,15],[-7,15],[-5,7],[-5,19],[0,21],[-1,31],[-3,9],[-18,36],[3,3],[15,7],[18,2],[12,-1],[7,0],[6,3],[6,-3],[2,13],[2,6],[8,10],[8,16],[4,7],[-1,6],[3,12],[4,20],[7,13],[9,19],[13,8],[6,0],[3,-5],[2,-6],[3,-9],[7,-13],[0,-12],[4,-4],[0,-9],[4,-9],[-2,-19],[5,-18],[6,-13]],[[7707,3030],[-5,-4],[-6,10],[-5,4],[-5,37],[1,24],[5,25],[16,39],[14,24],[17,23],[3,14],[2,13],[-1,19],[8,8],[7,-1],[8,-6],[4,-19],[-4,-9],[-5,-16],[-3,-22],[3,-29],[-6,-18],[-7,-8],[-6,-8],[-9,-6],[-9,-14],[-6,-11],[-3,-16],[-5,-31],[-3,-22]],[[8052,3499],[6,-7],[7,0],[8,-10],[3,-16],[6,-12],[2,-2],[2,-14],[2,-10],[1,-11],[4,-5],[0,-11],[-1,-30],[-4,-12],[-6,-40],[-7,-9],[0,-29],[1,-19],[0,-20],[0,-20],[-1,-8],[-6,0],[-5,-6],[4,-8],[1,-9],[-2,-7],[-5,1],[-8,-14],[-3,-13],[-3,-7],[-7,-11],[-1,-8],[-5,-1],[-2,-6],[-2,-5],[-19,15],[-12,3],[-8,0],[-16,7],[-7,2],[-3,7],[-2,-1],[-1,-7],[-3,-2],[-2,8],[-6,6],[-5,9],[-3,10],[-2,9],[-2,9],[-5,2],[-1,9],[-5,5],[-8,3],[-7,6],[-5,6],[-8,4],[-7,5],[-4,18],[-1,10],[-4,5],[-3,10],[0,15],[1,12],[0,13],[-1,9],[5,4],[11,30],[6,18],[1,11],[0,9],[0,7],[3,3],[1,3],[3,12],[10,6],[11,6],[12,17],[8,16],[10,11],[3,11],[6,5],[4,0],[3,7],[5,-2],[3,-6],[1,-7],[4,-1],[5,-4],[4,-6],[4,1],[-2,8],[2,7],[7,7],[8,-3],[10,1],[5,-8],[4,2],[5,7],[3,7],[5,-7]],[[6964,4353],[-2,-2],[1,4],[0,3],[1,2],[2,-1],[-1,-4],[0,-1],[-1,-1]],[[5789,4921],[2,-9],[-3,2],[-1,2],[1,2],[1,3]],[[4388,6422],[0,-4],[-3,15],[1,1],[2,-5],[0,-4],[0,-3]],[[2802,7231],[-3,-22],[-4,4],[-1,14],[8,4]],[[1850,7533],[-1,-5],[-2,4],[0,3],[0,5],[0,5],[1,-5],[1,-4],[1,-3]],[[3,9984],[-2,-1],[-1,2],[3,3],[1,4],[1,3],[1,4],[1,-9],[-2,-3],[-2,-3]]],"transform":{"scale":[0.002349265186218617,0.00094965110831083],"translate":[-178.30436616299988,18.906117143000117]}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment