Tag Archives: javascript

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.