Skip to content

Instantly share code, notes, and snippets.

@rveciana

rveciana/README.md

Last active September 23, 2016 22:02
Download ZIP

Revisions

  1. rveciana revised this gist Sep 23, 2016. 6 changed files with 12872 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    This file shows how to use the *geoAlbersUsaTerritories* projection from [d3-composite-projections](http://rveciana.github.io/d3-composite-projections/).
    This file shows how to use the *geoAlbers* projection from [d3-composite-projections](http://rveciana.github.io/d3-composite-projections/).

    To change the file, edit draw.js and run

    browserify draw.js > bundle.js

    The dependencies are installed with:

    npm install d3-composite-projections d3-geo d3-request d3-selection d3-transition topojson
    npm install d3-composite-projections d3-geo d3-request d3-selection d3-transition topojson
    12,806 changes: 12,806 additions & 0 deletions bundle.js
    View file
    12,806 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    55 changes: 55 additions & 0 deletions draw.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    var d3_composite = require("d3-composite-projections");
    var d3_geo = require("d3-geo");
    var d3_request = require("d3-request");
    var d3_selection = require("d3-selection");
    var d3_transition = require("d3-transition");
    var topojson = require("topojson");

    var width = 960;
    var height = 500;

    var projection = d3_composite.geoAlbersUsa();

    var path = d3_geo.geoPath()
    .projection(projection);

    var svg = d3_selection.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    var t = d3_transition.transition()
    .on("interrupt", function(d,i){
    console.info(i);
    });

    d3_request.json("us.json", function(error, topojsonData) {
    var us = topojson.feature(topojsonData, topojsonData.objects.states);

    svg.selectAll(".region")
    .data(us.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class","region")
    .style("fill", "#aca")
    .style("stroke", "#000")
    .style("stroke-width", "0.5px")
    .on("mouseover", function(d,i) {
    d3_selection.select(this)
    .transition(t)
    .style("fill", "red");
    })
    .on("mouseout", function(d,i) {
    d3_selection.select(this).interrupt();
    d3_selection.select(this)
    .transition(t)
    .style("fill", "#aca");
    });

    svg
    .append("path")
    .style("fill","none")
    .style("stroke","#f00")
    .attr("d", projection.getCompositionBorders());

    });
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <body>
    <div id="map"></div>

    <script src="bundle.js"></script>
    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.
    1 change: 1 addition & 0 deletions us.json
    View file
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  2. rveciana created this gist Sep 23, 2016.
    9 changes: 9 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    This file shows how to use the *geoAlbersUsaTerritories* projection from [d3-composite-projections](http://rveciana.github.io/d3-composite-projections/).

    To change the file, edit draw.js and run

    browserify draw.js > bundle.js

    The dependencies are installed with:

    npm install d3-composite-projections d3-geo d3-request d3-selection d3-transition topojson