Tag Archives: d3

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

20160901_banner_fall_v1

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.

01

02

04

daniel_01

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 — WORKSHOP (Part I) — D3.js

20160901_banner_fall_v1

In its second to last session, Map Club took on the first part of a guided introduction to D3.js. D3.js is a JavaScript library for manipulating documents based on data. This workshop, focusing on the general setup and visualization capabilities of the library, led participants through the basics of SVG, data types, and generating simple shapes from custom arrays.

At root, complex visualizations are comprised of basic elements. Jacques Bertin’s six retinal properties describe the different visual attributes one can use to differentiate between data-driven shapes. With some help from the MDN SVG element reference, attendees learned how to apply graphic styles to SVG primitives in the browser, achieving Bertin’s vision with a few lines of code.

bertin

01

chart

From top: Jacques Bertin’s six retinal properties, a series of colorful circles from a workshop example, a stacked bar chart generated using D3.js

Map Club will meet for its final session of the semester on the afternoon of December 2nd. We will walk through basic geovisualization capabilities in D3.js, building upon the knowledge introduced in this workshop. Hope to see you there!

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, Session 05 — Geographic Projections in D3.js

20160712_Banner_v1

In its fifth and final summer session, Map Club delved into the geographic projection capabilities of D3.js, a JavaScript library for manipulating documents based on data. D3 supports a comprehensive range of both common and unusual projections, further augmented by the most recent 4.0 release. Attendees sought to become familiar with the syntax for rendering JSON data in the browser, to add interactivity and data-driven attributes to different geographic regions, and to explore some of the less common projections offered by the library.

Tricia used the Albers Equal-Area Conic projection to render outlines of U.S. states and counties, while Emily aligned Gnomonic, Orthographic, and Stereographic projections in an interactive sphere:

Tricia

Rotation

Paul Ronga created an impressive interactive map visualizing Swiss census data (view the full version here):

Paul

For this session’s resources and materials, visit the Map Club Github repository. And that’s a wrap! Thanks for a great summer series, everyone!

Mapping Voting Rights Act Section Five Locations

This summer, a couple of us in the DSSC have decided to sit down and learn Leaflet & D3. We'll post some of the maps we make in the blog throughout the summer.

I'm grateful to Peter Leonard, the Librarian for Digital Humanities Research at Yale for getting me started on Leaflet at the NYPL Maps Hack 2013 organized by NYPL Labs.

As an exercise, I decided to map out the places no longer covered by the recent Supreme Court decision (PDF) on section four of the Voting Rights Act.

I took the tables on the Dept of Justice section 5 covered jurisdictions page, joined them together with boundaries from the US Census Bureau's TIGER/Line, simplified the shapefiles in QGIS (removed several fields too), exported to GeoJSON and brought the layers into Leaflet.

The map is sitting at a temp location until the bugs get worked out and we can include the maps in CU Spatial blog posts.

As you can see, it's fairly straight forward and includes some modified (simplified?) code from tutorials on the Leaflet site. The color choices came from ColorBrewer.

One thing I think would improve the map a bit would be to be able to click on the word 'townships' in the legend and have it automatically zoom to Michigan since at the starting scale, both townships are difficult to see (same with the three NYC counties).

Eventually, I'll redo this map in D3 because it'll allow me to use a projection better suited for North America.

Eventually we'll put the data into the Spatial Data Catalog, but for now I'm including a link to zip file containing both the shapefiles & geojson layers without proper metadata and a "use at your own risk" disclaimer. If you use it and find any mistakes, please let us know!