| height: 960 |
Trying to put something together that makes annotating graphics with HTML easier.
One nice geoprocessing tool I discovered while making this is the mapshaper command-line program The API is easy to figure out and you can do a lot of vector data transformations with it.
Icons from Font Awesome. The map projection is a slight adaptation from the one in this block.
| .fa.control, | |
| .annotation .edit-button { | |
| cursor: pointer; | |
| } | |
| .fa.control:hover, | |
| .annotation .edit-button:hover { | |
| color: grey; | |
| } | |
| .annotations { | |
| position: absolute; | |
| left: 0px; | |
| top: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .annotation { | |
| position: absolute; | |
| } | |
| .annotation .edit-button { | |
| position: absolute; | |
| right: -3em; | |
| top: -3em; | |
| padding: 2em; | |
| } | |
| .annotation .controls { | |
| position: absolute; | |
| left: 0px; | |
| top: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .annotation .control { | |
| position: absolute; | |
| } | |
| .annotation .control.done-button { | |
| right: -1em; | |
| top: -1em; | |
| } | |
| .annotation .control.delete-button { | |
| right: -1em; | |
| top: 0.33em; | |
| } | |
| .annotation .control.move-button { | |
| left: -1em; | |
| top: -1em; | |
| } | |
| .annotation .control.resize-button { | |
| right: -0.5em; | |
| bottom: -0.5em; | |
| } | |
| .annotation textarea.control { | |
| background-color: rgba(255, 255, 255, 0.75); | |
| } | |
| .annotation .hidden { | |
| display: none; | |
| } |
| [ | |
| { | |
| "html": "<div class=\"skewed-x-20\" style=\"width: 70px; height: 440px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.1);\">\n\n<div>", | |
| "x": 393, | |
| "y": 261, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"stroked-text\">\n<h4 class=\"minor-header\">Appalachia stays cool</h4>\n<p class=\"size-12\">\nThe elevation of the Appalachian mountains keeps the heat down. Highs were in the mid-70's in the elevated parts of the region.\n</p>\n</div>", | |
| "x": 429, | |
| "y": 612, | |
| "editable": false, | |
| "width": 155 | |
| }, | |
| { | |
| "html": "<div class=\"size-16 faded-9 stroked-text\">Louisville</div>", | |
| "x": 187, | |
| "y": 516, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-14 faded-8 stroked-text\">Indianapolis</div>", | |
| "x": 162, | |
| "y": 456, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-12 faded-6 stroked-text\">Detroit</div>", | |
| "x": 240, | |
| "y": 304, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-12 faded-8 stroked-text\">Chicago</div>", | |
| "x": 99, | |
| "y": 433 | |
| }, | |
| { | |
| "html": "<div class=\"size-12 faded-6 stroked-text\">Milwaukee</div>", | |
| "x": 28, | |
| "y": 395, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-18 stroked-text\">Charlotte</div>", | |
| "x": 521, | |
| "y": 535, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-18 stroked-text\">Jacksonville</div>", | |
| "x": 548, | |
| "y": 928, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-14 faded-8 stroked-text\">Columbus</div>", | |
| "x": 310, | |
| "y": 372, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-16 faded-9 stroked-text\">Washington</div>", | |
| "x": 610, | |
| "y": 308, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-14 faded-8 stroked-text\">Baltimore</div>", | |
| "x": 615, | |
| "y": 267, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-14 faded-7 stroked-text\">Philadelphia</div>", | |
| "x": 656, | |
| "y": 226, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-12 faded-6 stroked-text\">New York</div>", | |
| "x": 678, | |
| "y": 190, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-10 faded-4 stroked-text\">Boston</div>", | |
| "x": 684, | |
| "y": 138, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-18 faded-9 stroked-text\">Raleigh</div>", | |
| "x": 628, | |
| "y": 441, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-18 stroked-text\">Atlanta</div>", | |
| "x": 336, | |
| "y": 775, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-16 faded-9 stroked-text\">Virginia Beach</div>", | |
| "x": 609, | |
| "y": 354, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"foot-note\">\nWeather data from <a href=\"https://www.ncdc.noaa.gov/cdo-web/datasets\">NOAA</a>\n</div>", | |
| "x": 819, | |
| "y": 940, | |
| "width": 188, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"text stroked-text\">\n<p>\nAnnotating web graphics with HTML is pretty tedious. The best option right now seems to be Adobe Illustrator coupled with <a href=\"http://ai2html.org/\">ai2html</a>. I should probably just bite the bullet and get Adobe Illustrator. In any case, it would be nice to have a free option, so I've cobbled together something that let's you edit HTML annotations in-place. It's rough but works.\n</p>\n<p>\nHover the annotation on this map and click on the edit button that appears (<i class=\"fa fa-pencil-square-o\"></i>). You edit the inner HTML in the text box. Drag <i class=\"fa fa-arrows\"></i> to re-position and <i class=\"fa fa-arrows-h\"></i> to change the width. Click <i class=\"fa fa-trash-o\"></i> to delete the annotation. Click <i class=\"fa fa-check\"></i> when you're done editing.\n</p>\n</div>", | |
| "x": 720, | |
| "y": 584, | |
| "width": 220, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"main-text\">\n<p class=\"header\">Summertime Heat</p>\n<p class=\"subheader\">Daily high temperatures, July 22, 2016</p>\n<div class=\"text stroked-text\">\n<p>\nThis July has been brutal here in Washington. I've been stuck indoors and got to thinking about weather data. I found station-level data from <a href=\"https://www.ncdc.noaa.gov/cdo-web/datasets\">NOAA</a> and thought I'd put together a map that shows how hot it got across the eastern US.\n</p>\n<p>\n\n</p>\n</div>\n</div>", | |
| "x": 45, | |
| "y": 37, | |
| "width": 268, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div class=\"size-10 faded-6 stroked-text\">Even the motherland is pretty hot</div>", | |
| "x": 39, | |
| "y": 344, | |
| "editable": false, | |
| "width": 54 | |
| }, | |
| { | |
| "html": "<div class=\"size-10 faded-4 stroked-text\">\nLet's move to Maine\n</div>", | |
| "x": 635, | |
| "y": 68, | |
| "editable": false, | |
| "width": 61 | |
| }, | |
| { | |
| "html": "<div class=\"stroked-text\">\n<div class=\"size-16 faded-9\">Daily High Temperature\n</div>\n<div class=\"size-10 faded-7\">Degrees Fahrenheit</div>", | |
| "x": 850, | |
| "y": 274, | |
| "editable": false, | |
| "width": 114 | |
| }, | |
| { | |
| "html": "<div style=\"text-align: center;\">\n<div class=\"size-12 stroked-text\">Mt. Crest, TN</div>\n<div style=\"color: #ccc;\" class=\"size-22\">↓</div>\n</div>", | |
| "x": 203, | |
| "y": 637, | |
| "editable": false | |
| }, | |
| { | |
| "html": "<div style=\"text-align:right;\" class=\"stroked-text\">\n<h4 class=\"minor-header\">Bunk observations</h4>\n<p class=\"size-12\">\nIf the station data is to be trusted, the daily high was just 74°F at the Lafayette, TN station and 70°F at the Mt. Crest, TN station. These seem like a bad readings—the high in these areas hovered around 90°F the previous three days.\n</p>\n</div>", | |
| "x": 28, | |
| "y": 660, | |
| "editable": false, | |
| "width": 175 | |
| }, | |
| { | |
| "html": "<div style=\"text-align: center;\">\n<div class=\"size-12 stroked-text\">Lafayette, TN</div>\n<div style=\"color: #ccc;\" class=\"size-22\">↓</div>\n</div>", | |
| "x": 151, | |
| "y": 592, | |
| "editable": false, | |
| "width": 76 | |
| }, | |
| { | |
| "html": "<div class=\"size-12 faded-7 stroked-text\">\n<p>\nArea is partitioned by the closest observation station (see <a href=\"https://github.com/d3/d3-voronoi\">d3-voronoi</a>).\n</p>\n</div>", | |
| "x": 789, | |
| "y": 159, | |
| "editable": false, | |
| "width": 147 | |
| }, | |
| { | |
| "html": "<div class=\"size-12 faded-9 stroked-text\">\nAlmost 100°F in New York City and its suburbs.\n</div>", | |
| "x": 565, | |
| "y": 160, | |
| "editable": false, | |
| "width": 95 | |
| } | |
| ] |
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
