Skip to content

Instantly share code, notes, and snippets.

@peakera peakera/LICENSE.md
Last active Mar 23, 2016

Embed
What would you like to do?
Botanical Barcode (Gone to Earth)

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.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.