31:T603,histogramChart = { const svg = d3.select(DOM.svg(width, histogramHeight)); const yAxis = svg.append("g") .call(yAxisHistogram); svg.append("g") .call(xAxisHistogram); const bars = svg.append("g"); bars.selectAll("rect") .data(bins) .enter().append("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => x(d.x1) - x(d.x0) -2) .attr("y", d => yHistogram(d.length / data.length)) .attr("height", d => yHistogram(0) - yHistogram(d.length / data.length)) // .style("fill", "#5BA745") .style("fill", d => riskColor(getPercentile(socialPercentsSorted, (d.x0 + d.x1) / 2))) .style("fill-opacity", 0.9); // bars.selectAll(".bar-label") // .data(bins) // .enter().append("text") // .attr("class", "bar-label") // .attr("x", d => x(d.x0) + 5) // .attr("y", d => yHistogram(d.length / data.length)) // .attr("dx", 32) // .attr("dy", 20) // .style("text-anchor", "middle") // .text(d => d3.format(".0%")(d.length / data.length)); yAxis.selectAll(".axis line") .style("stroke", "grey") .style("stroke-dasharray", "1,3"); svg.selectAll(".bar-label") .style("font-family", "sans-serif") .style("font-size", "1em") .style("fill", "white"); svg.selectAll(".axis text") .style("font-size", "1.2em"); svg.selectAll(".axis-label") .style("fill", "black") .style("font-size", "1.6em"); return svg.node(); }32:[] 2f:{"title":"Search Versus Social Referrals for Publishers","cells":[{"id":0,"value":"md`# Search Versus Social Referrals for Publishers\n(as a percentage of traffic from external sources)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"viewof bubbleSizeMax = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"html`Blue bubbles are \"low risk\" publishers below the 20th percentile\n(${d3.format(\".0%\")(d3.quantile(socialPercentsSorted, 0.2))} social traffic).
\n\nPurple bubbles are \"medium risk\" publishers with between the 20th percentile and the median.
\n\nMagenta bubbles are \"high risk\" publishers above the median \n(${d3.format(\".0%\")(d3.quantile(socialPercentsSorted, 0.5))} social traffic).
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"bubbleChart = {\n\tconst svg = d3.select(DOM.svg(width, width - 80));\n\n\tsvg.append(\"g\")\n \t.call(xAxis);\n\n\tsvg.append(\"g\")\n \t.call(yAxis);\n \n const bubbles = svg.append(\"g\")\n \t.selectAll(\"circle\")\n \t.data(data)\n \t.enter().append(\"circle\")\n\t\t.attr(\"cx\", d => x(d.social_percent))\n \t\t.attr(\"cy\", d => y(d.search_percent))\n \t\t.attr(\"r\", d => bubbleScale(d.pub_size))\n \t\t.style(\"fill\", d => riskColor(getPercentile(socialPercentsSorted, d.social_percent)))\n \t\t.style(\"fill-opacity\", 0.6);\n \n \tsvg.selectAll(\".axis line\")\n \t\t.style(\"stroke\", \"grey\")\n \t\t.style(\"stroke-dasharray\", \"1,3\");\n \n \tsvg.selectAll(\".axis path\")\n \t\t.style(\"display\", \"none\");\n \n \tsvg.selectAll(\".axis text\")\n \t\t.style(\"font-size\", \"1.2em\");\n \n \tsvg.selectAll(\".axis-label\")\n .style(\"fill\", \"black\")\n .style(\"font-size\", \"1.6em\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`### Publisher distribution by social percentage of external traffic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"chartDistribution = {\n const svg = d3.select(DOM.svg(width, distributionHeight - 45));\n\n svg.append(\"g\")\n .call(xAxisDistribution);\n\n svg.append(\"g\")\n .call(yAxisDistribution);\n \n svg.append(\"path\")\n .datum(dataDistribution)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#5BA745\")\n .attr(\"stroke-width\", 5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n svg.selectAll(\".axis text\")\n \t\t.style(\"font-size\", \"1.2em\");\n \n svg.selectAll(\".axis-label\")\n .style(\"fill\", \"black\")\n .style(\"font-size\", \"1.6em\");\n \n svg.selectAll(\".axis line\")\n .style(\"stroke\", \"grey\")\n .style(\"stroke-dasharray\", \"1,3\");\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"viewof colorLow = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"viewof colorMedium = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"viewof colorHigh = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"function riskColor(value) {\n if (value < 0.2) return `${colorLow}`;\n else if (value < 0.5) return `${colorMedium}`;\n else return `${colorHigh}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"x = d3.scaleLinear()\n .domain([0, 1])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"bubbleScale = d3.scaleSqrt()\n\t.domain([0, 1])\n\t.range([1, bubbleSizeMax])","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${width - margin.bottom})`)\n .attr(\"class\", \"x axis\")\n .call(d3.axisBottom(x)\n .tickSize(-width + margin.right + margin.left)\n .tickFormat(d3.format(\".0%\")))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width / 2) - margin.left)\n .attr(\"y\", 0)\n .attr(\"dy\", 35)\n .attr(\"class\", \"axis-label\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Social percentage of external traffic\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"xAxisHistogram = g => g\n .attr(\"transform\", `translate(0,${histogramHeight - 40})`)\n .attr(\"class\", \"x axis\")\n .call(d3.axisBottom(x)\n .tickFormat(d3.format(\".0%\")))\n\t.call(g => g.append(\"text\")\n .attr(\"class\", \"axis-label\")\n .attr(\"x\", (width / 2) - margin.left)\n .attr(\"y\", 0)\n .attr(\"dy\", 35)\n .style(\"text-anchor\", \"middle\")\n .text(\"Social percentage of external traffic\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"y = d3.scaleLinear()\n\t.domain([0, 1.0])\n\t.range([width - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisLeft(y)\n .tickSize(-width + margin.right + margin.left)\n .tickFormat(d3.format(\".0%\")))\n\t.call(g => g.append(\"text\")\n .attr(\"class\", \"axis-label\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", -width / 2)\n .attr(\"y\", 0)\n .attr(\"dy\", -40)\n .style(\"text-anchor\", \"middle\")\n .text(\"Search percentage of external traffic\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"yHistogram = d3.scaleLinear()\n // .domain([0, d3.max(bins, d => d.length)]).nice()\n\t.domain([0, d3.max(bins, d => d.length / data.length)])\n .range([histogramHeight - 40, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"yAxisHistogram = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisLeft(yHistogram)\n .ticks(7)\n .tickSize(-width + margin.right + margin.left)\n .tickFormat(d3.format(\".0%\")))\n .call(g => g.append(\"text\")\n .attr(\"class\", \"axis-label\")\n .attr(\"x\", 80)\n .attr(\"y\", margin.top - 20)\n .text(\"% of publishers\"))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"margin = ({top: 60, right: 120, bottom: 120, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"histogramHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"distributionHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"xDistribution = d3.scaleLinear()\n\t.domain([0,99])\n\t.range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"xAxisDistribution = g => g\n .attr(\"transform\", `translate(0,${distributionHeight - margin.bottom})`)\n .attr(\"class\", \"x axis\")\n .call(d3.axisBottom(xDistribution)\n .tickSize(-distributionHeight + margin.top + margin.bottom)\n .tickFormat(v => v + \"th\"))\n .call(g => g.append(\"text\")\n .attr(\"class\", \"axis-label\")\n .attr(\"x\", (width / 2) - margin.left)\n .attr(\"y\", 0)\n .attr(\"dy\", 30)\n .style(\"text-anchor\", \"middle\")\n .text(\"Percentiles of social traffic\"))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"yDistribution = d3.scaleLinear()\n\t.domain([0, 1])\n\t.range([distributionHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"yAxisDistribution = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisLeft(yDistribution)\n .tickSize(-width + margin.right + margin.left)\n .tickFormat(d3.format(\".0%\")))\n\t.call(g => g.append(\"text\")\n .attr(\"class\", \"axis-label\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", -distributionHeight / 2)\n .attr(\"y\", 0)\n .attr(\"dy\", -40)\n .style(\"text-anchor\", \"middle\")\n .text(\"Social percentage of external traffic\"))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"line = d3.line()\n .x((d,i) => xDistribution(i))\n .y(d => yDistribution(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"lineFlipped = d3.line()\n .y((d,i) => xDistribution(i))\n .x(d => yDistribution(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"function getPercentile(array, n) {\n var L = 0;\n var S = 0;\n var N = array.length\n\n for (var i = 0; i < array.length; i++) {\n if (array[i] < n) {\n L += 1\n } else if (array[i] === n) {\n S += 1\n } else {\n\n }\n }\n\n var pct = (L + (0.5 * S)) / N\n\n return pct\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"socialPercentsSorted = data.map(d => +d.social_percent)\n\t.sort(function sortAscending(a, b) { return a - b; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"dataDistribution = {\n \n let percentiles = [];\n \n for (let i = 0; i < 100; i++) {\n \tpercentiles.push(d3.quantile(socialPercentsSorted, i / 100))\n }\n return percentiles\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"percentileData = data.map(d => getPercentile(socialPercentsSorted, +d.social_percent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"data = {\n let data = await d3.csv(\"https://cdn.rawgit.com/distantshape/\" +\n \"bc4e0310ef6da51f607b65256a1618ac/raw/\" +\n \"7c71be471d759ebbe96cbc931b345e44330ffbe7/search-v-social.csv\");\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"bins = d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(100))(data.map(d => d.social_percent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}