Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/cities.csv

Last active March 17, 2016 16:23
Download ZIP

Revisions

  1. emeeks revised this gist Mar 17, 2016. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,10 @@
    <head>
    <title>D3 in Action Chapter 7 - Example 6</title>
    <meta charset="utf-8" />
    <script src="http://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/JavaScript"></script>
    <script src="http://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
    <script src="http://d3js.org/colorbrewer.v1.min.js" type="text/JavaScript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/JavaScript"></script>
    <script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
    <script src="https://d3js.org/colorbrewer.v1.min.js" type="text/JavaScript"></script>
    </head>
    <style>
    svg {
  2. emeeks revised this gist Nov 18, 2014. No changes.
  3. emeeks created this gist Nov 18, 2014.
    9 changes: 9 additions & 0 deletions cities.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    "label","population","country","x","y"
    "San Francisco", 750000,"USA",37,-122
    "Fresno", 500000,"USA",36,-119
    "Lahore",12500000,"Pakistan",31,74
    "Karachi",13000000,"Pakistan",24,67
    "Rome",2500000,"Italy",41,12
    "Naples",1000000,"Italy",40,14
    "Rio",12300000,"Brazil",-22,-43
    "Sao Paolo",12300000,"Brazil",-23,-46
    110 changes: 110 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <html>
    <head>
    <title>D3 in Action Chapter 7 - Example 6</title>
    <meta charset="utf-8" />
    <script src="http://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/JavaScript"></script>
    <script src="http://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
    <script src="http://d3js.org/colorbrewer.v1.min.js" type="text/JavaScript"></script>
    </head>
    <style>
    svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
    }

    .countries {
    fill: red;
    fill-opacity: .5;
    stroke: black;
    stroke-width: 1px;
    }

    </style>
    <body>

    <div id="viz">
    <svg>
    </svg>
    </div>
    <div id="controls" />
    </body>
    <footer>

    <script>
    queue()
    .defer(d3.json, "world.geojson")
    .defer(d3.csv, "cities.csv")
    .await(function(error, file1, file2) { createMap(file1, file2); });

    function createMap(countries, cities) {
    expData = countries;
    width = 500;
    height = 500;
    projection = d3.geo.satellite()
    .scale(1330)
    .translate([250,250])
    .rotate([-30.24, -31, -56])
    .tilt(30)
    .distance(1.199)
    .clipAngle(45)

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

    var mapZoom = d3.behavior.zoom().translate(projection.translate()).scale(projection.scale()).on("zoom", zoomed);
    d3.select("svg").call(mapZoom);

    function zoomed() {
    var currentRotate = projection.rotate()[0];
    projection.translate(mapZoom.translate()).scale(mapZoom.scale());
    d3.selectAll("path.graticule").attr("d", geoPath);
    d3.selectAll("path.countries").attr("d", geoPath);

    d3.selectAll("circle.cities")
    .attr("cx", function(d) {return projection([d.y,d.x])[0]})
    .attr("cy", function(d) {return projection([d.y,d.x])[1]})
    .style("display", function(d) {return parseInt(d.y) + currentRotate < 45 && parseInt(d.y) + currentRotate > -45 ? "block" : "none"})

    }

    featureSize = d3.extent(countries.features, function(d) {return geoPath.area(d)});
    countryColor = d3.scale.quantize().domain(featureSize).range(colorbrewer.Reds[7]);

    var graticule = d3.geo.graticule();

    d3.select("svg").append("path")
    .datum(graticule)
    .attr("class", "graticule line")
    .attr("d", geoPath)
    .style("fill", "none")
    .style("stroke", "lightgray")
    .style("stroke-width", "1px");

    d3.select("svg").selectAll("path.countries").data(countries.features)
    .enter()
    .append("path")
    .attr("d", geoPath)
    .attr("class", "countries")
    .style("fill", function(d) {return countryColor(geoPath.area(d))})
    .style("stroke-width", 1)
    .style("stroke", "black")
    .style("opacity", .5)

    d3.select("svg").selectAll("circle").data(cities)
    .enter()
    .append("circle")
    .attr("class", "cities")
    .style("fill", "black")
    .style("stroke", "white")
    .style("stroke-width", 1)
    .attr("r", 3)
    .attr("cx", function(d) {return projection([d.y,d.x])[0]})
    .attr("cy", function(d) {return projection([d.y,d.x])[1]})
    .style("display", function(d) {return parseInt(d.y) -30.24 < 45 && parseInt(d.y) -30.24 > -45 ? "block" : "none"})

    }
    </script>
    </footer>

    </html>
    1 change: 1 addition & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    This is the code for Chapter 7, Figure 15 from [D3.js in Action](http://manning.com/meeks/) showing how to create an isometric map using the **d3.geo.satellite()** projection.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    181 changes: 181 additions & 0 deletions world.geojson
    View file
    181 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.