Four Kitchens
Insights

Create compelling data visualizations by mapping with the D3 library

4 Min. ReadDevelopment

Nonprofits and higher education institutions thrive on data. Whether you’re tracking donor records from around the country or enrollment application trends from the surrounding region, complex information guides your organization

But no matter whether you’re compiling data for the public or internal stakeholders, you need more than numbers to tell an engaging story. Charts, maps, and other data visualization tools enable your organization to connect with any audience in a clear and persuasive way. And, with the flexibility of Drupal, you have a multitude of libraries at your disposal to create whatever data visualization needed to transform data into a compelling graphic

When you require your website to clearly display complex information, the D3 module provides a flexible assortment of options. Specifically, the D3-geo aspect enables your developers to render interactive maps for any geographic area

Most current examples of how to create a map in D3 have grown out of date as the library has evolved. Here, we’d like to offer an example of how to best take advantage of its capabilities to make sure your organization has the resources to communicate with any audience.

Data visualizations enhance the user experience

Effective use of visualizations in place of hard data enables technical and non-technical audiences to understand information on an equal level. But it also improves the usability of a digital experience

A web page that’s overfilled with data isn’t just difficult to understand; it also fails to capture the attention of your user. When you’re trying to engage your audience with critical information, they’ll often keep scrolling rather than try to draw conclusions from a page crowded with numbers

Conversely, when you organize your data into charts, graphics, and maps, you capture your user’s attention that much faster. Identify trends quickly along with high and low points that break with expected results. Plus, with the addition of interactivity, users become active participants in the story your organization is working to tell.

How the D3 library accelerates data visualizations

D3 allows your organization to create data-driven documents. As a JavaScript library, D3 capitalizes on the functionality of modern browsers without limiting you to a single development framework. D3 is flexible enough to support web standards of HTML, SVG, and CSS

D3 enables you to form a connection between your data source and a Document Object Model (DOM). DOM is a programming API that manages data into HTML or XML documents. From there, the D3 library allows you to apply specific modules to transform large datasets into visualizations that incorporate user interaction and animation.

Choosing the right visualization to suit your data is critical

Visualizations are compelling, but they can be misleading by incorporating biases or inaccuracies in data. Or, the wrong visualization will skew the results of your data by highlighting questionable conclusions or missing valuable messages in translation

Choosing the right visualization to suit your data is crucial. Visualizations typically serve one of three goals for organizations like yours:

  • Explore: By entering specific details, users apply visualizations to generate insights. For example, this map by the Council of Nonprofits displays the organization’s members when users choose a state.
  • Monitor: Performance-specific visualizations such as dashboards transform time-sensitive data into results that should trigger specific actions in the user.
  • Explain: Incorporate key details about a topic to illustrate trends and conclusions. The Social Progress Imperative uses a world map to display global and regional trends among countries reaching the organization’s benchmarks for progress.

Fully understanding your data is crucial to choosing the right visualization. For example, if your data has changed over the years, your modules should incorporate a timeline to make sure those trends are reflected accurately.

Building a map using the D3-geo module in D3

D3 map creation

The D3-geo module enables your team to create maps and render graphic information to create interactive data visualizations. D3 creates maps by consuming specific GeoJSON files, which then render to SVG or HTML5 Canvas. The right format for your organization will depend on the information you need to display

Map creation in D3 is fueled by three core concepts:

  • GeoJSON: Lightweight and easy to process, this data format includes points, polygons, and other attributes to render geographic data.
  • Projections: Functions that convert latitude and longitude data to x and y coordinates.
  • Geographic Path Generators: Functions that convert GeoJSON graphics into SVG or Canvas paths.
import { geoAlbersUsa, geoPath } from "d3-geo";
import { selection } from d3-selection;
import { feature } from "topojson-client";

const projection = geoAlbersUsa();

const path = geoPath().projection(projection);

const geojsonApiUrl = json(`../static/states-10m.json`);

const svg = select("#map-wrapper")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`);

svg.selectAll(".map__state")
  .data(feature(geojson, geojson.objects.states).features)
  .enter()
  .filter((d) => postalCodes.find((state) => state.val === d.id))
  .append("g")
  .attr("class", (d) => regionsThatHasDataFile(d.id))
  .attr("id", (d) => `state-${d.id}`)
  .insert("path")
  .attr("d", path);

D3 handles much of the details of rendering GeoJSON data. As a result, your developers only need a basic understanding of the format to begin mapping data visualizations. Here’s a GitHub repository with an example that explains the above code better.

Mapping data opens new possibilities for your organization

Incorporating maps into your data visualizations provides the missing link for organizations needing to illustrate information for a specific region. Whether you need to map trends across specific counties or the entire world, D3 provides the capabilities you need in a way that’s fast and flexible

Every industry has grown more data-driven, and applications for “Big Data” tools such as machine learning have grown more common. Your ability to tell compelling stories with information is crucial. Fortunately, with the right tools, your organization can communicate vital information with users and stakeholders in a more immediate way.