US State Map in TopoJSON, rendered with D3.js
Forked from Tomomi Imura (@girlie_mac)'s Pen Left my heart in San Francisco.
A Pen by Carl V Lewis on CodePen.
<h1>I left my heart in <a href="http://visitsavannah.com">37°47′N 122°25′W</a></h1> | |
<h2>US States in TopoJSON · Rendered in SVG with D3.js · just for fun by @carlvlewis*</h2> | |
<section id="map" class="map"></section> | |
<h5>*Forked and customized from @girlie_mac</h5> |
US State Map in TopoJSON, rendered with D3.js
Forked from Tomomi Imura (@girlie_mac)'s Pen Left my heart in San Francisco.
A Pen by Carl V Lewis on CodePen.
(function() { | |
var width = 900; | |
var height = 540; | |
var projection = d3.geo.albersUsa(); | |
var color = d3.scale.linear() | |
.domain([0, 15]) | |
.range(['#5b5858', '#4f4d4d', '#454444', '#323131']); | |
var svg = d3.select('#map').append('svg') | |
.attr('width', width) | |
.attr('height', height); | |
var path = d3.geo.path() | |
.projection(projection); | |
var g = svg.append('g'); | |
d3.json('https://gist.githubusercontent.com/girliemac/b2fdcd10a5a76d87bef3/raw/698891c4e260e3501ecf235205ce87e2dd20467e/us-states.json', function(error, topology) { | |
g.selectAll('path') | |
.data(topojson.feature(topology, topology.objects.usStates).features) | |
.enter() | |
.append('path') | |
.attr('class', function(d){ return 'states ' + d.properties.STATE_ABBR;} ) | |
.attr('d', path) | |
.attr('fill', function(d, i) { return color(i); }) | |
}); | |
// San Francisco | |
var position = projection([-82.1167, 31.4167]); | |
var heart = svg.selectAll('text').data([0]); | |
heart.enter() | |
.append('text') | |
.text('❤') | |
.attr('font-size', 34) | |
.attr('fill', '#CE1126') | |
.attr('transform', function(d) {return 'translate(' + position + ')';}) | |
})(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script> |
* { | |
box-sizing: border-box; | |
} | |
html, input { | |
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
html { | |
-ms-text-size-adjust: none; | |
} | |
body { | |
margin: 1.5em; | |
background: #272727; | |
color: #ecf0f0; | |
} | |
h1 { | |
font-size: 3.25em; | |
margin: 0; | |
font-weight: normal; | |
} | |
h2 { | |
font-size: 1.2em; | |
text-transform: uppercase; | |
font-weight: normal; | |
} | |
a { | |
color: #55acee; | |
} | |
/* topology */ | |
.states { | |
stroke: #fff; | |
stroke-width: 1px; | |
stroke-linejoin: round; | |
-webkit-transition: fill 1s; | |
transition: fill 1s; | |
} | |
.states.GA { | |
fill: #FF8586; | |
} |