d3.austin() Meetup - March Demo

Data

<!DOCTYPE html>
<meta charset='utf-8'>
<style>

body {
  font-family: 'Helvetica'
}
.precincts {
  fill: #ddd;
  stroke: #fff;
}

.adler {
  fill: #d95f02;
  background: #d95f02;
}

.martinez {
  fill: #1b9e77;
  background: #1b9e77;
}

.na {
  fill: #ddd;
  background: #ddd;
}

svg {
  border:  1px solid #ddd
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .scale(39000)
    .center([-97.75, 30.32])
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

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

var legend = svg.append('g')
  .attr('transform', 'translate(' + (width - 120) + ',10)');

var key = legend.selectAll('g')
  .data(['Adler', 'Martinez', 'NA'])
  .enter().append('g')
  .attr('transform', function (d,i) {return 'translate(0,' + (i*25) + ')';});

var name = key.selectAll('text')
  .data(function (d) {return [d];})
  .enter().append('text')
  .attr('dy', '1.33em')
  .text(function (d) {return d;});

d3.json('precincts.json', draw);

</script>

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

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

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

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