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.

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.