prototype: d3.geo

_.md

[ Launch: prototype: d3.geo ] 4743201 by ptvans
[ Launch: prototype: d3.geo ] 4743193 by ptvans
[ Launch: prototype: d3.geo ] 4737103 by ptvans
[ Launch: Tributary inlet ] 4700486 by enjalot

coffee.csv

config.json

{"description":"prototype: d3.geo","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world110.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"scheduledarrivals.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"realtimearrivals.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"coffee.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var coffee = tributary.coffee;
var svg = d3.select("svg");

//console.log(schedule)

var width = tributary.sw;
var height = tributary.sh;
var center = {
  x: width/2,
  y: height/2
}


var world = tributary.world110;
var countries = topojson.object(world, world.objects.land);

//SCALE
var prod_min = 0;
var prod_max = d3.max(coffee, function(d) {return d.y2012});

var days_scale = d3.scale.sqrt()
    .domain([prod_min, prod_max])
    .range([5, 12]);


var days_color_scale = d3.scale.linear()
    .domain([prod_min, prod_max])
    .range(["#BAE747", "#1A223D"])
    .interpolate(d3.interpolateHcl)



//san francisco [-122.4194200, 37.7749300 ]
var lonlat = [23.6217, 5.07689 ];

var projection = d3.geo.mercator()
  .scale(1581)
  .center(lonlat)
  .translate([width/2, height/2])

var xy = projection(lonlat);

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

svg.append("path")
.attr("transform", "translate(" + [xy[0] - center.x, xy[1] - center.y ] + ")")
.attr("d", path(countries))
.classed("land", true);

svg.append("circle")
	.classed("locator", true)
.attr({
  cx: xy[0],
  cy: xy[1],
  r: 283
})


svg.append("g")
  .attr("id", "producers")

var points = svg.select("#producers")
    .selectAll("circle")
    .data(coffee)
    .enter()
    .append("circle")
	.classed("producer", true);
	points
    .attr("transform", function(d) {
        var p = projection([d.lon, d.lat]);
        return "translate(" + p + ")";
    })
    .attr({
      "r": function(d) {
        return days_scale(d.y2012);
      },
	  fill: function(d) {
        return days_color_scale(d.y2012);
      },
      "fill-opacity": 0.4,
      "stroke":"#C5EE6D",
      "stroke-width": 0.5
    })
    
    svg.append("g")
  .attr("id", "realtime")

var points = svg.select("#realtime")
    .selectAll("circle")
    .data(realtime)
    .enter()
    .append("circle")
	.classed("realtime", true);
	points
    .attr("transform", function(d) {
        var p = projection([d.LONGITUDE, d.LATITUDE]);
        return "translate(" + p + ")";
    })
    .attr({
      "r": 5
    })

    
        //TITLE TEXT
var shade = svg.append("rect")
    
 shade.attr({
      rx:9,
      x:33,
      y:32,
      height:75,
      width:437,
   "fill-opacity":0.15
    })
     
var title = svg.append("text")
    .text("coffee comes from these places")
    .attr({
      "transform": "translate(" + [251, 68] + ")",
      "text-anchor": "middle",
      "font-weight": 300,
      "font-size": 30,
      "fill-opacity": 0.9,
      "fill": "#FFFFFF"
    })
    
 var subtitle = svg.append("text")
    .text("total production, 60kg. bags of coffee (thousands)")
    .attr({
      "transform": "translate(" + [246, 94] + ")",
      "text-anchor": "middle",
      "font-weight": 500,
      "font-size": 12,
      "fill": "#3A3A3A"
    })
     

style.css

.land {
  fill: #C9C9C9;
  stroke: #ffffff;
}

circle.locator {
  fill: #A5A5A5;
  stroke: #F8BB79;
  stroke-width: 1;
  fill-opacity: 0.0
}

circle.producer {
  fill: #47AFCF;
  stroke: #224A69;
  stroke-width: 0.5;
  fill-opacity: 0.5
}

world110.json