Skip to content

Instantly share code, notes, and snippets.

View markmarkoh's full-sized avatar

Mark DiMarco markmarkoh

258 followers · 3 following
View GitHub Profile
@markmarkoh
markmarkoh / README.md
Last active June 10, 2018 08:51
Custom Map Data in Datamaps
@markmarkoh
markmarkoh / README.md
Last active August 29, 2015 13:56
Texas vs the North East

If my hometown in Montgomery, New York were to overlay my current location in Austin, Texas.

Experimenting with qGIS, ogr2ogr and TopoJSON.

@markmarkoh
markmarkoh / arcs.js
Created February 4, 2014 18:52
Add Arcs in a timed fashion
var arcs = new Datamap({
scope: 'world',
element: document.getElementById('arcs'),
projection: 'mercator',
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
if ( data )
return '<div class="hoverinfo" style="max-width: 300px;"><strong>' + geography.properties.name + '</strong> <br />' + data.desc + ' </div>'
@markmarkoh
markmarkoh / README.md
Last active March 23, 2017 03:21
Datamaps with custom map data

This example uses custom map data that includes counties in the state of New York. Custom map data is specified with geographyConfig.dataUrl, which will attempt to make d3.json request to that URL.

In this example, counties are referred to by their FIPs code.

The data was converted from a .SHP file to TopoJSON, instructions to do that here

More DataMaps examples here

@markmarkoh
markmarkoh / index.html
Last active May 15, 2019 23:48 — forked from mbostock/.block
Animated line graph ( curtain approach )
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
path.line {
@markmarkoh
markmarkoh / paths.js
Created January 27, 2014 21:35
Specifying arcs with different colors in Datamaps.js
var paths = [
{
"origin":{"latitude":42.350939,"longitude":-71.05229},
"destination":{"latitude":35.466872,"longitude":139.622747},
"options": {"strokeWidth": 2, "strokeColor": "rgba(0,0,255,0.33)"}
},
{
"origin":{"latitude":42.350939,"longitude":-71.05229},
"destination":{"latitude":39.908617,"longitude":19.581969},
"options": {"strokeWidth": 1, "strokeColor": "rgba(0,0,255,0.33)"}
@markmarkoh
markmarkoh / gist:7604037
Created November 22, 2013 17:50
Making slow DOM based operations faster
//slow on a large enough collection ( > ~50 )
var self = this;
collectionData.each(function(model) {
self.$el.append( model.get("name") );
});
//to make it fast again, you can create an element in memory and operate on that
var $inMemoryjQueryElement = $("<div/>");
collectionData.each(function(model) {
$inMemoryjQueryElement.append( model.get("name") );
@markmarkoh
markmarkoh / index.html
Last active December 24, 2015 03:19 — forked from ramnathv/index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
<script src='http://d3js.org/topojson.v1.min.js' type='text/javascript'></script>
<script src='http://datamaps.github.io/scripts/datamaps.all.min.js' type='text/javascript'></script>
<style>
@markmarkoh
markmarkoh / code.R
Last active December 24, 2015 03:09 — forked from ramnathv/code.R
# read data and replace dots in names with underscores
obesity = read.csv(
'http://www.stat.berkeley.edu/classes/s133/data/obesity.csv',
stringsAsFactors = F
)
names(obesity) = gsub("\\.", "_", names(obesity))
# add column with two letter state names and
obesity = plyr::mutate(obesity,
State = str_trim(State),
@markmarkoh
markmarkoh / arcs.js
Last active December 19, 2015 09:09
var election = new Datamap({
scope: 'world',
element: document.getElementById('arcs'),
projection: 'mercator'
});
var presidentialTrips = [
{
origin: {