index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.graticule {
fill: none;
stroke: #777;
}
.boundary {
fill: #ccc;
fill-opacity: .8;
stroke: #000;
}
.land-fill {
stroke: #40053f;
stroke-width: 4px;
}
.state-boundary {
stroke: #40053f;
stroke-width: 3px;
}
.county-boundary {
fill: #FFEBCD;
stroke-dasharray: 5, 3, 9, 2;
stroke: #7b0c4c;
stroke-width: .5px;
}
.routes {
stroke-dasharray: 2, 4, 5, 3;
}
.statenames {
font: 20px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.statenameshalo {
font: 20px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
stroke: white;
stroke-width: 3px;
fill: white;
opacity: .5;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960, height = 960;
scaleVal = 12500;
distanceVal = 1.11;
rotateVal = 30;
clipVal = 15;
countyColors = ["#f0b103", "#ffb202", "#f6b623", "#ffbc02", "#ffb215"]
projection = d3.geo.satellite()
.distance(distanceVal)
.scale(scaleVal)
.rotate([121.00, -35.50, 20])
.center([-4, 5])
.tilt(60)
.clipAngle(clipVal);
var graticule = d3.geo.graticule()
.extent([[-135, 24], [-66, 55]])
.step([1, 1]);
path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("us.json", function(error, us) {
svg.append("path")
.datum(topojson.mesh(us, us.objects.land))
.attr("d", path)
.attr("class", "land-fill");
svg.selectAll(".county")
.data(topojson.object(us, us.objects.counties).geometries)
.enter().insert("path")
.attr("class", "county-boundary")
.attr("d", path)
.style("fill", function(d,i) {return countyColors[i%5]})
.on("mouseover", function(d) { d3.select(this).transition().duration(500).style("stroke-width", 5).style("stroke-opacity", .5);
}).on("mouseout", function() {
d3.select(this).transition().duration(500).style("stroke-width", .5).style("stroke-opacity", 1);
});;
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
.attr("d", path)
.attr("class", "state-boundary");
sampleData = [{"name": "San Francisco", "coordinates": [-122.417,37.783], "barheight": 100},
{"name": "Sacramento", "coordinates": [-121.505,40.488], "barheight": 30},
{"name": "Portland", "coordinates": [-122.682,45.52], "barheight": 50}
]
bars = svg.selectAll("g")
.data(sampleData)
.enter()
.append("g")
.attr("class", "bars")
.attr("transform", function(d) {return "translate(" + projection(d.coordinates) + ")";});
bars.append("rect")
.attr('height', function(d) {return d.barheight})
.attr('width', 10)
.attr('y', function(d) {return -(d.barheight)})
.attr("class", "bars")
.style("fill", "purple")
.style("stroke", "white")
.style("stroke-width", 2)
;
bars.append("text")
.text(function(d) {return d.name})
.attr("x", -10)
.attr("y", 18);
bars.transition().duration(500).style("opacity", 1)
svg.selectAll("text.statenameshalo").data(["Oregon","California"]).enter().append("text").text(function(d) {return d}).attr("x", 390).attr("y", function(d,i) {return 328 + (i * 33)}).attr("class","statenameshalo").attr("transform", "rotate(-15)")
svg.selectAll("text.statenames").data(["Oregon","California"]).enter().append("text").text(function(d) {return d}).attr("x", 390).attr("y", function(d,i) {return 328 + (i * 33)}).attr("class","statenames").attr("transform", "rotate(-15)")
});
d3.select(self.frameElement).style("height", height + "px");
</script>