{"id":58,"date":"2022-04-29T12:05:46","date_gmt":"2022-04-29T12:05:46","guid":{"rendered":"https:\/\/edcarron.com\/?p=58"},"modified":"2024-02-19T11:52:29","modified_gmt":"2024-02-19T11:52:29","slug":"the-salted-caramel-trend","status":"publish","type":"post","link":"https:\/\/edcarron.com\/?p=58","title":{"rendered":"The Salted Caramel Trend"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n  \n  \n    <style>\n      .country:hover {\n        fill: red;\n      }\n      .hidden {\n        display: none;\n      }\n      div.tooltip {\n        color: #222;\n        background-color: #fff;\n        padding: 0.5em;\n        text-shadow: #f5f5f5 0 1px 0;\n        border-radius: 2px;\n        opacity: 0.9;\n        position: absolute;\n        font-family: \"Source Code Pro\";\n        font-size: 14px;\n      }\n      h1 {\n        font-family: \"Source Code Pro\";\nword-break: break-word;\n        fill: slategrey;\n      }\n    <\/style>\n    <script src=\"https:\/\/d3js.org\/d3.v4.js\"><\/script>\n    <script src=\"https:\/\/d3js.org\/d3-scale-chromatic.v1.min.js\"><\/script>\n    <script src=\"https:\/\/d3js.org\/d3-geo-projection.v2.min.js\"><\/script>\n\n    <div id=\"map_chart\">\n      <svg id=\"my_dataviz\" width=\"600\" height=\"500\"><\/svg>\n    <\/div>\n    <script>\n      \/\/ The svg\n      var mapSvg = d3.select(\"#my_dataviz\"),\n        width = +mapSvg.attr(\"width\"),\n        height = +mapSvg.attr(\"height\");\n\n      \/\/ Map and projection\n      var path = d3.geoPath();\n      var projection = d3\n        .geoMercator()\n        .scale(60)\n        .center([0, 20])\n        .translate([width \/ 2, height \/ 2]);\n\n      \/\/ Data and color scale\n      var data = d3.map();\n      var colorScale = d3\n        .scaleThreshold()\n        .domain([1, 20, 40, 60, 80, 100])\n        .range(d3.schemeOranges[7]);\n\n      \/\/ Load data and boot\n      d3.queue()\n        .defer(d3.json, \"\/myjson\/world.json\")\n        .defer(d3.csv, \"\/myjson\/saltPopularity.csv\", function (d) {\n          data.set(d.country, +d.pop);\n        })\n        .await(ready);\n\n      var tooltip = d3\n        .select(\"body\")\n        .append(\"div\")\n        .attr(\"class\", \"hidden tooltip\");\n\n      function ready(error, topo) {\n        let mouseOver = function (d) {\n          var mouse = d3.mouse(mapSvg.node()).map(function (d) {\n            return parseInt(d);\n          });\n          tooltip\n            .classed(\"hidden\", false)\n            .attr(\n              \"style\",\n              \"left:\" + (mouse[0] + 15) + \"px; top:\" + (mouse[1] - 35) + \"px\"\n            )\n            .html(d.properties.name + \" \" + d.total);\n        };\n\n        let mouseLeave = function (d) {\n          tooltip.classed(\"hidden\", true);\n        };\n\n        \/\/ Draw the map\n        mapSvg\n          .append(\"g\")\n          .selectAll(\"path\")\n          .data(topo.features)\n          .enter()\n          .append(\"path\")\n          \/\/ draw each country\n          .attr(\"d\", d3.geoPath().projection(projection))\n          \/\/ set the color of each country\n          .attr(\"fill\", function (d) {\n            d.total = data.get(d.properties.name) || 0;\n            return colorScale(d.total);\n          })\n          .style(\"stroke\", \"transparent\")\n          .attr(\"class\", function (d) {\n            return \"country\";\n          })\n          .style(\"opacity\", 0.8)\n          .on(\"mouseover\", mouseOver)\n          .on(\"mouseleave\", mouseLeave);\n      }\n    <\/script>\n\n\n\n<h2>Changing Popularity<\/h2>\n\n\n\n<meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n  \n  \n    <style>\n      html,\n      body {\n        margin: 0;\n        height: 100%;\n        width: 100%;\n        font-family: \"Press Start 2P\" a;\n      \n      }\n\n      #root {\n        margin: 0 auto;\n        padding: 80px 20px;\n      }\n\n      svg {\n        text-align: center;\n      }\n\n      text {\n        font-family: \"Source Code Pro\";\n        font-size: 14px;\n        fill: darkgrey;\n      }\n\n      text.title {\n        font-size: 22px;\n        fill: darkgrey;\n      }\n\n      text.info {\n        fill: #5948a4;\n      }\n\n      text.chartInfo {\n        fill: #414040;\n      }\n\n      .subtitle text {\n        font-size: 12px;\n        text-decoration: underline;\n        fill: gray;\n      }\n\n      path.line {\n        fill: none;\n        stroke: #5948a4;\n        stroke-width: 3px;\n      }\n\n      path.area {\n        fill: #5948a4;\n        opacity: 0.2;\n      }\n\n      .axis path,\n      .axis line {\n        fill: none;\n        stroke: slategray;\n        shape-rendering: crispEdges;\n      }\n    <\/style>\n    <script src=\"https:\/\/d3js.org\/d3.v4.js\"><\/script>\n    <div id=\"chart\">\n      <svg id=\"lineviz\"><\/svg>\n    <\/div>\n    <script>\n      \/\/ set the dimensions and margins of the graph\n      var margin = { top: 50, right: 30, bottom: 100, left: 60 },\n        width = 800 - margin.left - margin.right,\n        height = 400 - margin.top - margin.bottom;\n\n      \/\/ append the svg object to the body of the page\n      var svg = d3\n        .select(\"#lineviz\")\n        .attr(\"width\", width + margin.left + margin.right)\n        .attr(\"height\", height + margin.top + margin.bottom)\n        .append(\"g\")\n        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\n      \/\/Read the data\n      d3.csv(\n        \"\/myjson\/saltovertime.csv\",\n        function (d) {\n          return { date: d3.timeParse(\"%Y-%m\")(d.date), value: d.value };\n        },\n\n        function (data) {\n          var x = d3\n            .scaleTime()\n            .domain(\n              d3.extent(data, function (d) {\n                return d.date;\n              })\n            )\n            .range([0, width]);\n          svg\n            .append(\"g\")\n            .attr(\"transform\", \"translate(0,\" + height + \")\")\n            .call(d3.axisBottom(x));\n\n          var y = d3\n            .scaleLinear()\n            .domain([\n              0,\n              d3.max(data, function (d) {\n                return +d.value;\n              }),\n            ])\n            .range([height, 0]);\n          svg.append(\"g\").call(d3.axisLeft(y));\n\n          svg\n            .append(\"path\")\n            .datum(data)\n            .attr(\"fill\", \"none\")\n            .attr(\"stroke\", \"steelblue\")\n            .attr(\"stroke-width\", 1.5)\n            .attr(\n              \"d\",\n              d3\n                .line()\n                .x(function (d) {\n                  return x(d.date);\n                })\n                .y(function (d) {\n                  return y(d.value);\n                })\n            );\n\n          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(\"Salted Caramel Popularity\");\n          svg\n            .append(\"text\")\n            .attr(\"class\", \"subtitle\")\n            .attr(\"target\", \"_blank\")\n            .attr(\"x\", 0)\n            .attr(\"y\", height + 50)\n            .text(\"Source Google Trends\");\n        }\n      );\n    <\/script>\n\n\n\n<p>Although it might be hard for some to remember, there was a time before salted caramel. According to Google Trends, the savoury sweet combination started growing in popularity around 2012, and had taken hold by 2014.<\/p>\n\n\n\n<p>Before its mainstream surge salted caramel was the reserve of high end restaurants and adventurous dinner party hosts. Invented in Brittany France by Henry La Roux, from a family of patissiers. He won the <em>Best Sweet in France<\/em> award from the Salon International De La Confiserie in 1980 with his \u2018salted butter caramel\u2019.<\/p>\n\n\n\n<p>While many people love it \u2013 hence the popularity \u2013 there has been a backlash voiced in many high brow newspapers&#8217;  culture sections.<\/p>\n\n\n\n<p>The Google Trends data shows spikes in interest every Christmas, which is can also be seen in other confectionary products.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Document Changing Popularity Document Although it might be hard for some to remember, there was a time before salted caramel. According to Google Trends, the savoury sweet combination started growing in popularity around 2012, and had taken hold by 2014. Before its mainstream surge salted caramel was the reserve of high end restaurants and adventurous&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\/58"}],"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=58"}],"version-history":[{"count":26,"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/edcarron.com\/index.php?rest_route=\/wp\/v2\/posts\/58\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edcarron.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}