2b:T1032,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") //draws x axis .call(xAxis) //---------------------OVERALL GROUP-------------------------------------------------------// svg.append("g") //Draws light gray interpercentile background .append("rect") .attr("x", x(d3.quantile(data, .25))) .attr("y", 0) .attr("width", x(d3.quantile(data, .75)) - x(d3.quantile(data, .25))) .attr("height", height) .attr("fill", "#000") .attr("opacity", .025) let combinedData = [data, data_large] svg.append("g") //------------------------------------------------------------------------------------------- //BOTTOM svg.append("path") //draws KDE line estimation and fills it .datum(density) .style("fill", "#72c8f7") .style("stroke", "#72c8f7") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("opacity", ".7") .attr("d", d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d[0]); }) .y(function(d) { return y(d[1]); })) .attr("transform", `translate(0, ${-25})`) svg.append("g") // DRAW InterQuartileRange .attr("transform", `translate(0, ${y(0)})`) .append("line") .attr("x1", x(d3.quantile(data, .25))) .attr("y1", y(.011 * 1)) .attr("x2", x(d3.quantile(data, .75))) .attr("y2", y(.011 * 1)) .attr("stroke-linejoin", "round") .style("stroke", "#5d6d78") .attr("stroke-width", 5) .attr("stroke-linecap", "round") svg.append("g") // DRAW MEDIAN .attr("transform", `translate(0, ${y(0)})`) .append("circle") .attr("cx", x(stats(data).median)) .attr("cy", y(.011 * 1)) .attr("r", 5) .style("fill", "#fff") .style("stroke", "#5d6d78") .style("stroke-width", "2px") //------------------------------------------------------------------------------------------- //TOP svg.append("g") svg.append("path") //draws KDE line estimation and fills it .datum(density) .style("fill", "rgb(179, 189, 197)") .style("stroke", "rgb(179, 189, 197)") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("opacity", ".7") .attr("d", d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d[0]); }) .y(function(d) { return y(d[1]); })) .attr("transform", `translate(0, ${-250})`) svg.append("g") // DRAW InterQuartileRange .attr("transform", `translate(0, ${y(0)})`) .append("line") .attr("x1", x(d3.quantile(data, .25))) .attr("y1", y(.011 * 1.454)) .attr("x2", x(d3.quantile(data, .75))) .attr("y2", y(.011 * 1.454)) .attr("stroke-linejoin", "round") .style("stroke", "#5d6d78") .attr("stroke-width", 5) .attr("stroke-linecap", "round") svg.append("g") // DRAW MEDIAN .attr("transform", `translate(0, ${y(0)})`) .append("circle") .attr("cx", x(all_median)) .attr("cy", y(.011 * 1.454)) .attr("r", 5) .style("fill", "#fff") .style("stroke", "#5d6d78") .style("stroke-width", "2px") svg.selectAll(".label") //Labels Publisher types .data(["All Category Network","Competitive Set"]) .enter().append("text") .attr("class", "label") .attr("x", width - margin.right - 30) .attr("y", function(d, i) { return [200, 430, 500][i] - 15; }) .text(function(d) { return d; }) .style("text-anchor", "end") .style("fill", "black") .style('font-family', 'Source Sans Pro'); svg.selectAll(".axis line") .style("stroke", "grey") .style("stroke-dasharray", "1,3"); svg.selectAll(".axis path") .style("display", "none"); return svg.node(); } 2c:T542,chart_bee = { const svg = d3.select(DOM.svg(width, height_bee)); svg.append("g") //draws x axis .call(xAxis) //---------------------INDIVIDUAL PUBLISHER-------------------------------------------------------// svg.append("g") .append("rect") .attr("x", x(d3.quantile(data, .25))) .attr("y", 0) .attr("width", x(d3.quantile(data, .75)) - x(d3.quantile(data, .25))) .attr("height", height) .attr("fill", "#000") .attr("opacity", .025) svg.append("g") .attr("transform", `translate(0, ${height_bee - height_bee/3 - 20})`) .selectAll(".googleCircle") .data(dodge(beeswarm_data, circleSize, circlePadding, x)) .enter().append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return -d.y ; }) .attr("r", circleSize) .style("fill", colors[0]) .on("mouseover", function(d) { d3.selectAll(".hoverLabel").text(d.data) }) var hoverLabel = svg.append("svg:text") .attr("class", "hoverLabel") .attr("x", 100) .attr("y",400) .text("") svg.selectAll(".axis line") .style("stroke", "grey") .style("stroke-dasharray", "1,3"); svg.selectAll(".axis path") .style("display", "none"); return svg.node(); } 2d:T4b8,dodge = (data, radius, padding, scale) => { const circles = data.map(d => ({x: scale(d), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { if ((radius * 2 + padding - epsilon) ** 2 > (a.x - x) ** 2 + (a.y - y) ** 2) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can’t intersect the new circle b. while (head && head.x < b.x - (radius * 2 + padding)) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0)) { let a = head; b.y = Infinity; do { let y = Math.abs(a.y + Math.sqrt((radius * 2 + padding) ** 2 - (a.x - b.x) ** 2)); if (y < b.y && !intersects(b.x, y)) b.y = y; a = a.next; } while (a); } // Add b to the queue. b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } return circles; } 2e:[] 2a:{"title":"Individual Publisher Compared to Large Business Network","cells":[{"id":0,"value":"md`# Individual Publisher Compared to Large Business Network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"viewof r1 = radio({\n title: 'Business Category',\n description: 'Please select which publisher group you would like to compare against',\n options: [\n { label: 'All Publishers', value: 'all' },\n { label: 'Small Publishers', value: 'small' },\n { label: 'Medium Publishers', value: 'medium' },\n { label: 'Large Publishers', value: 'large' },\n ],\n value: 'all'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"trans = \"transform\", `translate(0, ${y(0)})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"all_median = (stats(data).median)","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`

