This is an attempt at a slightly D3-ish way of drawing a dot density map on a canvas element. In short, each polygon is drawn (invisibly) with a unique color, then random points are thrown at polygon bounding boxes and the pixel color is used for a point-in-polygon test. This example draws one dot for every 2 people in central Boston census blocks, for a total of approximately 132,000 dots.
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
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" | |
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" | |
crossorigin=""/> | |
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" | |
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" | |
crossorigin=""></script> | |
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> |
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
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<style> | |
#map{ height: 100% } | |
</style> | |
</head> | |
<body> |
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
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<style> | |
#map{ width: 900px; height: 500px; } | |
</style> | |
</head> | |
<body> |
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
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
<style> | |
#map{ height: 100% } | |
</style> | |
</head> |
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
.marker-cluster-small { | |
background-color: rgba(181, 226, 140, 0.6); | |
} | |
.marker-cluster-small div { | |
background-color: rgba(110, 204, 57, 0.6); | |
} | |
.marker-cluster-medium { | |
background-color: rgba(241, 211, 87, 0.6); | |
} |
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> | |
<html> | |
<head> | |
<style type="text/css"> | |
#states path { | |
fill: none; | |
} | |
</style> |
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
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
<style> | |
#map{ height: 100% } | |
</style> | |
</head> |
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
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title></title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } |
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
fid | OBJECTID | Name | Acres | Neighborho | SqMiles | Shape_STAr | Shape_STLe | HISTO_0 | HISTO_1 | HISTO_2 | HISTO_3 | HISTO_4 | HISTO_5 | HISTO_6 | HISTO_7 | HISTO_8 | HISTO_9 | HISTO_10 | HISTO_11 | HISTO_12 | HISTO_13 | HISTO_14 | HISTO_15 | HISTO_16 | HISTO_17 | HISTO_18 | HISTO_19 | HISTO_20 | HISTO_21 | HISTO_22 | HISTO_23 | HISTO_24 | HISTO_25 | HISTO_26 | HISTO_27 | HISTO_28 | HISTO_29 | HISTO_30 | HISTO_31 | HISTO_32 | HISTO_33 | HISTO_34 | HISTO_35 | HISTO_36 | HISTO_37 | HISTO_38 | HISTO_39 | HISTO_40 | HISTO_41 | HISTO_42 | HISTO_43 | HISTO_44 | HISTO_45 | HISTO_46 | HISTO_47 | HISTO_48 | HISTO_49 | HISTO_50 | HISTO_51 | HISTO_52 | HISTO_53 | HISTO_54 | HISTO_55 | HISTO_56 | HISTO_57 | HISTO_58 | HISTO_59 | HISTO_60 | HISTO_61 | HISTO_62 | HISTO_63 | HISTO_64 | HISTO_65 | HISTO_66 | HISTO_67 | HISTO_68 | HISTO_69 | HISTO_70 | HISTO_71 | HISTO_72 | HISTO_73 | HISTO_74 | HISTO_75 | HISTO_76 | HISTO_77 | HISTO_78 | HISTO_79 | HISTO_80 | HISTO_81 | HISTO_82 | HISTO_83 | HISTO_84 | HISTO_85 | HISTO_86 | HISTO_87 | HISTO_88 | HISTO_89 | HISTO_90 | HISTO_91 | HISTO_92 | HISTO_93 | HISTO_94 | HISTO_95 | HISTO_96 | HISTO_97 | HISTO_98 | HISTO_99 | HISTO_100 | HISTO_101 | HISTO_102 | HISTO_103 | HISTO_104 | HISTO_105 | HISTO_106 |
---|
NewerOlder