JSFiddle - React, Tailwind, and code Playground

by gzuri

HTML

<script src="http://d3js.org/topojson.v1.min.js"></script>

<svg width="1920" height="1080"></svg>
<canvas width="1920" height="1080"></canvas>

JavaScript

var canvas = d3.select("canvas"),
    w = +canvas.attr("width"),
    h = +canvas.attr("height");
 
var duration = 1000 * 60 * 30, // 30 minutes
    start = new Date(Date.now() - duration),
    utc = d3.time.format.iso;
 
 
var context = canvas.node().getContext("2d"),
    image = context.createImageData(w, h);
 
var projection = d3.geo.albersUsa()
    .scale(2000)
    .translate([w / 2, h / 2]);
 
// Save as on alt-click.
canvas.on("click", function() {
  if (d3.event.altKey) window.open(this.toDataURL());
});

// Display the states in the background.
d3.json("https://dl.dropboxusercontent.com/u/49159198/us-states.json", function(collection) {
  d3.select("svg").selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", d3.geo.path()
      .projection(projection));
});



function draw() {
  context.putImageData(image, 0, 0);
  return true;
}
aa = [-122.490402, 37.786453];
	bb = [-122.389809, 37.72728];
console.log(projection(aa),projection(bb));
svg.selectAll("circle")
		.data([aa,bb]).enter()
		.append("circle")
		.attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; })
		.attr("cy", function (d) { return projection(d)[1]; })
		.attr("r", "8px")
		.attr("fill", "red")