Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Basic US State Map - D3
years place lat lon
2 New York City 40.71455 -74.007124
6 San Francisco 37.7771187 -122.4196396
8 Santa Cruz 36.9740181 -122.0309525
3 Santa Barbara 34.4193802 -119.6990509
10 Tucson 32.22155 -110.9697571
1 Washington DC 38.8903694 -77.0319595
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<script src=""></script>
<style type="text/css">
/* On mouse hover, lighten state color */
path:hover {
fill-opacity: .7;
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
/* Legend Font Style */
body {
font: 11px sans-serif;
/* Legend Position Style */
.legend {
<script type="text/javascript">
/* This visualization was made possible by modifying code provided by:
Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
Malcolm Maclean, tooltips example tutorial
Mike Bostock, Pie Chart Legend */
//Width and height of map
var width = 960;
var height = 500;
// D3 Projection
var projection = d3.geo.albersUsa()
.translate([width/2, height/2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Define linear scale for output
var color = d3.scale.linear()
var legendText = ["Cities Lived", "States Lived", "States Visited", "Nada"];
//Create SVG element and append map to the SVG
var svg ="body")
.attr("width", width)
.attr("height", height);
// Append Div for tooltip to SVG
var div ="body")
.attr("class", "tooltip")
.style("opacity", 0);
// Load in my states data!
d3.csv("stateslived.csv", function(data) {
color.domain([0,1,2,3]); // setting the range of the input data
// Load GeoJSON data and merge with states data
d3.json("us-states.json", function(json) {
// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
// Grab State Name
var dataState = data[i].state;
// Grab data value
var dataValue = data[i].visited;
// Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j];
if (dataState == jsonState) {
// Copy the data value into the JSON
json.features[j].properties.visited = dataValue;
// Stop looking through the JSON
// Bind the data to the SVG and create one path per GeoJSON feature
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1")
.style("fill", function(d) {
// Get data value
var value =;
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "rgb(213,222,217)";
// Map the cities I have lived in!
d3.csv("cities-lived.csv", function(data) {
.attr("cx", function(d) {
return projection([d.lon,])[0];
.attr("cy", function(d) {
return projection([d.lon,])[1];
.attr("r", function(d) {
return Math.sqrt(d.years) * 4;
.style("fill", "rgb(217,91,67)")
.style("opacity", 0.85)
// Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks"
.on("mouseover", function(d) {
.style("opacity", .9);
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
// fade out tooltip on mouse out
.on("mouseout", function(d) {
.style("opacity", 0);
// Modified Legend Code from Mike Bostock:
var legend ="body").append("svg")
.attr("class", "legend")
.attr("width", 140)
.attr("height", 200)
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d; });
state visited
Alabama 0
Alaska 0
Arkansas 0
Arizona 2
California 2
Colorado 1
Connecticut 1
Delaware 0
Florida 0
Georgia 0
Hawaii 0
Iowa 0
Idaho 1
Illinois 1
Indiana 0
Kansas 0
Kentucky 0
Louisiana 0
Maine 1
Maryland 1
Massachusetts 1
Michigan 0
Minnesota 1
Missouri 0
Mississippi 0
Montana 1
North Carolina 0
North Dakota 0
Nebraska 0
New Hampshire 1
New Jersey 0
New Mexico 1
Nevada 1
New York 2
Ohio 1
Oklahoma 0
Oregon 1
Pennsylvania 1
Rhode Island 1
South Carolina 0
South Dakota 0
Tennessee 0
Texas 0
Utah 1
Virginia 0
Vermont 0
Washington 1
Wisconsin 0
West Virginia 0
Wyoming 1
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Copy link

georgesb commented May 2, 2020

@michellechandra Thank you for this beautiful D3 example! Would it be okay to modify and re-use as an example for high school students? I mostly work with p5.js, but this would be a lovely intro into D3.
ps Just saw your website. I'm a huge Susan Sontag fan. We both went to North Hollywood High. Huge fan of Dan Shiffman of NYU as well.

Copy link

michellechandra commented May 2, 2020

@georgesb - sure, no problem! very cool you went to high school with Susan Sontag!

Copy link

georgesb commented May 2, 2020

Thank you, Michelle! I’ll enjoy learning some D3 with your project! I’m a bit younger than Susan Sontag. 20 years to be exact. She would be 87 now if she were alive. So I never actually met her, but I got into reading her when I was quite young and it was exciting to learn later that she and I had attended the same high school. I'm a semi-retired LAUSD educator and I like to bring in literature and the arts in my CS classes. My website: Thanks again!

Copy link

deepsweech commented Sep 13, 2022

This is awesome! I was doing a POC on US maps charts and came across your code. I am using ReactJS in AWS-Amplify and some d3 functions are either renamed/moved or not applicable. Managed to get it working, thanks for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment