Create compelling data visualizations by mapping with the D3 library

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.

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.

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.

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.

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.