Skip to content

Instantly share code, notes, and snippets.

View pnavarrc's full-sized avatar

Pablo Navarro pnavarrc

  • Act Now Coalition
  • Vancouver, Canada
  • 15:59 (UTC -07:00)
View GitHub Profile
We couldn’t find that file to show.
@pnavarrc
pnavarrc / Makefile
Last active August 29, 2015 13:57
D3 Orthographic Projection with TopoJSON
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/physical/ne_50m_land.zip
ne_50m_land.zip:
curl -LO $(URL)
ne_50m_land.shp: ne_50m_land.zip
unzip ne_50m_land.zip
touch ne_50m_land.shp
land.json: ne_50m_land.shp
@pnavarrc
pnavarrc / README.md
Last active August 29, 2015 14:05
Responsive SVG Image

Responsive SVG Image

This gist shows how to include an SVG image that adapts to the size of its container.

Whale

For this technique to work, the SVG element should have the attribute viewBox set with the image dimensions, and the attribute preserveAspectRatio="xMinYMin meet", and it shouldn't have the attributes width and height.

The container should have a width defined, as a percent or as a size in pixels.

Inserting SVG in the DOM

Inserting SVG images as DOM nodes instead of inserting them as images or objects. In this example, we load an image stored as JST templates and insert the image into the DOM, allowing to modify its style via CSS and its attributes with JavaScript.

In this gist, we change the whale color and make it move using D3.

Whale

References

@pnavarrc
pnavarrc / Makefile
Created September 8, 2014 15:41
Automatic Scaling Features with D3
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip
ne_50m_admin_0_countries.zip:
curl -LO $(URL)
ne_50m_admin_0_countries.shp: ne_50m_admin_0_countries.zip
unzip ne_50m_admin_0_countries.zip
touch ne_50m_admin_0_countries.shp
countries.json: ne_50m_admin_0_countries.shp
@pnavarrc
pnavarrc / Makefile
Created September 19, 2015 20:50
Maps with TopoJSON
# Download and Transform the 1:50m Country Shapefiles from Natural Earth
# http://www.naturalearthdata.com/downloads/110m-physical-vectors/
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip
# Download the zip file from the Natural Earth server
ne_110m_land.zip:
curl -LO $(URL)
# Unzip the shapefiles
@pnavarrc
pnavarrc / Makefile
Last active September 19, 2015 21:52
Orthographic Projection
# Download and Transform the 1:50m Country Shapefiles from Natural Earth
# http://www.naturalearthdata.com/downloads/110m-physical-vectors/
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip
# Download the zip file from the Natural Earth server
ne_110m_land.zip:
curl -LO $(URL)
# Unzip the shapefiles
@pnavarrc
pnavarrc / Makefile
Last active September 21, 2015 19:20
Inverse Projection
# Download and Transform the 1:50m Country Shapefiles from Natural Earth
# http://www.naturalearthdata.com/downloads/110m-physical-vectors/
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip
# Download the zip file from the Natural Earth server
ne_110m_land.zip:
curl -LO $(URL)
# Unzip the shapefiles
@pnavarrc
pnavarrc / Makefile
Created September 21, 2015 23:58
Map Zoom and Rotate
# Download and Transform the 1:50m Country Shapefiles from Natural Earth
# http://www.naturalearthdata.com/downloads/50m-cultural-vectors/
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip
# Download the zip file from the Natural Earth server
ne_50m_admin_0_countries.zip:
curl -LO $(URL)
# Unzip the shapefiles
@pnavarrc
pnavarrc / index.html
Created September 22, 2015 01:31
Mapping with canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom and Rotating (Reprojecting)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>