TopoJSON => GeoJSON tool by enjalot

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: "//enjalot.github.io/wwsd/data/world/ne_50m_admin_0_countries.topojson"},
      {"name": "California streams", url:"//enjalot.github.io/wwsd/data/USA/california-streams.topojson"},
      {"name": "London tube stations", url: "//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>