Charting Group Data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"DataStats = md`\nLarge Publishers in Business stats:\n- median: ${stats(data).median}\n- mean: ${stats(data).mean}\n- min: ${stats(data).min}\n- max: ${stats(data).max}\n- 25% - ${d3.quantile(data, .25)}\n- 75%: ${d3.quantile(data, .75)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"stats = function(focus) {\n \treturn {\n median: d3.median(focus, function(d){ return d; }),\n mean: d3.mean(focus, function(d){ return d; }),\n max: d3.max(focus, function(d){ return d; }),\n min: d3.min(focus, function(d){ return d; }),\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"stats(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"height_bee = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"data_org = {\n let values = await d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/complete.csv\", function(d){\n \treturn +d.Values\n \n });\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"data = data_org.sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"data_large = data","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"\nn = data.length\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"x = d3.scaleLog()\n .base(2)\n\t.domain([stats(data).min, stats(data).max])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"y = d3.scaleLinear()\n .domain([0, .01])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"bins = d3.histogram().domain([stats(data).min, stats(data).max]).thresholds(50)(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"density = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(50))(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"xAxis = function(g) {\n \treturn g\n .attr(\"transform\", `translate(0,${height - 20})`)\n .attr(\"class\", \"x axis\")\n .call(d3.axisBottom(x).ticks(10).tickSize(-height + 30).tickFormat(v => {\n if (v < all_median) return \"1/\" + (all_median / v).toFixed(1) + \"x\";\n else return (v / all_median).toFixed(0) + \"x\";\n}))\n//.call(d3.axisLeft(y).ticks(width / 100).tickFormat(format).tickSize(-width + 30))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"function kernelEpanechnikov(k) {\n return function(v) {\n return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function kernelDensityEstimator(kernel, X) {\n return function(V) {\n return X.map(function(x) {\n return [x, d3.mean(V, function(v) { return kernel(x - v); })];\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`

Charting Publisher Data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"circleSize = dotScale(beeswarm_data.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"dotScale = d3.scaleSqrt()\n .domain([0, 500])\n .range([15,1])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"circlePadding = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`circleSize: **${circleSize}** pixels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"d3.max(beeswarm_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"beeswarm_data = {\n let values = await d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/avg_views.csv\", function(d){\n if (d.views * 20 < stats(data).max && d.views * 20 > stats(data).min){\n \treturn +d.views * 20}\n });\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"stats(beeswarm_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"colors = [\"#5BA745\", \"#3b5998\",\"#2aa3ef\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2e","stdlib":"1","titling":"auto"}