Mapping Random Data With D3

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <style>
      .state {
        stroke: rgba(0,0,0,0.4);
      }

circle {
        fill: orange;
        fill-opacity: 0.7;
        stroke-opacity: 1;
        stroke-width: 1;
        stroke: yellow;
      }
    </style>
  </head>
  <body>
  </body>
  <script src="https://d3js.org/d3.v4.js"></script>

var svg = d3.select("body")
    .append("svg")
    .attr('width', width)
    .attr('height', height)

var projection = d3.geoAlbersUsa();

// Path is a function that tells our svg object how to convert our geojson
  // data into
  var path = d3.geoPath()
    .projection(projection);

function randomNumber(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

var colorScale = d3.scaleLinear()
    .domain([0, 1, 2, 3, 4, 5, 6, 7, 8])
    .range(['#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#0c2c84']);

d3.json("./us.geojson", function(err, data) {

data.features.forEach(function(feature) {
      // Append the state's 'projected' (screen x/y) to the data object
      feature.properties.center = path.centroid(feature);
    })

states = svg.selectAll("path")
      .data(data.features)
      .enter().append("path")
      .attr('class', 'state')
      .attr("d", path);

circles = svg.selectAll("circle")
      .data(data.features)
      .enter().append('circle')
      .attr('cx', function(d) { return d.properties.center[0]; })
      .attr('cy', function(d) { return d.properties.center[1]; })
      .attr('r', 0);

style();

setInterval(style, 3000);
  });

function style () {
    states
      .transition()
        .duration(1000)
      .attr('fill', function() { return colorScale(randomNumber(0, 8)) })
      .attr('fill-opacity', function() { return Math.random();  });

circles
      .transition()
        .duration(1000)
      .attr('r', function(d) {
        d.properties.prev_value = d.properties.value || 0;
        d.properties.value = randomNumber(0, 15);
        return d.properties.value;
      });
  }

</script>
</html>

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

https://d3js.org/d3.v4.js