31:T761,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(yAxis); svg.append("g") .call(xAxis); let clipRect = svg.append("clipPath") .attr("id", "rect-clip") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); let clipGroup = svg.append("g") .attr("class", "clip-group") .attr("clip-path", "url(#rect-clip)"); clipGroup.selectAll(".chart-line") .data(data) .enter().append("path") .attr("class", "chart-line") .attr("d", d => line(d)) .style("fill", "none") .style("stroke", (d, i) => lineColors[i]) .style("stroke-width", 2) .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .attr("opacity", 1); let labels = clipGroup.selectAll(".topic-label") .data(data) .enter().append("text") .attr("class", "topic-label") .attr("x",(d, i) => i* 150 + 150) .attr("y", (d, i) => 50) .text((d, i) => `${topicNames[i]}`) .style('font-family', 'Source Sans Pro'); for (let i = 0; i < 2; i++) { svg.append('circle') .attr('class', 'circle') .attr('cx', i* 150 + 100) .attr('cy', 50) .attr('r', 15) .style("fill", (d) => lineColors[i])}; labels.style("text-anchor", "end") .style("font-family", "sans-serif"); svg.style("background-color", "white") svg.selectAll(".y.axis line") .style("stroke", "grey") .style("stroke-dasharray", "1,3"); svg.selectAll(".topic-label") .style("font-size", "1em") .style('font-family', 'Source Sans Pro'); svg.selectAll(".y.axis path") .style("display", "none"); svg.selectAll(".axis text") .style("font-size", "2.1em") .style('font-family', 'Source Sans Pro'); return svg.node(); }32:[] 2f:{"title":"Google News - AMP on mobile","cells":[{"id":0,"value":"md`\n# Google News - AMP on mobile`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"//WHICH DATASETS SHOW IN GRAPH\ndata = [is_amp,is_not_amp]","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"topicNames = [\"AMP\", \"Not AMP\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"viewof chartStartDate = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof chartEndDate = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"dateRangeInData = {\n let first = formatTimeWithT(parseTimeWithT(d3.min(data[0].map(d => d.time))))\n let last = formatTimeWithT(parseTimeWithT(d3.max(data[0].map(d => d.time))))\n \n return [first, last]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof lineColor1 = html``\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"viewof lineColor2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"viewof lineColor3 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"viewof lineColor4 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"viewof lineColor5 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"viewof lineColor6 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"lineColors = [lineColor1, lineColor2, lineColor3, lineColor4, lineColor5, lineColor6]","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"md `**Code Section**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"line = d3.line()\n .x((d,i) => xScale(parseTimeWithT(d.time)))\n .y(d => yScale(d.views))\n .curve(d3.curveMonotoneX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"xScale = d3.scaleTime()\n .domain([parseTimeWithT(chartStartDate), parseTimeWithT(chartEndDate)])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\", \"x axis\")\n .call(d3.axisBottom(xScale)\n .ticks(12)\n .tickFormat(d3.timeFormat(\"%b\"))\n .tickSize(6))","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"yScale = {\n return d3.scaleLinear()\n .domain([0, maxValue + maxValue * 0.01])\n .range([height - margin.bottom, margin.top])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisLeft(yScale)\n .tickSize(-width + margin.right + margin.left)\n .tickFormat(d3.format(\".2s\"))\n \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"parseDate = d3.timeParse(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"parseTime = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"formatTimeWithT = d3.timeFormat(\"%Y-%m-%dT%H:%M\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"parseTimeWithT = d3.timeParse(\"%Y-%m-%dT%H:%M\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"function normalizeTime(string) {\n let t;\n let timeString = \"\";\n \n if (parseDate(string)) {\n t = parseDate(string);\n timeString = d3.timeFormat(\"%Y-%m-%dT12:00\")(t);\n }\n else {\n t = parseTime(string);\n timeString = formatTimeWithT(t);\n }\n return timeString;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"maxValue = {\n let m = 0;\n \n for (let i =0; i< data.length; i++) {\n let tempMax = d3.max(data[i].map(d => d.views));\n if (tempMax > m) m = tempMax\n }\n \n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"margin = ({\n top: 20,\n bottom: 80,\n left: 80,\n right: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"md `**Data Input Section**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"is_amp = d3.csv(\"https://gist.githubusercontent.com/garrettvercoe/2737848de3931ce0b9e3b326581cad74/raw/425b6ad26852caafdb28b6721427166d5921bbf8/is_amp0.csv\",\n d => {\n return {\n time: normalizeTime(d.Time),\n views: +d.Views,\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"is_not_amp = d3.csv(\"https://gist.githubusercontent.com/garrettvercoe/2737848de3931ce0b9e3b326581cad74/raw/425b6ad26852caafdb28b6721427166d5921bbf8/is_amp1.csv\",\n d => {\n return {\n time: normalizeTime(d.Time),\n views: +d.Views,\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof csvFile = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"dataFromFile = d3.csvParse(await Files.text(csvFile), d => {\n return {\n time: d.Time,\n views: +d.Views\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {serializeSVG} from \"@distantshape/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"DOM.download(await serializeSVG(chart), null, \"Download as SVG\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}