All examples By author By category About

chule

Full window Github gist

Proportional Symbol

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

.counties {
  fill: none;
}

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 1em auto 4em auto;
  position: relative;
  tab-size: 2;
  width: 960px;
}

.key path {
  display: none;
}

.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.states {
  /*fill: none;
  stroke: #000;*/
 /* stroke-linejoin: round;*/

stroke: #fff;
  /*stroke-dasharray: 2,2;*/
  stroke-linejoin: round;
}

.black { fill: #000000;}

.title {
  font-size: 25px;
  font-weight: 300;

}

.tick text {
  font-size: 10px;
}

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

///////////////////////
/* buttons */

(function () {

function pickRandomProperty(obj) {
    var result;
    var count = 0;
    for (var prop in obj)
        if (Math.random() < 1/++count)
           result = prop;
    return result;
  };

var buttonData = ["Scheme1", "Scheme2", "Scheme3", "Random"];
  var buttonDiv = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 50);
  var buttons = buttonDiv.selectAll(".updateButton")
    .data(buttonData)
     .enter()
    .append('g')
    .attr("class", "updateButton")
    .on("click", function(d, i) {

if (d === "Scheme1") {
        setup(colorbrewer.Blues["8"]); //Greys, Oranges, Blues, YlOrRd
      }

if (d === "Scheme2") {
        setup(colorbrewer.Greys["8"]);
      }

if (d === "Scheme3") {
        setup(colorbrewer.Oranges["8"]);
      }

if (d === "Random") {
        var nProperty = pickRandomProperty(colorbrewer);
        console.log(nProperty);
        setup(colorbrewer[nProperty]["8"]);
      }

});
  buttons.append("rect")
    .attr("x", function(d, i) { return (i * 100) + 270; })
       .attr("y", 18)
      .attr("width", 98)
      .attr("height", 25)
      .attr("ry", 5)
      .style("stroke", "#787878")
      .style("fill", "steelblue");
  buttons.append("text")
      .attr("x", function(d, i) { return (i * 100) + (100 / 2) + 260; }) 
      .attr("y", 30)
      .attr("dy", "0.35em")
      .style("text-anchor", "middle")
      .style("font-size", "15px")
      .style("pointer-events", "none")
      .text(function(d) { return d; });
 }());   
 ///////////////////////

var setup = function (color) {

d3.select("svg.myChart").remove();

var width = 960,
      height = 500;

var projection = d3.geo.albersUsa()
      .scale(900)
      .translate([width / 2, height / 2]);

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

var svg = d3.select("body").append("svg")
      .attr("class", "myChart")
      .attr("width", width)
      .attr("height", height);

//d3.select("svg.myChart").append("text").text("Population in states")
  //    .attr("transform", "translate(360,30)").attr("class", "title")

queue()
      .defer(d3.json, "usa4.topo.json")
      .defer(d3.csv, "population.csv")//, function(d) {  rateById.set(d["GEO.id2"], +d["HD01_VD01"]); })
      .await(ready);

function ready(error, data, data1) {

//console.log(d3.min(data1, function(d) { return +d["HD01_VD01"]; }));
    //console.log(d3.max(data1, function(d) { return +d["HD01_VD01"]; }));

var rateById = {};

data1.forEach(function(d) { rateById[d.id] = +d["HD01_VD01"]; });

//console.log(rateById)

var min = d3.min(data1, function(d) { return +d["HD01_VD01"]; });
    var max = d3.max(data1, function(d) { return +d["HD01_VD01"]; });

var colorScale = d3.scale.threshold()
      //.domain([min, max]) //568158 37691912
      .domain([800000, 2000000, 3300000, 5000000, 7000000, 10000000, 20000000]) 
      //.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
      //.range(colorbrewer.YlGn["5"]);
      .range(color);

var circleScale = d3.scale.linear()
      .domain([min, max]) //568158 37691912
      //.domain([800000, 2000000, 3300000, 5000000, 7000000, 10000000, 20000000]) 
      //.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
      //.range(colorbrewer.YlGn["5"]);
      .range([10, 25]);

//console.log(quantize(15691912));

//colorbrewer.Greens["9"]

//formatValue = d3.format(".2s");
    formatValue = d3.format("s");

// A position encoding for the key only.
    var x = d3.scale.linear()
        .domain([568158, 37691912])
        .range([0, 600]);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickSize(13)
        .tickValues(colorScale.domain())
        .tickFormat(function(d) { return formatValue(d)});  
             
    // key
    var g = svg.append("g")
        .attr("class", "key")
        .attr("transform", "translate(170,30)");

g.selectAll("rect")
        .data(colorScale.range().map(function(d, i) {
          return {
            x0: i ? x(colorScale.domain()[i - 1]) : x.range()[0],
            x1: i < colorScale.domain().length ? x(colorScale.domain()[i]) : x.range()[1],
            z: d
          };
        }))
      .enter().append("rect")
        .attr("height", 8)
        .attr("x", function(d) { return d.x0; })
        .attr("width", function(d) { console.log(d); return d.x1 - d.x0; })
        .style("fill", function(d) { return d.z; });

g.call(xAxis).append("text")
        .attr("class", "caption")
        .attr("y", -6)
        .text("Population in states");  
    // key end

var formatNumber = d3.format(",.0f");

function getCentroid(selection) {
          // get the DOM element from a D3 selection
          // you could also use "this" inside .each()
          var element = selection.node(),
              // use the native SVG interface to get the bounding box
              bbox = element.getBBox();
          // return the center of the bounding box
          return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
    };

var states = svg.append("g")
        .attr("transform", "translate(0,35)")
        .attr("class", "states")
      .selectAll("path")
        .data(topojson.feature(data, data.objects["usa.geo"]).features)
      .enter();

states.append("path")
        //.style("fill", function(d, i) {  return colorScale(rateById[d.id]); })
        .style("fill", "#ddd")
        .attr("d", path)
        .attr("class", function (d, i) {return "state" + d.id;})

//.append("title")
        //  .text(function(d, i) { return d.properties.name + ": " + formatNumber(rateById[d.id]); })

states.append("circle")
        .attr("transform", function (d, i) { /*console.log(this.parent.firstChild);*/ return "translate(" + getCentroid(d3.select(".state" + d.id)) + ")";}) 
        .attr({
            cx: 0,
            cy: 0,
            r: function (d, i) { /*console.log(rateById[d.id]);*/ return circleScale(rateById[d.id]);}
        })
        .style("fill", function(d, i) {  return colorScale(rateById[d.id]); })
        .append("title")
          .text(function(d, i) { return d.properties.name + ": " + formatNumber(rateById[d.id]); })

/*
    svg.append("path")
        .datum(topojson.mesh(data, data.objects.states, function(a, b) { return a !== b; }))
        .attr("class", "states")
        .attr("d", path);
        */
  }

d3.select(self.frameElement).style("height", height + 80 + "px");

};

setup(colorbrewer.Blues["8"])

</script>

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

Modified http://d3js.org/queue.v1.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/queue.v1.min.js

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