30:T617,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); 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", 5) .style("stroke-linejoin", "round") .style("stroke-linecap", "round"); let labels = clipGroup.selectAll(".topic-label") .data(data) .enter().append("text") .attr("class", "topic-label") .attr("x", d => xScale(parseTimeWithT(d[d.length - 1].time))) .attr("y", d=> yScale(d[d.length - 1].views) -10) .style("fill", (d, i) => 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(".y.axis path") .style("display", "none"); svg.selectAll(".axis text") .style("font-size", "1.6em") .style('font-family', 'Source Sans Pro'); return svg.node(); }31:[] 2e:{"title":"For Daniel","cells":[{"id":0,"value":"md`\n# For Daniel\n

In development, will be adding more features over time.
Data input at the bottom of page is automatically parsed into hourly or daily data points.
Topic names are determined by \\n the cell names of the data inputs.
The graphs plotted are dependent on which datasets are referenced in the Data array.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"md `**Graph Customization Section**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"//WHICH DATASETS SHOW IN GRAPH\ndata = [Travel]","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":615,"value":"lineColors = [lineColor1, lineColor2, lineColor3, lineColor4, lineColor5]","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(10)\n .tickFormat(d3.timeFormat(\"%b %e\"))\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(\"%Y-%m-%d\")","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: 40,\n left: 40,\n right: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"md `**Data Input Section**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"Travel = d3.csv(\"https://gist.githubusercontent.com/garrettvercoe/dc7b6bd9ea8c35a56019eb3db7ebb809/raw/9c31639263cdaa60247d83d1c959da1509768f1d/gistfile1.txt\",\n d => {\n return {\n time: normalizeTime(d.Time),\n views: +d.Views,\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"News = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_daily_3.csv\",\n d => {\n return {\n time: normalizeTime(d.Time),\n views: +d.Views\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"Science = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_daily_4.csv\",\n d => {\n return {\n time: normalizeTime(d.Time),\n views: +d.Views\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"Pets = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_hourly1.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 PNG\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}