2e:null 2f:["$","title",null,{"children":"Google News - AMP on mobile | Garrett Vercoe | Observable"}] 34: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(); }35:[] 32:{"id":"474838a07492efb2","slug":"google-news-amp-on-mobile","title":"Google News - AMP on mobile","thumbnail":"2138418af49eaf10972b02152a65391bd9e4720f8cfd5ef96e43b9ba836ee3bb","access_level":"public","create_time":"$D2018-08-16T18:58:44.085Z","update_time":"$D2018-08-17T16:29:13.120Z","view_time":null,"first_public_time":"$D2018-08-16T19:10:51.933Z","has_unpublished_edits":null,"fork":{"id":"28a38f8401adfe0a","slug":"content-recs","title":"Content Recs","owner":{"id":"95a99350bce425b9","login":"garrettvercoe","name":"Garrett Vercoe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"95a99350bce425b9","login":"garrettvercoe","name":"Garrett Vercoe","avatar_url":"https://avatars-next.observableusercontent.com/76f17f561351abb9b688ca54db259ec43c30ee713c066eec7c61dbd4f1b57553","tier":"starter_2024"},"version":1097,"publish_version":1097,"role":null,"authored":false,"authors":[{"type":"individual","id":"5676a32fe63084ad","login":"garrettvercoe","name":"Garrett Vercoe","avatar_url":"https://avatars-next.observableusercontent.com/76f17f561351abb9b688ca54db259ec43c30ee713c066eec7c61dbd4f1b57553","tier":null}],"members":[{"type":"individual","id":"5676a32fe63084ad","login":"garrettvercoe","name":"Garrett Vercoe","avatar_url":"https://avatars-next.observableusercontent.com/76f17f561351abb9b688ca54db259ec43c30ee713c066eec7c61dbd4f1b57553","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Google News - AMP on mobile","cells":[{"id":0,"value":"md`\n# Google News - AMP on mobile`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"//WHICH DATASETS SHOW IN GRAPH\ndata = [is_amp,is_not_amp]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"topicNames = [\"AMP\", \"Not AMP\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof chartStartDate = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof chartEndDate = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof lineColor1 = html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"viewof lineColor2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"viewof lineColor3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"viewof lineColor4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"viewof lineColor5 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"viewof lineColor6 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"lineColors = [lineColor1, lineColor2, lineColor3, lineColor4, lineColor5, lineColor6]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md `**Code Section**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"parseDate = d3.timeParse(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"parseTime = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"formatTimeWithT = d3.timeFormat(\"%Y-%m-%dT%H:%M\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"parseTimeWithT = d3.timeParse(\"%Y-%m-%dT%H:%M\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"margin = ({\n top: 20,\n bottom: 80,\n left: 80,\n right: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"md `**Data Input Section**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"viewof csvFile = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {serializeSVG} from \"@distantshape/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"DOM.download(await serializeSVG(chart), null, \"Download as SVG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"