Emoji Timeline of cultural references in Haruki Murakami's The Elephant Vanishes with on click descrrption.
Data source: Reddit discussion compiled by MufasaSimba
forked from Jverma's block: Emoji Timeline for Cultural References in Murakami
xxxxxxxxxx
<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.v4.min.js"></script>
<script src="d3moji.js"></script>
<h2 class="main_title">Cultural References in Haruki Murakami's <i>The Elephant Vanishes</i></h2>
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 3460 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.domain([1,285])
.range([0, width]);
var xAxis = d3.axisBottom()
.scale(x)
.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.v4.min.js to a secure url
https://d3js.org/d3.v4.min.js