Built with blockbuilder.org
Created
July 21, 2017 22:06
-
-
Save anonymous/1815067ed5ec5a2df8e1a4a0eb22b395 to your computer and use it in GitHub Desktop.
fresh block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>simple open location code builder</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| div.group { | |
| height: 100px; | |
| } | |
| svg { | |
| fill: #888; | |
| height: 400; | |
| width: 400; | |
| } | |
| rect.item { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3>literate pluscodes (OLC) guide</h3> | |
| <p> | |
| in this block we walk through the construction of an Open Location Code / pluscode, using just geometry | |
| </p> | |
| <div class="group"> | |
| <svg class="four"></svg> | |
| <aside>top level</aside> | |
| </div> | |
| <div class="group"> | |
| <svg class="four"></svg> | |
| <aside>zoom one</aside> | |
| </div> | |
| <div class="group"> | |
| <svg class="four"></svg> | |
| <aside>zoom two</aside> | |
| </div> | |
| <div class="group"> | |
| <svg class="four"></svg> | |
| <aside>zoom three</aside> | |
| </div> | |
| <div class="group"> | |
| <svg class="four"></svg> | |
| <aside>zoom four</aside> | |
| </div> | |
| <div class="group"> | |
| <svg class="twenty"></svg> | |
| <aside>final detail</aside> | |
| </div> | |
| <footer></footer> | |
| <script> | |
| // 20 row and column keys | |
| let keys = ('23456789CFGHJMPQRVWX').split('') | |
| // default selected grid for each level | |
| let defaultGrid = '22' | |
| // array to track the currently selected | |
| let pluscode = ['22','22','22','22','22','2'] | |
| // plus code delimiter | |
| let plusDelim = '+' | |
| // height and width for grids | |
| let height = 400 | |
| let width = 400 | |
| let itemWidth = height / keys.length | |
| // setup the 20x20 grids | |
| let fullGrids = d3.selectAll("svg.four") | |
| // rows | |
| fullGrids.selectAll("g.row") | |
| .data(keys) | |
| .enter().append("g") | |
| .classed("row", true) | |
| .attr("height", itemWidth) | |
| .attr("width", width) | |
| .attr("x", 0) | |
| .attr("y", (d, i) => i * itemWidth) | |
| .attr("row-num", (d, i) => i) | |
| .selectAll("rect.item") | |
| .data(keys) | |
| .enter().append("rect") | |
| .classed("item", true) | |
| .attr("height", itemWidth) | |
| .attr("width", itemWidth) | |
| .attr("x", (d, i) => i * itemWidth) | |
| .attr("y", function(d, i) { | |
| console.log(this.parentNode); | |
| }) | |
| // .append("text") | |
| // .attr("x", (d, i) => i * itemWidth) | |
| // .attr("y", (d, i) => d3.select(this.parentNode).data()) | |
| // .text((d, i) => d + d3.select(this.parentNode).data()) | |
| // .on('click', () => alert(d3.select(this).datum())) | |
| // graticule | |
| // fullGrids | |
| // .append("g").classed("graticule", true) | |
| // .selectAll("line") | |
| // | |
| // setup the 4x5 grid | |
| let detailGrids = d3.selectAll("svg.twenty") | |
| // select grid items based on the current pluscode | |
| // update the display | |
| // keysToPluscode : Array(String) -> String -> String | |
| function keysToPluscode(keys, delim) { | |
| return keys.slice(0, 4).join() + delim + keys.slice(4).join() | |
| } | |
| // pluscodeToLatLon : String -> Obj { lat: Float, lon: Float } | |
| function pluscodeToLatLon(code) { | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment