Skip to content

Instantly share code, notes, and snippets.

@cpdean

cpdean/README.md

Last active August 29, 2015 14:06
Show Gist options
  • Save cpdean/7a71e687dd5a80f6fd57 to your computer and use it in GitHub Desktop.
Save cpdean/7a71e687dd5a80f6fd57 to your computer and use it in GitHub Desktop.
Download ZIP
understanding zoom behavior bindings
Raw
README.md

Zoom and pan by scrolling and clicking and dragging.

view on bl.ocks.org

The difference between these two maps is how the zoom behavior is bound to them. I had been using the one on the right and unhappy with how the ability to pan was compromised the further you zoomed in. Also it had seemed jittery. After closely studying the examples from Mike Bostock I finally figured out that you have to bind the zoom behavior to the parent SVG element but have all the juicy map details as a child element, and have the zoom function manipulate that child directly. The way I had set it up originally, the zoom function was manipulating the child, but the zoom behavior was also bound directly to the child. At least that's how I understand that I did it.

What's the difference between these two ways to use the zoom behavior? Why does the one on the right act so buggy?

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
circle {
fill: steelblue;
}
line.route {
}
svg {
border: 3px solid black;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = Math.max(950, window.innerWidth) / 3,
height = Math.max(500, window.innerHeight) / 2,
focus = [-93.167202, 44.940991];
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed);
var svg = d3.select("body")
.append("svg")
.attr("id", "map")
.attr("width", width)
.attr("height", height)
.call(zoom)
;
var map = svg.append("g");
map.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#fff")
;
function zoomed(){
map.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
var projection = d3.geo.mercator()
.scale((1 << 20)/ 2 / Math.PI)
//.translate([-width / 2, -height / 2])
.center(focus)
d3.csv("stations.csv", function(data){
var shifted = data.map(function(d){
var c = [d.Longitude, d.Latitude];
var n = projection(c);
return n;
});
var stations = map.selectAll("circle")
.data(shifted)
.enter()
.append("circle")
.attr("transform", transform)
.attr("r", 2);
function transform(d){
return "translate(" + d[0] + "," + d[1] + ")";
}
});
var zoom2 = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed2);
var map2 = d3.select("body")
.append("svg")
.attr("id", "map")
.attr("width", width)
.attr("height", height)
.append("g")
.call(zoom2)
;
map2.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#fff")
;
function zoomed2(){
map2.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
var projection2 = d3.geo.mercator()
.scale((1 << 20)/ 2 / Math.PI)
//.translate([-width / 2, -height / 2])
.center(focus)
d3.csv("stations.csv", function(data){
var shifted = data.map(function(d){
var c = [d.Longitude, d.Latitude];
var n = projection2(c);
return n;
});
var stations2 = map2.selectAll("circle")
.data(shifted)
.enter()
.append("circle")
.attr("transform", transform2)
.attr("r", 2);
function transform2(d){
return "translate(" + d[0] + "," + d[1] + ")";
}
});
</script>
Raw
stations.csv
Terminal Station Location Latitude Longitude Nb docks
30000 100 Main Street SE 140 Main Street SE 44.984892 -93.256551 27
30001 25th Street & 33rd. Ave. S. 3301 East 25th Street 44.95734 -93.22374 15
30002 Augsburg College 2381 Riverside Ave. S 44.96622 -93.2384 15
30003 Plymouth Ave N. & N. Oliver Ave 2060 Plymouth Avenue North 44.991412 -93.306269 15
30004 11th Street & Hennepin 1060 Hennepin Ave. 44.97534 -93.27869 23
30005 Hennepin & Central Avenue NE 422 East Hennepin Ave. 44.98889 -93.25392 15
30006 YWCA Downtown 1190 Nicollett Mall 44.972217 -93.276435 23
30007 9th Street & 4th Ave. 380 South 9th Street 44.97265 -93.26872 19
30008 Midtown Exchange 2975 Elliot Ave. S 44.94851 -93.2602 19
30009 4th Street & 13th Ave. SE 1280 4th Street SE 44.98102 -93.23746 19
30010 Hennepin & Laurel Ave. 1400 Hennepin Avenue 44.97391 -93.28305 15
30011 North 2nd Street & 4th Ave. N 405 North 2nd Street 44.986087 -93.272459 19
30012 Mpls. Convention Center 1400 Marquette Avenue 44.970041 -93.275861 19
30013 Lake Street & Lyndale 2910 Lyndale Avenue S 44.94964 -93.28827 19
30014 22nd Ave S & Franklin Ave 2200 Franklin Ave 44.962923 -93.241013 15
30015 Washington & Cedar 1500 Washington Avenue S 44.97344 -93.24748 20
30016 Walker Art Center 1750 Hennepin Avenue 44.96746 -93.28848 17
30017 22nd Street & Lyndale 2250 Lyndale Ave S 44.960744 -93.28815 19
30018 MCAD 2501 Stevens Avenue S - Minneapolis College of Art and Design 44.957214 -93.274981 17
30019 Social Sciences 269 19th Ave S 44.971359 -93.243754 29
30020 YWCA Uptown 2850 Hennepin Ave 44.95131 -93.29853 19
30021 Washington & 2nd Ave. N 190 Washington Ave. N 44.98383 -93.27099 19
30022 26th Street & Lyndale 2601 Lyndale Ave. S 44.95548 -93.28775 15
30023 Chicago & 27th Street 2705 Chicago Ave. S 44.95355 -93.26259 15
30024 Coffman Memorial Union 300 Washington Ave SE 44.973411 -93.234772 35
30025 Williamson Hall 331 Pillsbury Drive SE 44.977406 -93.234911 25
30026 Mayo Memorial Building 150 Union Street SE 44.97209 -93.23206 25
30027 4th Street S & 19th Ave. 1905 South 4th Street 44.97003 -93.24519 19
30028 Washington & Marquette 100 Washington Ave. S 44.98112 -93.26634 19
30029 Hennepin County Government Center 505 3rd Ave. S 44.976602 -93.266701 27
30030 South 2nd Street & 3rd Ave. S 300 South 2nd Street 44.980926 -93.26285 27
30031 University Ave. & 23rd Ave. SE 2221 University Ave. SE 44.974876 -93.224383 19
30032 4th Street & 17th Ave. SE 1690 4th Street SE 44.97913 -93.23189 15
30033 Franklin & 11th Ave 1085 East Franklin Ave. 44.96251 -93.2583 15
30034 Oak Street Ramp 399 Oak Street SE 44.97202 -93.22697 23
30035 Loring Park 1501 Harmon Place 44.9715 -93.284927 15
30036 Downtown Library 345 Nicollet Mall 44.980199 -93.269217 31
30037 Currie Park 680 16th Ave. S 44.969225 -93.251136 15
30038 Cedar Ave & 5th Street S 427 Cedar Ave S 44.969108 -93.247057 15
30039 Park Ave. S & 5th Street 495 Park Avenue 44.97491 -93.26078 19
30040 11th Street & Marquette 1090 Marquette Ave. 44.97265 -93.27405 15
30041 Franklin & Portland 600 East Franklin Ave. 44.962846 -93.267526 15
30042 IDS Center 80 South 8th Street 44.975641 -93.272185 23
30043 Lake Street & Humboldt 1400 West Lake Street 44.94865 -93.30077 19
30044 26th Street & Hennepin 2600 Hennepin Ave. 44.9554734 -93.29714298 15
30045 Franklin & 28th Ave S 2823 East Franklin Ave. 44.962726 -93.230776 19
30046 Washington Ave S & 9th Ave S 920 Washington Ave. 44.97654 -93.25535 19
30047 University & Bank Street SE 280 Bank Street SE 44.98717 -93.25576 19
30048 Dupont Ave & 22nd Street 2119 Dupont Ave S. 44.96146 -93.29303 15
30049 Nicollet Ave & W 26th Street 2540 Nicollet Ave 44.95618 -93.27796 15
30050 3rd Street S & 2nd Ave. S 275 2nd Ave. S 44.97974 -93.26599 27
30051 7th Street & 4th Ave. S 690 4th Ave S. 44.97497 -93.266684 15
30052 Nicollet Mall and Grant Street 1300 Nicollet Ave 44.96995 -93.278133 15
30053 2nd Ave N & N 6th Street 516 2nd Ave N 44.980536 -93.275626 23
30054 5th Ave. S & East 27th Street 2680 5th Avenue South 44.954096 -93.26907 15
30055 Hennepin Ave. & 4th Street 435 Hennepin Ave. 44.98017 -93.27152 23
30056 5th Ave N & 4th Street N 376 5th Avenue N. 44.98439 -93.277316 19
30057 McNamara Center 270 Walnut Street SE 44.9743 -93.22854 19
30058 Elliot Hall 100 East River Parkway 44.97685 -93.23818 15
30059 Glenwood Ave & N Morgan Ave. 1819 Glenwood Ave 44.9807 -93.30441 15
30060 Nicollet & Franklin 1925 Nicollet Ave 44.96342 -93.277939 23
30061 Emerson Ave. S & 24th Street 2275 Emerson Ave S. 44.959629 -93.294317 11
30062 Minneapolis Farmers Market 237 Border Ave 44.98052 -93.28542 15
30063 Elliot Park 805 Elliot Ave S. 44.970553 -93.26079 15
30064 28th Street & Nicollet Ave. S 15 West 28th Street 44.9519 -93.27831 15
30065 Washington Ave N & 9th Ave N 851 N Washington Ave 44.989451 -93.279579 15
30066 Plymouth Ave. N & Fremont 1180 Plymouth Ave. N 44.992075 -93.294907 15
30067 Bryant Ave. N & West Broadway 2020 Bryant Ave. N 44.999341 -93.290941 15
30068 Girard Ave N & W Broadway Ave 2002 Girard Ave N 44.99957 -93.297071 15
30069 Farview Park 680 26th Ave. N 45.005994 -93.287559 15
30070 West Broadway & Logan Ave N 2040 West Broadway Ave. 45.002448 -93.305857 15
30071 North Regional Library 3155 Girard Ave. N 45.012998 -93.296761 15
30072 Lowry Ave N & Penn Ave 2190 Lowry Ave. N 45.013318 -93.307798 15
30073 West 34th Street & Hennepin Ave S 3348 Hennepin Ave 44.941388 -93.298634 15
30074 27th Ave SE & University Ave. 315 27th Ave SE 44.97259 -93.218919 15
30075 Curfew Street & Ellis Ave. 827 Curfew Street 44.96616 -93.20525 15
30076 Carleton Street & University Ave 746 Carleton Street 44.963549 -93.195906 15
30077 Fairview Ave. & University Ave. 485 Fairview Ave N 44.95665 -93.17706 15
30078 Hamline University 1544 Englewood Ave 44.964172 -93.165868 15
30079 Sherburne Ave & Snelling Ave N 1583 Sherburne Ave 44.956624 -93.16734 15
30080 Midtown YWCA 2121 East Lake St. 44.94823 -93.24054 15
30081 East Lake Street & 36th Ave S 3521 East Lake Street 44.94826 -93.22106 15
30082 N Victoria Street & University Ave 861 University Avenue W 44.956052 -93.136556 15
30083 Merriam Park Library 255 Fairview Ave N 44.94885 -93.1773 15
30084 Grand Ave & Cretin Ave 2091 Grand Avenue 44.939936 -93.192758 15
30085 Grand Ave & Fairview Ave 1807 Grand Ave 44.940513 -93.177093 15
30086 Macalester College 1679 Grand Ave 44.940218 -93.17022 15
30087 Grant Street & Portland Ave 608 E Grant Street 44.96954 -93.2669 15
30088 6th Ave. SE & University Ave. 288 6th Ave SE 44.983281 -93.24812 19
30089 Lake Calhoun Center 3033 Excelsior Boulevard 44.94885 -93.31759 27
30090 Portland Ave. & Washington Ave. 244 Portland Ave S 44.978068 -93.26023 19
30091 Gateway Park 14 2nd St. N 44.9825943 -93.2675139 15
30092 2nd Street N & 8th Ave. N 715 North 2nd St 44.989166 -93.27651 19
30093 West 15th Street & Willow 1470 Willow Street 44.968237 -93.281991 15
30094 West 32nd Street & Bryant Ave S 818 32nd St W 44.94478 -93.29038 15
30095 West 36th Street & Bryant Ave S 904 36th St W 44.93775 -93.29122 15
30096 University Ave. NE & 12th Ave. NE 1212 University Ave NE 44.999894 -93.26296 15
30097 Pleasant Ave S & Lake Street 2948 Pleasant Ave S 44.948556 -93.283163 15
30098 Marshall Street NE & 8th Ave. NE 801 Marshall St NE 44.995348 -93.266854 15
30099 Kowalski's Market 1268 Grand Ave 44.94016 -93.1529 15
30100 Grand Ave & Lexington Parkway 1115 Grand Ave 44.940127 -93.146957 15
30101 N Milton Street & Summit Ave 484 Victoria St N 44.941599 -93.138832 15
30102 St. Catherine University 1943 Randolph Ave 44.926969 -93.182263 15
30103 Hague Ave & Dale Street 638 Hague Avenue 44.945736 -93.12661 15
30104 Logan Park 680 Broadway St. NE 44.99882 -93.25276 15
30105 Wilder Foundation 451 Lexington Pkwy N 44.95498 -93.14795 15
30106 Dale Street & Grand Ave. 55 South Dale Street 44.939779 -93.126261 15
30107 Dale Street N & University Ave 480 Dale Street N 44.956066 -93.126088 15
30108 Carter Ave & Como Ave 2190 Carter 44.981343 -93.193977 15
30109 Como Ave. SE & 29th Ave. SE 2820 Como Ave. SE 44.987934 -93.212892 19
30110 15th Ave. SE & Como Ave. SE 901 15th Ave SE 44.987517 -93.230469 15
30111 St. Paul Police Western District 389 Hamline Ave. 44.953527 -93.156984 15
30112 Central Ave. NE & 22nd Ave NE 1955 Central Ave. NE 45.00994 -93.247114 15
30113 U of M St. Paul Student Center 2015 Buford Ave. 44.984527 -93.185029 15
30114 Cleveland Ave N & Laurel Ave 132 N Cleveland Ave 44.945367 -93.1873 15
30115 U of M St. Paul Campus 1917 Commonwealth Ave. 44.980558 -93.181384 15
30116 Minnesota History Center 440 John Ireland Blvd 44.949053 -93.10673 15
30117 10th Street E & Cedar Street 34 East 10th Street 44.950189 -93.09759 15
30118 6th Street & Jackson Street 151 E. 6th Street 44.948737 -93.09041 19
30119 Union Depot 229 E. 4th St 44.948399 -93.086584 23
30120 Kellogg Blvd E & Jackson Street 121 Kellogg Blvd E 44.946191 -93.088802 19
30121 7th Street E & Wacouta Street 232 7th St. E. 44.950766 -93.089245 15
30122 Saint Paul College 317 Marshall Avenue 44.948317 -93.110544 19
30123 Minnesota Dept. of Transportation 709 Martin Luther King Blvd 44.95385 -93.10445 19
30124 Kellogg Blvd W & Smith Ave 234 Kellogg Blvd W 44.945173 -93.103863 23
30125 Lafayette Road & Grove Street 500 Lafayette Road 44.956028 -93.08465 23
30126 5th Street E & Minnesota Street N 72 E. 5th St 44.94683 -93.09231 23
30127 Landmark Plaza 50 W. 5th St 44.945267 -93.096114 23
30128 Wells Fargo Place 2 E. 7th St 44.94813 -93.09663 19
30129 State Street & Cesar Chavez Street 523 State Street 44.93002 -93.0779 15
30130 River Park Plaza x 44.943253 -93.083923 19
30131 Harriet Island 150 W Water Street 44.93768 -93.094532 23
30132 Kellogg Blvd & Wabasha Street 2 Kellogg Boulevard E 44.943846 -93.09227 19
30133 Wabasha Street S & Cesar Chavez Street 386 Wabasha Street South 44.934503 -93.084497 15
30134 Upper Landing 230 Spring Street 44.940902 -93.098712 19
30135 7th Street W & Grand Ave 298 W. 7th St 44.94144 -93.10624 19
30136 Science Museum of Minnesota 120 Kellogg Blvd W 44.942846 -93.097836 19
30137 Selby Ave & Virginia Street 375 Selby Avenue 44.9467 -93.1151 19
30138 University Ave & Western Ave 394 University Ave W 44.95562 -93.11665 15
30139 E 14th Street & N Robert Street 650 North Robert Street 44.954697 -93.097817 17
30140 N Marion Street & University Ave W 463 N. Marion Street 44.95476 -93.10955 15
30141 N Robert Street & E 10th Street 495 N. Robert St. 44.951132 -93.094545 19
30142 9th Street N & Hawthorne Ave 900 Hawthorne Avenue 44.977128 -93.277505 25
30143 Chicago Ave & Washington Ave S 201 Chicago Avenue South 44.977521 -93.256736 19
30144 N 4th Ave & W River Parkway 10 North 4th Avenue 44.988461 -93.269087 15
30145 Minneapolis Park & Recreation Board 2117 West River Road North 45.00095 -93.277037 15
30146 Webber Park 4259 Webber Parkway 45.033069 -93.29065 15
30147 Lake Street & West River Parkway 4722 E Lake Street 44.948452 -93.206201 15
30148 46th Street Light Rail 4522 Hiawatha Ave 44.920466 -93.21953 19
30149 Minnehaha Park 4802 Minnehaha Ave 44.916906 -93.213587 27
30150 Fort Snelling Visitor Center 200 Tower Ave 44.894044 -93.187381 31
30151 Boom Island Park 724 Sibley St. NE 44.99254 -93.270256 15
30152 Broadway & Marshall Street NE 81 Broadway Street Northeast 44.998613 -93.268633 15
30153 Coldwater Spring 5407 Minnehaha Park Drive South 44.905043 -93.198283 15
30154 13th Ave & West River Parkway 13th Ave & West River Parkway 44.976252 -93.248954 15
30155 University of St. Thomas 52 Cretin Avenue South 44.943017 -93.191837 19
30156 Lake Nokomis 2025 East Minnehaha Parkway 44.915957 -93.242761 23
30157 Lake Harriet Bandshell 4692 East Lake Harriet Boulevard 44.92936 -93.30713 27
30158 Lake Street & Knox Ave S 1873 W Lake Street 44.9485 -93.305209 33
30159 Fort Snelling State Park 101 Snelling Lake road 44.890527 -93.18237 27
30160 Dupont Ave S & Lake Street 2945 Dupont Avenue South 44.949699 -93.293129 15
30161 27th Ave S & East Lake Street 3082 27th Avenue South 44.947329 -93.233092 15
30162 Mississippi River Blvd & Summit Ave 29 South Mississippi River Boulevard 44.940288 -93.197997 15
30163 38th Street Light Rail 2999 East 38th Street 44.93434 -93.229338 15
30164 Cleveland Ave S & Highland Parkway 725 Cleveland Avenue South 44.919593 -93.187264 15
30165 Upton Ave S & Sheridan Ave S 4251 Upton Ave S 44.92515 -93.314597 19
30166 W 36th Street & W Calhoun Parkway 3187 W 36th St 44.937817 -93.320212 19
30167 LaSalle Ave & 9th Street S 81 S 10th St 44.975504 -93.275513 19
30168 Marshall Street NE & Lowry Ave 2435 Marshall Street Northeast 45.01312 -93.27166 15
30169 Marshall Street NE & 18th Ave NE 1893 Marshall Street Northeast 45.006229 -93.271571 15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment