nitaku/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A really, really simple example about the usage of GeoJSON and D3's geo path generators with purely geometrical (non-geographical) data.
It creates a GeoJSON polygon representing a square for each pair of coordinates in the input data, then it packs all polygons in a feature collection. In order to use the path generator, a custom projection is defined, representing the identity (I don't know if there is a better way to implement that). A feature's type property is then used to color the rendering.

  
## index.coffee
global = {
    SIDE: 80
}

window.main = () ->
    width = 960
    height = 500

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

    ### create the GeoJSON ###
    data = [
        {i: 1, j: 1, type: 'A'},
        {i: 4, j: 2, type: 'B'},
        {i: 3, j: 3, type: 'C'},
        {i: 3, j: 4, type: 'C'},
        {i: 3, j: 7, type: 'B'},
        {i: 2, j: 7, type: 'D'}
    ]

    squares = {
        type: 'FeatureCollection',
        features: (new_square(d) for d in data)
    }

    ### define a color scale ###
    colorify = d3.scale.category10()
        .domain(['A','B','C','D'])

    ### identity projection. see http://bl.ocks.org/mbostock/5663666 for reference ###
    path_generator = d3.geo.path()
        .projection d3.geo.transform({point: (x,y) -> this.stream.point(x,y) })

    ### draw the result ###
    svg.selectAll('.square')
        .data(squares.features)
      .enter().append('path')
        .attr('class', 'square')
        .style('fill', (d) -> colorify(d.properties.type))
        .attr('d', path_generator)

### create a new square ###
new_square = (d) ->
    return {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: [[
                [d.j*global.SIDE, d.i*global.SIDE],
                [(d.j+1)*global.SIDE, d.i*global.SIDE],
                [(d.j+1)*global.SIDE, (d.i+1)*global.SIDE],
                [d.j*global.SIDE, (d.i+1)*global.SIDE],
                [d.j*global.SIDE, d.i*global.SIDE]
            ]]
        },
        properties: {
            type: d.type
        }
    }


## index.css
.square {
  stroke: black;
  stroke-width: 2;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>GeoJSON squares</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body onload="main()"></body>
</html>

## index.js
(function() {
  var global, new_square;

  global = {
    SIDE: 80
  };

  window.main = function() {
    var colorify, d, data, height, path_generator, squares, svg, width;
    width = 960;
    height = 500;
    svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
    /* create the GeoJSON
    */
    data = [
      {
        i: 1,
        j: 1,
        type: 'A'
      }, {
        i: 4,
        j: 2,
        type: 'B'
      }, {
        i: 3,
        j: 3,
        type: 'C'
      }, {
        i: 3,
        j: 4,
        type: 'C'
      }, {
        i: 3,
        j: 7,
        type: 'B'
      }, {
        i: 2,
        j: 7,
        type: 'D'
      }
    ];
    squares = {
      type: 'FeatureCollection',
      features: (function() {
        var _i, _len, _results;
        _results = [];
        for (_i = 0, _len = data.length; _i < _len; _i++) {
          d = data[_i];
          _results.push(new_square(d));
        }
        return _results;
      })()
    };
    /* define a color scale
    */
    colorify = d3.scale.category10().domain(['A', 'B', 'C', 'D']);
    /* identity projection. see http://bl.ocks.org/mbostock/5663666 for reference
    */
    path_generator = d3.geo.path().projection(d3.geo.transform({
      point: function(x, y) {
        return this.stream.point(x, y);
      }
    }));
    /* draw the result
    */
    return svg.selectAll('.square').data(squares.features).enter().append('path').attr('class', 'square').style('fill', function(d) {
      return colorify(d.properties.type);
    }).attr('d', path_generator);
  };

  /* create a new square
  */

  new_square = function(d) {
    return {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[[d.j * global.SIDE, d.i * global.SIDE], [(d.j + 1) * global.SIDE, d.i * global.SIDE], [(d.j + 1) * global.SIDE, (d.i + 1) * global.SIDE], [d.j * global.SIDE, (d.i + 1) * global.SIDE], [d.j * global.SIDE, d.i * global.SIDE]]]
      },
      properties: {
        type: d.type
      }
    };
  };

}).call(this);

