32:[] 30:{"title":"Making-of the dataviz Haters gonna hate - How to decrease downvotes.","cells":[{"id":0,"value":"md`# Making-of the dataviz Haters gonna hate - How to decrease downvotes.\n\nThis notebook drives you through the steps followed to analyze a dataset for the data visualization contest \"Visualize the Effect of hiding comment scores in /r/formula1\" (see [Contest announcement and rules](https://www.reddit.com/r/dataisbeautiful/comments/d0oh2m/battle_dataviz_battle_for_the_month_of_september/)).\n\nThis post is a detailed walk-through for curious people. The final result is [this image](https://mef.github.io/redditFormula1-data/img/dataviz-output-v2.png).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"toc('h2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`## Discovery\n\nThe dataset in scope of the analysis is a recording of comment scores evolution over time for three type of comments:\n\n* comments for which the score has been displayed at all time\n* comments for which the score has been hidden for 30 minutes\n* comments for which the score has been hidden for 60 minutes.\n\nSome information about this experiment conducted in redditFormula1 can be found [in this thread](https://www.reddit.com/r/formula1/comments/8uwv8m/mods_can_you_explain_the_recent_change_to_hide/).\n\nA quick glance at the dataset shows that most of the comments have a very low score, even after 120 minutes.\n\nLet's check this with a histogram.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"scoresAt120 = Object.assign(\n sourceData.map(function(record) {\n return record.score120;\n }),\n { x: \"Vote score at 120 min\", y: \"Comments\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"histogram\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"maxScore = d3.max(sourceData, d => d.score120)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`Wow, what a distribution. \n\nA very large majority of the comments has a low score at 120 minutes. Then, we have a very long tail of comments having scores going up to ${maxScore} points.\n\nLet's just filter out the scores below 10, and have another look at it, just to make this long tail more visible.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"votesDataAbove10 = Object.assign(sourceData.filter(function(record) {return record.score120 > 10}).map(function(record) {return record.score120}), {x: \"Vote score at 120 min\", y: \"Comments\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"histogramAbove10","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`\nThen, let's have a look at the negative scores.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"votesDataBelow0 = Object.assign(sourceData.filter(function(record) {return record.score120 < 0}).map(function(record) {return record.score120}), {x: \"Vote score at 120 min\", y: \"Comments\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"histogramBelow0","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"// TODO Fork histogram notebook to place legend below axis for better readability","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`\n\nWe will continue the analysis with the subset of data for which the comment score at 120 minutes is either above 10, or negative.\n\nThe assumption is that the comments with low score have not had much visibility, or have not caught much interest. Whether their score was hidden or not has a negligible impact.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"filteredData = sourceData.filter(function(record) {\n return record.score120 < 0 || record.score120 > 10;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\nThis discovery phase leaves us with a filtered dataset of ${filteredData.length.toLocaleString()} comments to analyze, instead of the original ${sourceData.length.toLocaleString()} present in the source dataset.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Exploration\n\nDuring the exploration phase, we'll check how the comments behave overtime, according to the group they belong to. This will show us whether there's something worth noticing in the data.\n\nLet's have a first glance at how the scores dataset look y displaying how the score evolves in time, for each comment.\n\nWe'll use three colors to differentiate the comments according to their group (\"amount of minutes the scores were hidden\").\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"html`\n

Group 0 - comments for which score was not hidden.

\n\n

Group 1 - comments for which score was hidden during 30 minutes.

\n\n

Group 2 - comments for which score was hidden during 60 minutes.

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`\n\nWe'll use transparency to maintain readability, since plenty of lines are likely to overlap. We'll also split each group in a separate chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"lineChartDataHidden0 = {\n const data = filteredData\n .filter(function(d) {\n return d.durationScoreHidden === 0;\n })\n .map(function(d, i) {\n let res = { color: colorScale(0), values: [] };\n\n res.values.push(0);\n res.values.push(d.score15);\n res.values.push(d.score30);\n res.values.push(d.score45);\n res.values.push(d.score60);\n res.values.push(d.score75);\n res.values.push(d.score90);\n res.values.push(d.score105);\n res.values.push(d.score120);\n\n return res;\n });\n\n return {\n y: \"Vote score\",\n series: data,\n dates: [0, 15, 30, 45, 60, 75, 90, 105, 120]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"lineChartDataHidden30 = {\n const data = filteredData\n .filter(function(d) {\n return d.durationScoreHidden === 30;\n })\n .map(function(d, i) {\n let res = { color: colorScale(1), values: [] };\n\n res.values.push(0);\n res.values.push(d.score15);\n res.values.push(d.score30);\n res.values.push(d.score45);\n res.values.push(d.score60);\n res.values.push(d.score75);\n res.values.push(d.score90);\n res.values.push(d.score105);\n res.values.push(d.score120);\n\n return res;\n });\n\n return {\n y: \"Vote score\",\n series: data,\n dates: [0, 15, 30, 45, 60, 75, 90, 105, 120]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"lineChartDataHidden60 = {\n const data = filteredData\n .filter(function(d) {\n return d.durationScoreHidden === 60;\n })\n .map(function(d, i) {\n let res = { color: colorScale(2), values: [] };\n\n res.values.push(0);\n res.values.push(d.score15);\n res.values.push(d.score30);\n res.values.push(d.score45);\n res.values.push(d.score60);\n res.values.push(d.score75);\n res.values.push(d.score90);\n res.values.push(d.score105);\n res.values.push(d.score120);\n\n return res;\n });\n\n return {\n y: \"Vote score\",\n series: data,\n dates: [0, 15, 30, 45, 60, 75, 90, 105, 120]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"//lineChartScoreHidden0","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"html` $\"\"$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"//lineChartScoreHidden30","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"html` $\"\"$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"//lineChartScoreHidden60","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"html` $\"\"$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`So, do we get anything interesting out of these?\n\nFor the comments of group 1, we cannot tell for clearly whether the slope tends to changes after 30 minutes.\n\nFor the comments of group 2, both the negative and positive score slopes seem to get a little bit steeper after the 60 minutes mark.\n\n\nLet's check how the averages look.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"lineChartDataAveragePositive = {\n const positiveScores = filteredData.filter(function(d) {\n return d.score120 > 0;\n });\n\n const groupAverages = computeAverageScore(positiveScores);\n\n //console.log(groupAverages)\n\n let res = [0, 1, 2].map(function(groupIndex) {\n let d = groupAverages[groupIndex].value;\n return {\n color: colorScale(groupIndex),\n values: [\n 0,\n d.avg15,\n d.avg30,\n d.avg45,\n d.avg60,\n d.avg75,\n d.avg90,\n d.avg105,\n d.avg120\n ]\n };\n });\n\n //console.log(res)\n\n return {\n y: \"Vote score\",\n series: res,\n dates: [0, 15, 30, 45, 60, 75, 90, 105, 120]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"negativeScores = filteredData.filter(function(d) {\n return d.score120 < 0;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"lineChartDataAverageNegative = {\n const groupAverages = computeAverageScore(negativeScores);\n\n //console.log(groupAverages)\n\n let res = [0, 1, 2].map(function(groupIndex) {\n let d = groupAverages[groupIndex].value;\n return {\n color: colorScale(groupIndex),\n values: [\n 0,\n d.avg15,\n d.avg30,\n d.avg45,\n d.avg60,\n d.avg75,\n d.avg90,\n d.avg105,\n d.avg120\n ]\n };\n });\n\n //console.log(res)\n\n return {\n y: \"Vote score\",\n series: res,\n dates: [0, 15, 30, 45, 60, 75, 90, 105, 120]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"lineChartAverageScorePositive","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`What do we see or learn here?\n\nThe slope for the first 15 minutes is steeper, for the three datasets. This shows that the comments are more visible when they are new, so they get more engagement. Then, the evolution of scores is pretty linear.\n\nThe comments for which the score was not hidden (blue line) have higher scores than the other ones. They keep a higher score than the other comment groups, even after 30 minutes and after 60 minutes. The head-start makes all the difference.\n\nThe slope of the orange line (score hidden during 30 minutes) remains quite steady, for the portion between 15 and 120 minutes.\n\nThe slope of the green line (score hidden during 60 minutes) gets a bit steeper after the scores get displayed.\n\nThe chart below extends the slopes for the portions during which scores were hidden (the dashed lines were created using the vector graphics editor software Inkscape).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"html` $\"\"$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"md`\n\nThe way how the line directsion change for groups 1 and 2 is not the same, so we cannot tell much about what happens _after_ scores start to be displayed.\n\nWhat can we tell so far? This:\n\n**When scores are hidden, good comments get less love**.\n\nLet's have a look at how the negative scores evolve over time.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"lineChartAverageScoreNegative","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`\nHere, for the three datasets, the evolution of scores does not look to be linear. The scores change less as the time passes.\n\nIn general, the comments for which score was not hidden have lower scores. This implies that showing negative scores gives an incentive to downvote. Reading the chart:\n\n* Group 1 negative comments have a score of roughly -1.3 at 30 minutes, versus -1.7 for the negative comments from group 0\n* Group 2 negative comments have a score of -1.75 at 60 minutes, versus -3.35 for the negative comments from group 0\n\n**When scores are hidden, poor comments get less hate**.\n\nNow, we have a catchy potential title for the data visualization post:\n\n> **Haters gonna hate - Hide scores to get less downvotes**.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`## Interpretation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`\n\nSo, do we have a story to tell? It seems so.\n\nHere's what we'll do:\n\n* Pick the exact average scores (positive and negative at 30 minutes for Group 0 and 1, and at 60 minutes for Group0 and Group 2, and measure how much they differ.\n* Highlight the differences in charts based on the line charts above.\n* Write a brief text to accompany the charts, and voilà.\n\nWe could definitely dig deeper:\n\n* Split comments into quartiles and check how each segment behaves.\n* Or, instead of filtering the comments based on the score they have at 120 minutes, check the scores at 30 minutes for Group 1, and the scores at 60 minutes for Group 2. Filter based on these.\n\nWe might get a different picture with these: perhaps the trend for the \"worst comments\" (score below, say, 40) might be different than the one for comments having score between 0 and -10.\n\nIn case you have the time and motivation, feel free to fork the notebook and extend the analysis :)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"negativeCommentsCount = countCommentsPerGroup(negativeScores)","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"relevantPositiveAverageScores = {\n return {\n group0: {\n at30Min: lineChartDataAveragePositive.series[0].values[2],\n at60Min: lineChartDataAveragePositive.series[0].values[4]\n },\n group1: {\n at30Min: lineChartDataAveragePositive.series[1].values[2]\n },\n group2: {\n at60Min: lineChartDataAveragePositive.series[2].values[4]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"relevantNegativeAverageScores = {\n return {\n group0: {\n at30Min: lineChartDataAverageNegative.series[0].values[2],\n at60Min: lineChartDataAverageNegative.series[0].values[4]\n },\n group1: {\n at30Min: lineChartDataAverageNegative.series[1].values[2]\n },\n group2: {\n at60Min: lineChartDataAverageNegative.series[2].values[4]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"deltaPercentagePositive30Min = (relevantPositiveAverageScores.group0.at30Min -\n relevantPositiveAverageScores.group1.at30Min) /\n relevantPositiveAverageScores.group1.at30Min","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"deltaPercentagePositive60Min = (relevantPositiveAverageScores.group0.at60Min -\n relevantPositiveAverageScores.group2.at60Min) /\n relevantPositiveAverageScores.group2.at60Min","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"deltaPercentageNegative30Min = (relevantNegativeAverageScores.group0.at30Min -\n relevantNegativeAverageScores.group1.at30Min) /\n relevantNegativeAverageScores.group1.at30Min","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"deltaPercentageNegative60Min = (relevantNegativeAverageScores.group0.at60Min -\n relevantNegativeAverageScores.group2.at60Min) /\n relevantNegativeAverageScores.group2.at60Min","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`## Result\n\nHere is the final output we can present.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"html` $\"\"$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Appendices\n\n### Misc. observations\n\nThis work has been done out of curiosity in order to get familiar with observablehq notebooks.\n\nRunning a data analysis for business purpose, we would have performed more operations on the source data, such as:\n\n* executed data profiling of each column of the dataset.\n* checked data quality to ensure that values are actually as we assumed they were.\n* focused more oncode structure and reusability.\n* implemented a fallback mechanism for the retrieval of the source dataset, so that a mirror of the file is used, whenever the main file would not be available.\n\n\n### data source\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"sourceData = d3.csv(\n 'https://raw.githubusercontent.com/mef/redditFormula1-data/master/commentdata.dat',\n function(d) {\n return {\n id: d['#timestamp'],\n durationScoreHidden: +d[' amount of minutes the scores were hidden'],\n score15: +d[' 0:15 score'],\n score30: +d[' 0:30 score'],\n score45: +d[' 0:45 score'],\n score60: +d[' 1:00 score'],\n score75: +d[' 1:15 score'],\n score90: +d[' 1:30 score'],\n score105: +d[' 1:45 score'],\n score120: +d[' 2:00 score']\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"import {toc} from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import { chart as histogram } with {\n scoresAt120 as data,\n histogramHeight as height\n} from \"@d3/histogram@233\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"import {chart as histogramAbove10} with {votesDataAbove10 as data, histogramHeight as height} from \"@d3/histogram@233\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"import {chart as histogramBelow0} with {votesDataBelow0 as data, histogramHeight as height} from \"@d3/histogram@233\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"import { chart as lineChartScoreHidden0 } with {\n lineChartDataHidden0 as data\n} from '@mef/simple-multi-line-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"import { chart as lineChartScoreHidden30 } with {\n lineChartDataHidden30 as data\n} from '@mef/simple-multi-line-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"import { chart as lineChartScoreHidden60 } with {\n lineChartDataHidden60 as data\n} from '@mef/simple-multi-line-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"import { chart as lineChartAverageScorePositive } with {\n lineChartDataAveragePositive as data\n} from '@mef/simple-multi-line-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import { chart as lineChartAverageScoreNegative } with {\n lineChartDataAverageNegative as data\n} from '@mef/simple-multi-line-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"histogramHeight = 360","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"function countCommentsPerGroup(data) {\n return d3\n .nest()\n .key(function(d) {\n return d.durationScoreHidden;\n })\n .rollup(function(v) {\n return v.length;\n })\n .entries(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"function computeAverageScore(data) {\n return d3\n .nest()\n .key(function(d) {\n return d.durationScoreHidden;\n })\n .rollup(function(v) {\n return {\n avg15: d3.mean(v, function(d) {\n return d.score15;\n }),\n avg30: d3.mean(v, function(d) {\n return d.score30;\n }),\n avg45: d3.mean(v, function(d) {\n return d.score45;\n }),\n avg60: d3.mean(v, function(d) {\n return d.score60;\n }),\n avg75: d3.mean(v, function(d) {\n return d.score75;\n }),\n avg90: d3.mean(v, function(d) {\n return d.score90;\n }),\n avg105: d3.mean(v, function(d) {\n return d.score105;\n }),\n avg120: d3.mean(v, function(d) {\n return d.score120;\n })\n };\n })\n .entries(data);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}