Tag Archives: SVG

Map Club — WORKSHOP (Part II) — Introduction to Mapping in D3.js


In its final session of the semester, Map Club embarked upon the second half of a two-part workshop focused on D3.js, a JavaScript library for manipulating documents based on data. This time, participants focused on learning how to render a simple SVG map in the browser, which could serve as the basis for visualizing custom values.

Beginning with a CSV file containing the locations of art galleries within New York City, as well as a GeoJSON file encoding the boundaries of the five boroughs, the workshop guided participants through the process of visualizing the locations of the galleries in the form of a basic dot map.





From top: a dot map visualizing the locations of art galleries in NYC, a snippet of GeoJSON data, the D3.js Mercator projection, the locations of LinkNYC wifi portals by Daniel Chi Cook

Thank you to everyone who participated in Map Club this fall! Until next time, best of luck in your geospatial endeavors.

Sign up here if you would like to receive updates on future Map Club sessions. For this session’s resources and materials, visit the Map Club Github repository.

Map Club — Cartogram Hexmaps with Tilegrams


The latest session of Map Club took a data journalism bent: last Friday, we focused on creating cartogram hexmaps with Tilegrams, a generator by data visualization studio Pitch Interactive. The tool enables users to quickly create proportionate hex-based maps of the United States using custom or built-in data, and export generated maps to both SVG and topojson.

Tilegrams provides intricate functionality for tweaking state proportions to be statistically accurate, and is relatively versatile in its export capabilities. It did have a tendency to lose state labels and borders in its SVG output, providing a less-than-detailed file for download than the browser would reflect. Participants nonetheless created a range of interesting images, uploading Tilegrams topojson data to the geojson.io interface (a tool that Map Club explored in a session from earlier this semester), downloading and visualizing data from the U.S. Census (2010), and editing and rendering a custom CSV file in the data upload window.




From top: population count Tilegrams topojson file imported into geojson.io by Ruoran Lin, urban populations by state (US Census 2010) by Daniel Chi Cook, population counts per state (working)

Next week, for its penultimate session, our meeting will be a guided workshop focused on a general introduction to the D3.js JavaScript library. Part II of the D3.js workshop, focused specifically on geovisualization, will take place after Thanksgiving. Hope to see you there!

Map Club has a mailing list! Sign up here if you would like to receive updates on future sessions. For this session’s resources and materials, visit the Map Club Github repository.

Map Club, Session 02 — SVG Maps with Kartograph


This week, Map Club embarked upon its second session by experimenting with Kartograph, a lightweight framework for building interactive map applications without an external mapping service. Kartograph is comprised of two libraries: the first is a Python library, Kartograph.py, which generates compact, Illustrator-friendly SVG maps from shapefiles and PostGIS; the second, Kartograph.js, is a JavaScript library for creating interactive SVG maps based on Kartography.py SVG maps.

After installing the framework and its dependencies, attendees experimented with Kartograph.py to transform shapefiles into web-ready SVG maps. Jingying accessed NYC OpenData to generate a static map of galleries in New York City:


Natural Earth provided a map of the European railway system to refine in Adobe Illustrator:


Next week, we’ll take a more workshop-like approach to learning QGIS, a free and open source geographic information system. See you then!

For this session’s resources and materials, visit the Map Club Github repository.