## index.sass
.square
    stroke: black
    stroke-width: 2


## thumbnail.png

      
    Raw
  

              thumbnail.png
	global = {
	SIDE: 80
	}

	window.main = () ->
	width = 960
	height = 500

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

	### create the GeoJSON ###
	data = [
	{i: 1, j: 1, type: 'A'},
	{i: 4, j: 2, type: 'B'},
	{i: 3, j: 3, type: 'C'},
	{i: 3, j: 4, type: 'C'},
	{i: 3, j: 7, type: 'B'},
	{i: 2, j: 7, type: 'D'}
	]

	squares = {
	type: 'FeatureCollection',
	features: (new_square(d) for d in data)
	}

	### define a color scale ###
	colorify = d3.scale.category10()
	.domain(['A','B','C','D'])

	### identity projection. see http://bl.ocks.org/mbostock/5663666 for reference ###
	path_generator = d3.geo.path()
	.projection d3.geo.transform({point: (x,y) -> this.stream.point(x,y) })

	### draw the result ###
	svg.selectAll('.square')
	.data(squares.features)
	.enter().append('path')
	.attr('class', 'square')
	.style('fill', (d) -> colorify(d.properties.type))
	.attr('d', path_generator)

	### create a new square ###
	new_square = (d) ->
	return {
	type: 'Feature',
	geometry: {
	type: 'Polygon',
	coordinates: [[
	[d.jglobal.SIDE, d.iglobal.SIDE],
	[(d.j+1)global.SIDE, d.iglobal.SIDE],
	[(d.j+1)global.SIDE, (d.i+1)global.SIDE],
	[d.jglobal.SIDE, (d.i+1)global.SIDE],
	[d.jglobal.SIDE, d.iglobal.SIDE]
	]]
	},
	properties: {
	type: d.type
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>GeoJSON squares</title>
	<link type="text/css" href="index.css" rel="stylesheet"/>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="index.js"></script>
	</head>
	<body onload="main()"></body>
	</html>
	(function() {
	var global, new_square;

	global = {
	SIDE: 80
	};

	window.main = function() {
	var colorify, d, data, height, path_generator, squares, svg, width;
	width = 960;
	height = 500;
	svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
	/* create the GeoJSON
	*/
	data = [
	{
	i: 1,
	j: 1,
	type: 'A'
	}, {
	i: 4,
	j: 2,
	type: 'B'
	}, {
	i: 3,
	j: 3,
	type: 'C'
	}, {
	i: 3,
	j: 4,
	type: 'C'
	}, {
	i: 3,
	j: 7,
	type: 'B'
	}, {
	i: 2,
	j: 7,
	type: 'D'
	}
	];
	squares = {
	type: 'FeatureCollection',
	features: (function() {
	var _i, _len, _results;
	_results = [];
	for (_i = 0, _len = data.length; _i < _len; _i++) {
	d = data[_i];
	_results.push(new_square(d));
	}
	return _results;
	})()
	};
	/* define a color scale
	*/
	colorify = d3.scale.category10().domain(['A', 'B', 'C', 'D']);
	/* identity projection. see http://bl.ocks.org/mbostock/5663666 for reference
	*/
	path_generator = d3.geo.path().projection(d3.geo.transform({
	point: function(x, y) {
	return this.stream.point(x, y);
	}
	}));
	/* draw the result
	*/
	return svg.selectAll('.square').data(squares.features).enter().append('path').attr('class', 'square').style('fill', function(d) {
	return colorify(d.properties.type);
	}).attr('d', path_generator);
	};

	/* create a new square
	*/

	new_square = function(d) {
	return {
	type: 'Feature',
	geometry: {
	type: 'Polygon',
	coordinates: [[[d.j * global.SIDE, d.i * global.SIDE], [(d.j + 1) * global.SIDE, d.i * global.SIDE], [(d.j + 1) * global.SIDE, (d.i + 1) * global.SIDE], [d.j * global.SIDE, (d.i + 1) * global.SIDE], [d.j * global.SIDE, d.i * global.SIDE]]]
	},
	properties: {
	type: d.type
	}
	};
	};

	}).call(this);