Emoji Timeline for Cultural References in Murakami

Emoji Timeline of cultural references in Haruki Murakami's The Elephant Vanishes with on click descrrption.

Data source: Reddit discussion compiled by MufasaSimba

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.main_title{
  font: 25px sans-serif;
  position: absolute;
  left: 30%;
  color: steelblue;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: none;
}

.table{
  font: 15px sans-serif;
  position: absolute;
  left: 5%;
  top: 20%;
}

.tooltip{
		position: absolute;
		width: 100px;
		height: 30px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightgreen;
    border: 2px;
    border-radius: 5px;
		pointer-events: none;
	}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3moji.js"></script> 
<h2 class="main_title">Cultural References in Haruki Murakami's <i>The Elephant Vanishes</i></h2>

var x = d3.scale.linear()
    .domain([1,285])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(100);

var tooltip = d3.select("body")
  .append("div")  
  .attr("class", "tooltip")              
  .style("opacity", 0);

var refrences = [{"Reference": "Literature", "Count": 14}, {"Reference": "Music", "Count": 35},{"Reference": "Movies", "Count": 6}, {"Reference": "Cars", "Count":3}, {"Reference": "Alcohol", "Count": 3}, {"Reference": "Cigarette", "Count":2}];

var tabulate = function (data,columns) {
  var table = d3.select('body').append('table')
            .attr("class", "table");

var thead = table.append('thead')
  var tbody = table.append('tbody')

thead.append('tr')
    .selectAll('th')
      .data(columns)
      .enter()
    .append('th')
      .text(function (d) { return d })

var rows = tbody.selectAll('tr')
      .data(data)
      .enter()
    .append('tr')

var cells = rows.selectAll('td')
      .data(function(row) {
        return columns.map(function (column) {
          return { column: column, value: row[column] }
        })
      })
      .enter()
    .append('td')
      .text(function (d) { return d.value })

return table;
}

var columns = ["Reference", "Count"];
tabulate(refrences, columns);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", 30)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Page Number");

d3.json('elephant_vanishes.json', function(error, data){
  data.forEach(function(d){
    d.name = d.name;
    d.type = d.type;
    d.page = d.page.split('-');
  });
  svg.selectAll("emojis")
    .data(data)
    .enter().append('emoji')
    .attr('symbol', function(d){return d.type})
    .attr('width', 15)
    .attr('height', 15)
    .attr('x', function(d){return x(d.page[0])})
    .attr('y', function(d){return height - 50*d.page[1]})
    .on("click", function(d){
      tooltip.transition()
        .duration(200)
        .style("opacity", .9);
      tooltip.html(d.name)
        .style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY - 20) + "px");
    })
})
</script>

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

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