A satellite projection with a few interesting UI elements, as well as a simple geo-located bar chart.

<!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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://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") // solid white fill
  .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") // thick grey stroke for internal state boundaries
.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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v0.min.js