Skip to content

Instantly share code, notes, and snippets.

@zachcp
Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zachcp/0d7d421b6f5eb45d4b72 to your computer and use it in GitHub Desktop.
Save zachcp/0d7d421b6f5eb45d4b72 to your computer and use it in GitHub Desktop.
Modify MBostocks Canvas example to have Points

This example uses d3.behavior.zoom with pre-projected geometry for map panning and zooming, in conjunction with dynamic simplification and viewport clipping. This approach is quite fast, but more work to implement than an SVG transform.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
canvas {
background: #eee;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<body>
<script>
var width = 960,
height = 960;
var scale,
translate,
area; // minimum area threshold for simplification
var clip = d3.geo.clipExtent()
.extent([[0, 0], [width, height]]);
var simplify = d3.geo.transform({
point: function(x, y, z) {
if (z >= area) this.stream.point(x * scale + translate[0], y * scale + translate[1]);
}
});
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 15]);
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
context.lineJoin = "round";
context.lineCap = "round";
var path = d3.geo.path()
.projection({stream: function(s) { return simplify.stream(clip.stream(s)); }})
.context(context);
// Added Funcitons to process Points. Note that clip2 requires a different clip window.
// Does this mean that the projection somehow begins in the middle?
////////////////////////////////////////////////////////////////////////////////////
var mercator = d3.geo.mercator()
.translate([960 / 2, 960 / 2])
.scale((960 - 1) / 2 / Math.PI);
var clip2 = d3.geo.clipExtent()
.extent([[-(width/2), -(height/2)], [width, height]]);
//.extent([[0,0], [width, height]]);
var simplify2 = d3.geo.transform({
point: function(x, y, z) {
this.stream.point( x * scale + translate[0]/2.75 , y *scale - translate[1]);
}
});
var pointpath = d3.geo.path()
.projection( {stream: function(s) { return (simplify2.stream(clip2.stream(mercator.stream(s)))); }} )
//.projection( {stream: function(s) { return (simplify2.stream(mercator.stream(s))); }} )
.context(context);
// Use queue
////////////////////////////////////////////////////////////////////////////////////
queue().defer(d3.json, "world.json")
.defer(d3.csv, "Samples.csv",type)
.await(makemap);
function makemap(error, world, samples) {
topojson.presimplify(world);
//function to create feature colelciton from features
to_fc = function(feats) {return {type: "FeatureCollection", features: feats}};
var sphere = topojson.feature(world, world.objects.sphere),
land = topojson.feature(world, world.objects.land),
boundary = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }),
samplecollection = to_fc(samples);
canvas
.call(zoom.on("zoom", zoomed))
.call(zoom.event);
function zoomed() {
translate = zoom.translate();
scale = zoom.scale();
area = 1 / scale / scale;
context.clearRect(0, 0, width, height);
context.save();
context.beginPath();
path(sphere);
context.fillStyle = "#fff";
context.fill();
context.beginPath();
path(land);
context.fillStyle = "LightGrey";
context.fill();
context.beginPath();
path(boundary);
context.strokeStyle = "#fff";
context.stroke();
// This section will add the point features (samplepoints)
// using a special pathdrawing construct (pointpath))
context.beginPath();
pointpath(samplecollection);
context.strokeStyle = "Blue";
context.stroke();
context.restore();
}
};
//apply this to each csvfile
function type(d) {
return {
type: "Feature",
properties: {
name: d.SampleCode,
geotype: d.Geotype,
count: d.PI_count,
size: 5000
},
geometry: {
type: "Point",
coordinates: [+d.Longitude, +d.Latitude]
}
};
}
d3.select(self.frameElement).style("height", height + "px");
</script>
GENERATED_FILES = \
world.json
all: $(GENERATED_FILES)
clean:
rm -rf -- %(GENERATED_FILES)
.PHONY: all clean
build/ne_50m_admin_0_countries.zip:
mkdir -p $(dir $@)
curl -o $@ 'http://www.nacis.org/naturalearth/50m/cultural/$(notdir $@)'
build/ne_50m_admin_0_countries.shp: build/ne_50m_admin_0_countries.zip
unzip -d $(dir $@) $<
touch $@
world.json: build/ne_50m_admin_0_countries.shp sphere.json
node_modules/.bin/topojson \
-q 1e5 \
--projection='width = 960, height = 960, d3.geo.mercator() \
.translate([width / 2, height / 2]) \
.scale((width - 1) / 2 / Math.PI)' \
-- \
countries=build/ne_50m_admin_0_countries.shp \
sphere=sphere.json | \
node_modules/.bin/topojson-merge \
--io countries \
--oo land \
-o $@
{
"name": "anonymous",
"version": "0.0.1",
"private": true,
"dependencies": {
"topojson": "1"
}
}
SampleCode Latitude Longitude Size Geotype
AZ01 33.35806 -111.32721 61730.29929 a
AZ02 33.43775 -111.30519 166147.6412 a
AZ03 34.21755 -109.22896 118075.4937 a
AZ04 34.53717 -110.09396 314878.8177 a
AZ05 34.56431 -110.38235 705157.953 a
AZ06 35.04198 -110.38687 395845.0444 a
AZ07 35.10607 -111.30835 548069.8453 a
AZ08 34.51915 -111.46603 908447.015 a
AZ09 34.44321 -111.47303 786101.567 a
AZ10 34.39214 -111.45026 328140.8969 a
AZ11 34.38891 -111.45797 220013.9831 a
AZ12 34.36824 -111.50876 109339.0167 a
AZ13 34.33726 -111.54618 216857.2687 a
AZ14 34.23854 -112.03839 930399.6721 a
AZ15 34.16685 -112.06871 250517.3247 a
AZ16 33.28233 -111.28156 722120.5044 a
AZ17 33.29682 -111.2785 181173.2445 a
AZ18 33.20114 -111.40992 213780.0541 a
AZ19 33.11833 -111.39158 169320.6548 a
AZ20 33.11647 -111.51023 728513.7554 a
AZ21 33.27089 -111.45057 285363.4632 a
AZ22 33.30591 -111.44886 709788.6403 a
AZ23 33.40036 -111.41787 202284.1225 a
AZ24 31.96724 -111.09028 906009.0013 a
AZ25 31.95468 -110.91076 138432.507 a
AZ26 32.22389 -111.01674 175632.6013 a
AZ27 32.22389 -111.10163 933857.3797 a
AZ28 32.40247 -111.19073 760931.9761 a
AZ29 32.73455 -111.48723 421853.4191 a
AZ31 32.95157 -111.68881 776247.9895 a
AZ32 33.36074 -112.18619 250230.4569 a
AZ33 33.66005 -112.58229 596284.2142 a
NM01 31.78799 -106.681299 199142.9663 a
NM02 32.174912 -106.668377 887850.1704 a
NM03 32.550983 -106.920216 170421.3152 a
NM04 32.897472 -107.311575 50109.49519 b
NM05 33.620577 -107.137356 419880.8765 b
NM06 34.254182 -106.904894 171686.2272 b
NM07 34.351912 -106.881421 883272.0028 b
NM08 34.849193 -106.726914 832018.6754 b
NM09 35.20139 -106.54953 377932.143 b
NM10 35.515806 -106.22414 24283.84469 b
NM11 35.843316 -105.989859 399537.7848 b
NM12 36.208213 -105.960028 128943.6298 b
NM13 36.266537 -105.794279 222245.0913 b
NM14 36.330232 -105.673837 294781.8212 b
NM15 36.319716 -105.610656 560224.9692 b
NM16 36.596725 -105.462796 704384.1645 b
NM17 34.494071 -105.635306 769554.8486 b
NM18 36.535331 -105.708987 841092.5819 b
NM19 36.683192 -105.510598 199189.5669 b
NM20 36.995935 -105.522159 888225.2829 b
NM21 36.356589 -105.607623 105736.9972 b
NE01 41.99573 -72.12707 697916.032 b
NE02 41.99573 -72.12707 125439.0534 b
NE03 41.99573 -72.1268 831551.6471 b
NE04 42.70706 -71.06933 397328.5668 b
NE06 43.67925 -70.2649 259468.8337 b
NE07 43.67925 -70.2649 262030.2608 b
NE08 43.77292 -70.13171 220150.264 b
NE09 43.77292 -70.13171 639114.5837 b
NE10 43.87128 -69.91389 791714.8454 b
NE11 43.71785 -70.0026 547196.3934 b
NE12 44.22283 -69.04369 495090.1301 b
NE13 44.22033 -69.05127 116400.4809 b
NE14 44.42868 -68.9884 69990.5666 b
NE17 44.60818 -67.39812 953311.0728 b
NE18 44.60818 -67.39812 368923.324 b
NE19 44.76442 -67.52693 237621.3878 b
NE20 44.76442 -67.52693 425010.5284 b
NE21 44.81775 -67.31612 813112.3248 b
NE22 44.96294 -68.9067 306912.3669 b
NE23 45.204 -69.37175 401400.651 b
NE24 45.51657 -69.67851 979447.4139 b
NE25 45.65195 -69.74537 806011.171 b
NE26 45.62211 -69.83631 46518.20174 b
NE27 45.62245 -69.8368 993999.2437 b
NE28 45.16833 -69.98354 770287.0019 b
NE29 44.58397 -70.33955 414634.7364 c
NE30 44.49235 -70.64126 740871.0031 c
NE31A 44.34007 -71.21779 527552.995 c
NE31B 44.34007 -71.21779 988640.8447 c
NE31C 44.34007 -71.21779 128798.7849 c
NE31D 44.34007 -71.21779 595789.9773 c
NE31E 44.34007 -71.21779 822601.7713 c
NE31G 44.34007 -71.21779 175551.0644 c
NE31H 44.34007 -71.21779 653278.1495 c
NE31F 44.34007 -71.21779 306885.303 c
NE32 44.0006 -71.2287 188549.5406 c
NE34 43.2996 -71.60166 216414.6718 c
NE35 43.28898 -71.59154 520959.6831 c
AK01 60.181583 -149.639933 40312.65276 c
AK02 60.152383 -149.436067 495859.6336 c
AK03 60.074783 -149.438433 249038.239 c
AK04 60.12105 -149.448 328484.0693 c
AK05 60.356617 -149.349717 145231.5677 c
AK06 60.4119 -149.383583 488960.0257 c
AK07 60.530033 -149.556033 553046.0309 c
AK08 60.530167 -149.5557 940270.442 c
AK09 60.530067 -149.555883 964657.8102 c
AK10 60.530117 -149.555633 464529.0702 c
AK11 60.530117 -149.5559 736687.9253 c
AK12 60.471167 -150.469917 461045.9958 c
AK13 60.471333 -150.46965 449090.3598 c
AK14 60.54205 -150.744117 598502.8177 c
AK15 60.523683 -150.6135 683271.1639 c
AK16 60.5325 -150.398633 147485.1889 c
AK17 60.48575 -150.0759 438498.2835 c
AK18 60.48815 -149.949433 932604.1063 c
AK19 60.646833 -149.464133 414626.8424 c
AK20 60.736667 -149.458 714490.0363 c
AK21 60.7734 -149.225167 353170.2588 c
AK22 60.77305 -149.224333 332643.5159 c
AK23 60.845533 -148.990667 371746.0757 d
AK24 60.845867 -148.991167 167220.5801 d
AK25 62.322467 -150.122017 882316.9329 d
AK26 62.172917 -150.119317 953724.594 d
AK27 62.217833 -150.161817 320452.3146 d
AK28 62.042317 -150.042317 690347.6346 d
AK29 61.92305 -150.07295 259041.8236 d
AK30 61.9227 -150.073467 147976.2561 d
AK31 61.829517 -150.072033 710014.9181 d
AK32 61.7292 -150.0841 133096.7368 d
AK33 61.571067 -149.825367 41219.89087 d
AK34 61.554 -149.81345 566796.1771 d
AK35 61.483483 -149.2524 203553.4166 d
AK36 61.483717 -149.25215 964786.5097 d
AK37 61.408883 -149.134683 228769.3882 d
AK38 61.409017 -149.134883 425196.5891 d
AK39 61.411 -149.148167 51459.88669 d
AK40 61.2463 -149.5368 323367.1246 d
AK41 61.243583 -149.539833 639302.6832 d
AK42 61.2362 -149.609667 828490.7715 d
AK43 61.232267 -149.667117 424763.6739 d
AK44 61.2026 -150.021233 372986.1704 d
AK45 61.201833 -150.022017 325238.8464 d
AK46 61.2026 -150.021233 533059.8124 d
AK47 61.143 -150.023 485929.517 d
AK48 61.142667 -150.02195 493636.6063 d
AK49 61.1444 -150.016817 215738.6182 d
AK50 61.143283 -149.796133 413059.236 d
AK51 61.02995 -149.76185 400383.5073 d
AK52 61.03065 -149.762417 864506.1146 d
AU01 -37.6798 145.7934 856314.1924 d
AZ50 31.897623 -106.574 865832.422 d
AZ51 32.360097 -107.033 158057.9253 d
AZ52 32.229806 -108.083212 292822.6116 d
AZ53 32.191466 -109.923798 319429.0244 d
AZ54 32.04112 -110.0908 254964.7428 d
AZ55 32.012737 -110.695 219940.1805 d
AZ56 32.155281 -110.734281 114655.0511 d
AZ57 32.423868 -111.02763 911763.729 d
AZ58 33.726593 -112.00487 752653.5094 d
AZ59 33.698688 -111.951108 832517.2099 d
BR13617 9.7382 -83.3456 352242.7319 d
BM01 9.7382 -83.3456 397209.4039 d
CH01 40.8392 111.39 786375.5748 d
CH02 31.442 120.703 789323.7461 d
CH03 30.305 120.085167 960030.5956 d
CH04 31.5901 120.2518 666443.6622 d
CH05 32.15 118.95 89371.55915 d
CH06 35.221567 113.168067 696047.2708 d
CH07 32.073233 118.558817 782394.4254 d
CH08 32.0481 118.6002 260919.3444 d
CR01 9.5792 -83.898 12994.38049 d
CR02 10.6798 -83.79978 759844.404 d
CR03 9.3333 -83.22345 189342.1889 d
CR04 9.3333 -83.5555 958945.7533 d
DA01 32.6789 -96.8899 544346.635 d
DA02 32.78 -96.78 618561.4442 d
DA03 32.9999 -96.67789 902153.9156 d
DR01 19.809 -70.721167 976414.6568 d
DR02 19.816667 -70.721667 13222.08139 d
DR03 19.743333 -70.721 208172.9283 d
DR04 19.826667 -70.7255 9602.632333 d
DR05 19.831667 -70.725167 112975.9852 d
DR06 19.82 -70.723333 661074.4758 d
DR07 19.8185 -70.723167 304603.7406 d
DR08 19.818333 -70.723667 397461.3818 d
EC01 -2.79069 -78.767777 401554.5899 d
EC02 -2.79069 -78.767777 194086.4542 d
FL01 24.656813 -81.515831 269271.7449 d
FL02 24.7297825 -81.001268 284045.6142 d
HI01 21.294983 -157.660633 310490.3694 d
HI02 21.39065 -157.748233 628889.5973 d
HI03 21.682717 -157.953017 456367.6853 d
HI04 21.411583 -157.7862 39041.5595 d
HI05 21.3609 -157.805817 505462.2142 d
HI06 21.57655 -158.269867 208141.6952 d
HI07 21.407983 -157.824733 367754.3325 d
HI08 21.571867 -158.107533 100695.0778 d
HI09 21.5713 -158.2102 936845.3889 d
HI10 21.57565 -158.2699 168564.2451 d
HS01 34.51897 -105.87574 615366.3554 d
HS02 34.51897 -105.87574 532819.6095 d
HS03 34.518974 -105.87574 1962.616138 d
HS04 33.130046 -107.253058 275588.2532 d
HS05 35.777038 -106.690741 225969.1471 d
HS06 35.849327 -106.699868 977339.838 d
HS07 34.518974 -105.87574 930283.7948 d
IN01 17.65535 78.723967 86140.60529 d
IN02 14.212133 76.410083 91296.15571 d
IN03 29.056074 77.354816 697601.4895 d
IN04 29.054431 77.345001 975021.2182 d
NC01 35.234 -77.5643 659811.558 d
NC02 35.1894 -77.567 893323.5108 d
NJ01 39.8721 -75.111 273162.2288 d
NY01 41.79287 -74.33073 243817.2419 d
NY02 41.79189 -74.30701 925309.0091 d
NY03 41.7476 -74.26419 908083.4838 e
NY04 41.73763 -74.22292 929830.3234 e
NY05 41.73562 -74.19284 130022.945 e
NY06 41.74558 -74.12951 44595.61616 e
NY07 41.75281 -74.09241 145537.7268 e
NY08 40.7501 -72.084733 825957.581 e
OR01 45.569833 -121.306667 627134.1486 e
OR02 45.5695 -121.875167 985972.4752 e
OR03 45.5525 -121.845833 998542.5681 e
OR04 45.725333 -122.413667 352885.5483 e
OR05 45.742667 -122.362 44098.90162 e
OR07 45.7425 -122.343333 507028.3689 e
OR08 45.686667 -120.607167 571346.0257 e
OR09 45.59 -120.8295 960156.3531 e
OR10 45.658667 -119.16 837346.2928 e
OR11 45.841667 -118.307 541306.3653 e
OR12 45.7525 -118.798167 835091.8451 e
OR13 45.935667 -118.480333 855865.8401 e
OR14 45.94 -118.393833 110094.4871 e
OR15 45.7535 -119.393167 369528.791 e
OR16 45.6885 -119.194667 117273.6327 e
OR17 45.485805 -120.780333 421812.2086 e
OR18 45.541333 -121.441 826815.9494 e
OR19 45.542667 -120.442333 992111.6814 e
OR20 45.507333 -121.39 981136.4138 e
OR21 45.507333 -121.411167 435404.4249 e
OR22 45.507333 -122.045167 817218.4372 e
OR23 45.506833 -121.059333 111408.5858 e
OR24 45.555667 -120.761167 318038.8856 e
OR25 45.555667 -120.761167 890168.0423 e
OR27 45.555667 -120.761167 294499.6132 e
OR28 45.555667 -120.761167 289701.1699 e
OR31 45.555667 -120.761167 922563.9003 e
OR36 45.555667 -120.761167 917394.0314 e
OR41 45.555667 -120.761167 543826.7105 e
PA01 40.345 -75.8372 78079.87811 e
SA02 -29.875241 30.964849 796607.5476 e
SA03 -29.872257 30.97226 680560.6341 e
SA04 -29.88279 30.991871 652605.0725 e
SA05 -29.830012 31.022862 965620.1705 e
SA06 -29.816958 30.941728 428832.5593 e
SA07 -29.5434 30.5535 995606.7855 e
SA08 -29.738887 30.604118 277689.0192 e
SA09 -29.715141 30.501165 473168.5126 e
SA10 -29.734208 30.60539 483224.3062 e
TZ05 -2.45 34.678 539273.8156 e
TZ06 -2.56 34.5667 948037.1541 e
TZ09 -2.23 34.432 626305.4382 e
TZ12 -2.34 34.532 924257.8683 e
BR01 -21.6107 -47.6307 947268.915 e
BR02 -21.643833 -47.644667 502833.1999 e
BR03 -21.6487 -47.6396 41724.81084 e
BR04 -21.648767 -47.639933 806358.3861 e
BR05 -21.692417 -47.60855 348591.1837 e
BR06 -21.694083 -47.615533 461740.6556 e
BR07 -21.73895 -47.6594 178621.4828 e
BR08 -21.72755 -47.649933 793796.4877 e
BR09 -21.730167 -47.612883 994475.5787 e
BR10 -21.726917 -47.611 222158.4534 e
BR11 -21.7225 -47.596717 599478.5655 e
BR12 -21.728733 -47.583833 844766.3562 e
BR13 -22.965167 -42.001 529188.1302 e
BR14 -22.9705 -42.032833 3483.318856 e
BR15 -22.984833 -41.990833 760690.6066 e
BR16 -22.960833 -42.004 391838.7514 e
BR17 -22.9681 -41.9942 301128.9918 e
BR18 -22.980617 -41.983967 27448.61557 e
BR19 -18.290983 -49.2583 935134.1755 e
BR20 -18.290983 -49.2583 920364.9851 e
BR21 -18.290983 -49.2583 908495.2576 e
BR22 -22.92075 -42.038167 335427.9341 e
BR23 -22.820567 -42.153833 574773.0418 e
BR24 -22.9418 -42.041833 354410.3364 e
BR25 -22.726083 -41.966833 931354.2182 e
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment