enjalot/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

    #load {
      width: 45%;
      height: 100%;
      float: left;
      font-family: Monospace;
      margin: 5px;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      line-height: 24px;
    }
    #meta {

    }
    #url {
      margin-top: 10px;
      width: calc(100% - 55px);
    }
    .example {
      font-size: 10px;
      font-weight: bold;
      margin: 5px;
      cursor: pointer;
    }
    .example:hover {
      text-decoration: underline;
    }

    #geojson {
      width: 45%;
      height: 100%;
      float: right;
      overflow: scroll;
    }
    #out {
      margin: 10px;
    }
  </style>
</head>

<body>

  <div id="load">
    <input id="url">
    <button id="loadurl">Load</button>
    <br>or <span id="examples"></span>
    <br>
    <input id="loadfile" type="file">
    <br>
    <div id="meta">
    </div>
  </div>
  <div id="geojson">
    <pre id="out"></pre>
  </div>
  <script>

    d3.select("#loadurl").on("click", loadUrl);
    d3.select("#url").on("keydown", function() {
      if(d3.event.code === "Enter") {
        loadUrl()
      }
    })
    d3.select("#loadfile").node()
      .addEventListener('change', loadFile, false);


    var examples = [
      {"name": "World countries", url: "http://enjalot.github.io/wwsd/data/world/ne_50m_admin_0_countries.topojson"},
      {"name": "California streams", url:"http://enjalot.github.io/wwsd/data/USA/california-streams.topojson"},
      {"name": "London tube stations", url: "http://enjalot.github.io/wwsd/data/UK/london_stations.topojson"}
    ]
    d3.select("#examples").selectAll("a.example")
      .data(examples)
      .enter().append("a").classed("example", true)
    .text(function(d) { return d.name})
    .on("click", function(d) {
      d3.select("#url").node().value = d.url;
      loadUrl(d.url)
    })

    var load = d3.select("#load").node()
    load.addEventListener("dragover", handleDragOver, false)
    load.addEventListener("drop", loadFile, false);

    function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy';
    }
    function loadFile(evt) {
      evt.stopPropagation();
    	evt.preventDefault();
      d3.select("pre#out").text("LOADING")

      var files;
      if(evt.dataTransfer) {
        files = evt.dataTransfer.files;
      } else {
        files = evt.target.files;
      }
      var reader = new FileReader();
      reader.onload = function(e) {
        convert(JSON.parse(e.target.result))
      }
      reader.readAsText(files[0])
    }

    function convert(topo) {
      console.log("topojson:", topo)
        var keys = Object.keys(topo.objects);
        d3.select("#meta").html(keys.length + " objects: " + keys.join("<br>"))

        var geo = topojson.feature(topo, topo.objects[keys[0]])
        console.log("geojson", geo)
        renderJSON(null, geo, true)
    }

    function loadUrl() {
      var url = d3.select("#url").node().value;
      d3.select("pre#out").text("LOADING")
      d3.json(url, function(err, topo) {
        if(err) {
          return renderJSON(err);
        }

        convert(topo)
      })
    }

    function renderJSON(err, json, pretty) {
      var pre = d3.select("pre#out")
      if(err) {
        pre.classed("error", true)
        pre.text(JSON.stringify(err, null, 2))
      } else {
        pre.classed("error", false)
        pre.text(JSON.stringify(json, null, pretty ? 2 : 0));
      }
    }

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	#load {
	width: 45%;
	height: 100%;
	float: left;
	font-family: Monospace;
	margin: 5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	line-height: 24px;
	}
	#meta {

	}
	#url {
	margin-top: 10px;
	width: calc(100% - 55px);
	}
	.example {
	font-size: 10px;
	font-weight: bold;
	margin: 5px;
	cursor: pointer;
	}
	.example:hover {
	text-decoration: underline;
	}

	#geojson {
	width: 45%;
	height: 100%;
	float: right;
	overflow: scroll;
	}
	#out {
	margin: 10px;
	}
	</style>
	</head>

	<body>

	<div id="load">
	<input id="url">
	<button id="loadurl">Load</button>
	<br>or <span id="examples"></span>
	<br>
	<input id="loadfile" type="file">
	<br>
	<div id="meta">
	</div>
	</div>
	<div id="geojson">
	<pre id="out"></pre>
	</div>
	<script>

	d3.select("#loadurl").on("click", loadUrl);
	d3.select("#url").on("keydown", function() {
	if(d3.event.code === "Enter") {
	loadUrl()
	}
	})
	d3.select("#loadfile").node()
	.addEventListener('change', loadFile, false);


	var examples = [
	{"name": "World countries", url: "http://enjalot.github.io/wwsd/data/world/ne_50m_admin_0_countries.topojson"},
	{"name": "California streams", url:"http://enjalot.github.io/wwsd/data/USA/california-streams.topojson"},
	{"name": "London tube stations", url: "http://enjalot.github.io/wwsd/data/UK/london_stations.topojson"}
	]
	d3.select("#examples").selectAll("a.example")
	.data(examples)
	.enter().append("a").classed("example", true)
	.text(function(d) { return d.name})
	.on("click", function(d) {
	d3.select("#url").node().value = d.url;
	loadUrl(d.url)
	})

	var load = d3.select("#load").node()
	load.addEventListener("dragover", handleDragOver, false)
	load.addEventListener("drop", loadFile, false);

	function handleDragOver(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	evt.dataTransfer.dropEffect = 'copy';
	}
	function loadFile(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	d3.select("pre#out").text("LOADING")

	var files;
	if(evt.dataTransfer) {
	files = evt.dataTransfer.files;
	} else {
	files = evt.target.files;
	}
	var reader = new FileReader();
	reader.onload = function(e) {
	convert(JSON.parse(e.target.result))
	}
	reader.readAsText(files[0])
	}

	function convert(topo) {
	console.log("topojson:", topo)
	var keys = Object.keys(topo.objects);
	d3.select("#meta").html(keys.length + " objects: " + keys.join("<br>"))

	var geo = topojson.feature(topo, topo.objects[keys[0]])
	console.log("geojson", geo)
	renderJSON(null, geo, true)
	}

	function loadUrl() {
	var url = d3.select("#url").node().value;
	d3.select("pre#out").text("LOADING")
	d3.json(url, function(err, topo) {
	if(err) {
	return renderJSON(err);
	}

	convert(topo)
	})
	}

	function renderJSON(err, json, pretty) {
	var pre = d3.select("pre#out")
	if(err) {
	pre.classed("error", true)
	pre.text(JSON.stringify(err, null, 2))
	} else {
	pre.classed("error", false)
	pre.text(JSON.stringify(json, null, pretty ? 2 : 0));
	}
	}

	</script>
	</body>