A simple interactive visualization of the monthly ranking (number of mentions) of those emojis that reached the top 5 at least once, from 01-2015 until 11-2017.
The number of emojis with those characteristics were about 20. Some of them reached the top5 only once. Some could have also overlapped (reached the same position the same month).
This visualization was prepared for this article in Medium freeCodeCamp.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| background-color: grey; | |
| } | |
| .x-axis path, | |
| .x-axis line { | |
| fill: none; | |
| stroke: white; | |
| shape-rendering: crispEdges; | |
| } | |
| .y-axis path, | |
| .y-axis line { | |
| fill: none; | |
| stroke: none; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 9px; | |
| fill: white; | |
| } | |
| rect{ | |
| rx: 5px; | |
| ry: 5px; | |
| } | |
| </style> | |
| <div id="heatmap"></div> | |
| <div> | |
| <form> | |
| <label>Emojis</label> | |
| <select id="choice" name="test"> | |
| </select> | |
| </form> | |
| </div> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var itemSize = 22, | |
| cellSize = itemSize - 1, | |
| margin = {top: 70, right: 50, bottom: 70, left: 70}; | |
| var width = 950 - margin.right - margin.left, | |
| height = 300 - margin.top - margin.bottom; | |
| // set the ranges | |
| var xScale = d3.scaleBand().range([0, width]); | |
| var xScale_axis = d3.scaleTime().range([0, width]); | |
| var yScale = d3.scaleBand().range([0,height]); | |
| // append the svg object to the body of the page | |
| // appends a 'group' element to 'svg' | |
| // moves the 'group' element to the top left margin | |
| var svg = d3.select("#heatmap").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 + ")"); | |
| d3.json('https://raw.githubusercontent.com/evaristoc/fCC_emojis/master/views/emojis_viz_final_corr.json', function(err, data){ | |
| if (err) { | |
| console.log(err) | |
| } | |
| var datalist = [] | |
| function ranking_conv(v){ | |
| switch(v){ | |
| case 1: | |
| return "first"; | |
| case 2: | |
| return "second"; | |
| case 3: | |
| return "third"; | |
| case 4: | |
| return "fourth"; | |
| case 5: | |
| return "fihth"; | |
| } | |
| } | |
| for (var carita in data) { //keep those with billboard only | |
| if (data[carita]['data']['billboard'] == 'false') { | |
| delete data[carita]; | |
| } | |
| } | |
| for (var carita in data) { | |
| delete data[carita]['2014-Dec']; | |
| delete data[carita]['2017-12']; | |
| var indates = [] | |
| for (c in data[carita]) { | |
| if (c != "data") { | |
| indates.push({"date":c, "count": data[carita][c]["count"], "ranking":ranking_conv(data[carita][c]["order"])}) | |
| delete data[carita][c]; | |
| } | |
| } | |
| data[carita]['dates'] = indates; | |
| data[carita]['bashunicode'] = carita; | |
| datalist.push(data[carita]) | |
| } | |
| datalist = datalist.sort(function(a, b){return b.data.total - a.data.total}); | |
| //Generate a form with d3.js - dropdown option selection | |
| var options = datalist.map(function(d){return d.bashunicode+' '+d.data.alias},[]) | |
| d3 | |
| .select('#choice') | |
| .selectAll('option') | |
| .data(options) | |
| .enter() | |
| .append("option") | |
| .attr("value", function(d){return d}) | |
| .text(function(d){return d}); | |
| //Some (hardcoded) variables for the Axes | |
| var rankings = ["first","second","third","fourth","fihth"] | |
| var dates = datalist[0]["dates"].map(function(d){return d.date}) | |
| //Parametrization of layouts and Axes | |
| xScale | |
| .domain(dates) | |
| xScale_axis | |
| .domain([new Date("2015-01"), new Date("2017-12")]) | |
| yScale | |
| .domain(rankings) | |
| // Add the x Axis | |
| svg.append("g") | |
| .attr("class","axis x-axis") | |
| .attr("transform", "translate("+ cellSize/2 +"," + height + ")") | |
| .call(d3.axisBottom(xScale_axis).tickFormat(d3.timeFormat("%Y-%m")).ticks(10)) | |
| // Add the y Axis | |
| svg.append("g") | |
| .attr("class","axis y-axis") | |
| .attr("transform", "translate(0, 0)") | |
| .call(d3.axisLeft(yScale)) | |
| // Matrix background | |
| var matrixbackground = [] | |
| for(var i = 0; i < dates.length; i++) { | |
| for(var j = 0; j < rankings.length; j++){ | |
| matrixbackground.push({"date":dates[i],"ranking":rankings[j]}) | |
| } | |
| } | |
| //data binding | |
| var cells = svg | |
| .selectAll('rect') | |
| //enter | |
| var background = cells | |
| .data(matrixbackground, function(d, i){return d}) | |
| .enter() | |
| .append('g') | |
| .attr('class', 'back-cells') | |
| background | |
| .append('rect') | |
| .attr('class', 'back-cell') | |
| .attr('width', cellSize) | |
| .attr('height', cellSize + 5) | |
| .attr('y', function(d) { return yScale(d.ranking); }) | |
| .attr('x', function(d) { return xScale(d.date); }) | |
| var used_emoji = datalist[0]; | |
| var emoji_dates = used_emoji["dates"]; | |
| var emoji_data = used_emoji["data"]; | |
| var emo_cells = cells | |
| //background | |
| .data(emoji_dates, function(d, i){delete d.count; return d}) | |
| .enter() | |
| .append('g') | |
| .attr('class', 'emo-cells') | |
| var emo_img = emo_cells | |
| .append("image") | |
| .attr('class', 'emo-img') | |
| .attr('width', function(d) { if(d.ranking != undefined ) return 20}) | |
| .attr('height', function(d) { if(d.ranking != undefined ) return 20}) | |
| .style('opacity',0) | |
| .attr("xlink:href",function(d){if(d.ranking != undefined) return emoji_data["Apple_img"]}) | |
| emo_img | |
| .transition() | |
| .duration(1000) | |
| .delay(function(d,i){return i*20}) | |
| .style("opacity",100) | |
| .attr('y',function(d) { if(d.ranking != undefined ) return yScale(d.ranking)+2; }) | |
| .attr('x',function(d) { if(d.ranking != undefined ) return xScale(d.date); }) | |
| var update = function(emoji_dt, emoji_dat){ | |
| emo_cells | |
| .selectAll("image") | |
| .transition() | |
| .duration(1500) | |
| .delay(function(d,i){return i*10}) | |
| .attr('y', 0) | |
| .attr('x', 0) | |
| .style("opacity",0) | |
| .remove(); | |
| emo_cells = cells | |
| .data(emoji_dt, function(d, i){delete d.count; return d}) | |
| .enter() | |
| .append('g') | |
| .attr('class', 'emo-cells') | |
| emo_img = emo_cells | |
| .append("image") | |
| .attr('class', 'emo-img') | |
| .attr('width', function(d) { if(d.ranking != undefined ) return 20}) | |
| .attr('height', function(d) { if(d.ranking != undefined ) return 20}) | |
| .style('opacity',0) | |
| .attr("xlink:href",function(d){if(d.ranking != undefined) return emoji_dat["Apple_img"]}) | |
| emo_img | |
| .transition() | |
| .duration(1000) | |
| .delay(function(d,i){return 100 + i*20}) | |
| .style("opacity",100) | |
| .attr('y',function(d) { if(d.ranking != undefined ) return yScale(d.ranking)+2; }) | |
| .attr('x',function(d) { if(d.ranking != undefined ) return xScale(d.date); }) | |
| } | |
| d3.select("form").on("change",function(ev){ | |
| var ch = document.getElementById("choice").value; | |
| for(var i = 0; i < datalist.length; i++){ | |
| if (datalist[i]["bashunicode"] == ch.split(" ")[0]) { | |
| break | |
| } | |
| } | |
| update(datalist[i]["dates"],datalist[i]["data"]) | |
| d3.event.preventDefault(); | |
| }) | |
| }) | |
| </script> |