This visual is a botanical barcode of all the mentions of flora in Mary Webb’s 1917 novel Gone to Earth from start to finish. You can submit feedback or questions and read more about the larger project here.
Last active
March 23, 2016 15:06
-
-
Save peakera/18375facbcbeb458824d to your computer and use it in GitHub Desktop.
Botanical Barcode (Gone to Earth)
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 1em sans-serif; | |
| } | |
| /*.axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| }*/ | |
| .bar { | |
| fill: #00cc00; | |
| } | |
| .bar:hover { | |
| fill: #008f00; | |
| } | |
| /*.x.axis path { | |
| display: none; | |
| }*/ | |
| .d3-tip { | |
| line-height: 1; | |
| word-wrap: break-word; | |
| /* font-weight: bold;*/ | |
| width: 40%; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 1em; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
| <script> | |
| var margin = {top: 40, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 800 - margin.top - margin.bottom; | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<span style='color:white'>" + "\"..." + d.beginContext + "</span><span style='color:yellow'>" + " " + d.word2 + "</span> <span style='color:white'>" + d.endContext + "...\"" + "<br/>" + "<strong>Frequency: </strong>" + d.word2freq + "</span>"; | |
| }) | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| svg.call(tip); | |
| d3.json("https://api.myjson.com/bins/2qcpz", function(error, json) { | |
| // var max = d3.max(d3.values(json, function(d){return d.location2;})); | |
| var max = d3.max(json, function(d) { return Number(d.location2); }); | |
| console.log(max); | |
| svg.selectAll(".bar") | |
| .data(json) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return (d.location2/max * 500); }) | |
| .attr("width", 3) | |
| .attr("y", 150) | |
| .attr("height", 500) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide); | |
| }); | |
| </script> |
Released under the GNU General Public License, version 3.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment