Tag Archives: d3

Create interactive SVG maps in React with react-simple-maps

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson.

react-simple-maps →

Whilst looking further I’ve stumbled upon these two Medium posts detailing an implementation:

D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information.

D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser.

D3 in Depth: Rendering Geographic Information →

Textures.js – SVG patterns for Data Visualization

texturesjs

Textures are useful for the selective perception of different categories

var svg = d3.select("#example")
  .append("svg");

var t = textures.lines()
  .thicker();

svg.call(t);

svg.append("circle")
  .style("fill", t.url());

A multitude of predefined styles is available. It’s also possible to define your own styles.

Textures.js →

dimple – A simple charting API for d3 data visualisations

dimple

The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.

dimple →
dimple Examples →

U.S. Midterm Elections 2014 Maps

midterm-elections-2014

Why are we so confident these are the most detailed maps you’ll ever see from the 2014 Senate elections? Precincts are the smallest level of geography for publicly-reported election results. There were more than 175,000 precincts in the United States in 2012, fifty times the number of counties. The maps here show precinct-level results, where available, from some of the closest Senate races.

Yes, those are zoomable. Built using D3.js and TopoJSON by @mbostock himself.

The Most Detailed Maps You’ll See From the Midterm Elections →

New to D3 and TopoJSON? Check out Let’s Make a Map to get you started.

MetricsGraphics.js

metricsgraphics

MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive way. The library currently supports line charts, scatterplots and histograms as well as features like rug plots and basic linear regression.

MetricsGraphics.js →