Botanical Barcode (Tess of the d'Urbervilles)

This visual is a botanical barcode of all the mentions of flora in Thomas Hardy's 1891 novel Tess of the d'Urbervilles 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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://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/1ksi3",  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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v3.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js