{"id":54,"date":"2022-04-29T11:47:10","date_gmt":"2022-04-29T11:47:10","guid":{"rendered":"https:\/\/edcarron.com\/?p=54"},"modified":"2024-02-19T11:54:45","modified_gmt":"2024-02-19T11:54:45","slug":"simpsons-most-talkative-characters","status":"publish","type":"post","link":"https:\/\/edcarron.com\/?p=54","title":{"rendered":"Simpsons Most Talkative Characters"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Document<\/title>\n    <script src=\"\/\/d3js.org\/d3.v4.min.js\"><\/script>\n    <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3-queue\/3.0.4\/d3-queue.min.js\"><\/script>\n    <style>\n      html,\n      body,\n      #chart {\n        height: 500px;\n        width: 100%;\n        margin: 0;\n      }\n      html {\n        background-color: white;\n      }\n      text {\n        font-family: \"Source Code Pro\";\n        font-size: 14px;\n        fill: slategrey;\n        \n      }\n      .axis path,\n      .axis line {\n        fill: none;\n        stroke: slategrey;\n        shape-rendering: crispEdges;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div id=\"slider\" style=\"padding: 10px\">\n\t\t<input type='range'min='0' max='500' step='1' value= '0' id='rangeSlider' \/> \n        \n\t<button type=\"button\" id=\"start\">start<\/button>\n\t<button type=\"button\" id=\"stop\">stop<\/button>\n    <h2 id=\"season_counter\"><\/h2>\n    <div id=\"chart\"><\/div>\n    <script>\n      var width = document.getElementById(\"chart\").clientWidth;\n      var height = document.getElementById(\"chart\").clientHeight;\n\n      var margin = {\n        top: 10,\n        bottom: 155,\n        left: 70,\n        right: 20,\n      };\n\n      var svg = d3\n        .select(\"#chart\")\n        .append(\"svg\")\n        .attr(\"width\", width)\n        .attr(\"height\", height)\n        .append(\"g\")\n        .attr(\n          \"transform\",\n          \"translate(\" + margin.left + \",\" + margin.right + \")\"\n        );\n\n     var title = svg\n            .append(\"text\")\n            .attr(\"class\", \"title\")\n            .attr(\"x\", width \/ 2)\n            .attr(\"y\", 0 - margin.top \/ 2)\n            .attr(\"text-anchor\", \"middle\")\n            .text(\"start\");\n        \n    svg\n        .append(\"text\")\n        .attr(\"transform\", \"rotate(-90)\")\n        .attr(\"y\", 0 - margin.left)\n        .attr(\"x\", 0 - height \/4)\n        .attr(\"dy\", \"1em\")\n        .style(\"text-anchor\", \"middle\")\n        .text(\"Lines Spoken\");\n\n      width = width - margin.left - margin.right;\n      height = height - margin.top - margin.bottom;\n\n      var data = {};\n\n      var x_scale = d3.scaleBand().rangeRound([0, width]).padding(0.1);\n\n      var y_scale = d3.scaleLinear().range([height, 0]);\n\n      var colour_scale = d3\n        .scaleQuantile()\n        .range([\n          \"#ffbb22\",\n          \"#11bb66\",\n          \"#8899ff\",\n          \n          \"#ec7014\",\n          \"#ff4411\"\n          \n        ]);\n        \/\/ .range([\n        \/\/   \"#ffffe5\",\n        \/\/   \"#fff7bc\",\n        \/\/   \"#fee391\",\n        \/\/   \"#fec44f\",\n        \/\/   \"#fe9929\",\n        \/\/   \"#ec7014\",\n        \/\/   \"#cc4c02\",\n        \/\/   \"#993404\",\n        \/\/   \"#662506\",\n        \/\/ ]);\n\n      var y_axis = d3.axisLeft(y_scale);\n      var x_axis = d3.axisBottom(x_scale);\n\n      svg.append(\"g\")\n        .attr(\"class\", \"x axis\")\n        .attr(\"transform\", \"translate(0,\" + height + \")\")\n        .call(x_axis)\n        .selectAll(\"text\")  \n            .style(\"text-anchor\", \"end\")\n            .attr(\"dx\", \"-.8em\")\n            .attr(\"dy\", \".15em\")\n            .attr(\"transform\", \"rotate(-65)\" );\n\n      svg.append(\"g\").attr(\"class\", \"y axis\");\n\n      function draw(index) {\n        var episode_data = data[index];\n        var character_data = episode_data[\"character_data\"];\n\n        d3.select(\"#season_counter\").text(\"Season: \" + episode_data[\"season\"])\n        title.text(episode_data[\"ep_title\"] + \":      Aired \" + episode_data['original_air_date']);\n\n        var t = d3.transition().duration(10);\n\n        var characters = character_data.map(function (d) {\n          return d.character;\n        });\n        x_scale.domain(characters);\n\n        var max_value = d3.max(character_data, function (d) {\n          return +d.lines;\n        });\n\n        y_scale.domain([0, max_value]);\n        colour_scale.domain([0, max_value]);\n\n        var bars = svg.selectAll(\".bar\").data(character_data);\n\n        bars.exit().remove();\n\n        var new_bars = bars\n          .enter()\n          .append(\"rect\")\n          .attr(\"class\", \"bar\")\n          .attr(\"x\", function (d) {\n            return x_scale(d.character);\n          })\n          .attr(\"width\", x_scale.bandwidth())\n          .attr(\"y\", height)\n          .attr(\"height\", 0);\n\n        new_bars\n          .merge(bars)\n          .transition(t)\n          .attr(\"y\", function (d) {\n            return y_scale(+d.lines);\n          })\n          .attr(\"height\", function (d) {\n            return height - y_scale(+d.lines);\n          })\n          .attr(\"fill\", function (d) {\n            return colour_scale(+d.lines);\n          });\n\n        svg.select(\".x.axis\").call(x_axis).selectAll(\"text\")  \n            .style(\"text-anchor\", \"end\")\n            .attr(\"dx\", \"-.8em\")\n            .attr(\"dy\", \".15em\")\n            .attr(\"transform\", \"rotate(-65)\" );;\n\n        svg.select(\".y.axis\").transition(t).call(y_axis);\n        }\n\n        \/\/Run the update function when the slider is changed\n        d3.select('#rangeSlider').on('input', function() {\n        draw(this.value);\n        });\n\n        var myTimer;\n        d3.select(\"#start\").on(\"click\", function() {\n            title.style(\"visibility\", \"hidden\")\n        clearInterval (myTimer);\n        myTimer = setInterval (function() {\n            var b= d3.select(\"#rangeSlider\");\n        var t = (+b.property(\"value\") + 1) % (+b.property(\"max\") + 1);\n        if (t == 0) { t = +b.property(\"min\"); }\n        b.property(\"value\", t);\n        draw (t);\n        }, 100);\n        });\n\n        d3.select(\"#stop\").on(\"click\", function() {\n            title.style(\"visibility\", \"visible\")\n        clearInterval (myTimer);\n        });\n\n\n\n        d3.queue()\n        .defer(d3.csv, \"\/myjson\/simpsonsData\/chartData.csv\")\n        .await(function (error, d) {\n            d3.select(\"#rangeSlider\").property(\"max\", d.length);\n\n            d.sort(function (a, b) {\n            return new Date(a.original_air_date) - new Date(b.original_air_date);\n            });\n\n            for (let i = 0; i < d.length; i++) {\n            let raw_episode_data = d[i];\n\n            let keys = Object.keys(raw_episode_data);\n\n            let chart_data = { character_data: [] };\n\n            for (const key of keys) {\n                if (key == \"original_air_date\") {\n                chart_data[\"original_air_date\"] =\n                    raw_episode_data[\"original_air_date\"];\n                } else if (key == \"ep_title\") {\n                chart_data[\"ep_title\"] = raw_episode_data[\"ep_title\"];\n                } else if (key == \"season\") {\n                chart_data[\"season\"] = raw_episode_data[\"season\"];\n                } else {\n                if (i == 0) {\n                    d[i][key] = parseInt(d[i][key]);\n                } else {\n                    d[i][key] = parseInt(d[i][key]) + d[i - 1][key];\n                }\n                chart_data[\"character_data\"].push({\n                    character: key,\n                    lines: raw_episode_data[key],\n                });\n                }\n            }\n\n            data[i] = chart_data;\n            }\n            draw(0);\n        });\n\n      \n    <\/script>\n  <\/body>\n<\/html>\n\n\n\n<p>The first episode of The Simpsons aired on 17 December 1989: titled \u201cSimpsons Roasting On An Open Fire\u201d. It wasn\u2019t meant to be the series debut, but due to animation issues with the intended instalment \u2013 <em>Some Enchanted Evening <\/em>\u2013 they were forced to kick the show off in an unusual manner with a Christmas special. It was an instant hit and, 725 episodes and a feature length film later, the show is still on the air \u2013 though many fans maintain that the show\u2019s quality has been on a steep decline since its tenth season.<\/p>\n\n\n\n<p>The scripts of the first 26 seasons have been released as a dataset, allowing the show to be dissected and analysed in ways previously impossible. For example only three of the top twenty characters with the most lines in the show are female.<\/p>\n\n\n\n<p>The average Simpsons character\u2019s dialogue can be understood by a 12 year old, represented as a 6.3 on the Dale-Chall readability scale. The Simpsons family itself could be understood by the average American 11 year old \u2013 which makes sense as they speak the most lines and the show aimed to have the widest appeal possible. Only a handful of characters had a Dale-Chall score above 7, meaning that their dialogue requires the literacy of a 15 year old: news reader Kent Brockman, Mayor Quimby and actor Troy McClure. Surprisingly two of the show\u2019s most intellectual characters were not among this higher echelon: Professor Frink and Sideshow Bob. Although Frink was close with a score of 6.9.<\/p>\n\n\n\n<p>The data also reveals that every episode has at least one unique speaking character and scene location, a testament to The Simpson\u2019s never ending originality.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Document start stop The first episode of The Simpsons aired on 17 December 1989: titled \u201cSimpsons Roasting On An Open Fire\u201d. It wasn\u2019t meant to be the series debut, but due to animation issues with the intended instalment \u2013 Some Enchanted Evening \u2013 they were forced to kick the show off in an unusual manner&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/posts\/54"}],"collection":[{"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=54"}],"version-history":[{"count":6,"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/posts\/54\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}