Skip to main content

Maps with D3js

This example shows how to setup map using D3.js and topojson. See the completed example here.

Alternately you can use the geojson provided by CitySDK for smaller queries. View a quick example in the additional notes below

Example of a map using D3.js

to add…

Additional Notes

Using GeoJSON


//setup width, height, and svg
const width = 800,
  height = 600;
const map = d3
  .attr("width", width)
  .attr("height", height);

const projection = d3
  .translate([width / 2, height / 2]);
const path = d3.geoPath(projection);

//call data
  vintage: 2017,
  geoHierarchy: {
    county: "*"
  sourcePath: ["acs", "acs5"],
  values: ["B17001_001E", "B17001_002E"],
  geoResolution: "20m"
}).then(data => {
  //generate color scale
  const extent = d3.extent(
      d =>["B17001_002E"] /["B17001_001E"]
  const colorScale = d3

  //generate map
    .attr("d", path)
    .attr("fill", d => {
      return colorScale(["B17001_002E"] /["B17001_001E"]