31:T49b,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", "clipGroup") .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"); 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.2em") .style('font-family', 'Source Sans Pro'); return svg.node(); }32:[] 2f:{"title":"Currents Timeline Chart Template","cells":[{"id":0,"value":"md`\n# Currents Timeline Chart Template\nIn development, will be adding more features over time\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof useDataFromGist = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"data = [dataFromGist,dataFromGist4]","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 = formatDateForInput(parseDate(d3.min(data[0].map(d => d.time))))\n let last = formatDateForInput(parseDate(d3.max(data[0].map(d => d.time))))\n \n return [first, last]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"parseDate(d3.min(data[0].map(d => d.time)))","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":58,"value":"line = d3.line()\n .x((d,i) => xScale(parseDate(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([parseDateFromInput(chartStartDate), parseDateFromInput(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(\".3s\"))\n \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"parseDateFromInput = d3.timeParse(\"%Y-%m-%dT%H:%M\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"formatDateForInput = d3.timeFormat(\"%Y-%m-%dT%H:%M\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"maxValue = {\n let m = 0;\n {for( let i =0; i< data.length; i++) {\n let tempMax = d3.max(data[i].map(d => d.views));\n if (tempMax > m){\n m = tempMax}\n}}\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"margin = ({\n top: 20,\n bottom: 20,\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":6,"value":"dataFromGist = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_daily_sports.csv\",\n d => {\n return {\n time: d.Time,\n views: +d.Views\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"dataFromGist2 = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_daily_3.csv\",\n d => {\n return {\n time: d.Time,\n views: +d.Views\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"dataFromGist3 = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_daily_4.csv\",\n d => {\n return {\n time: d.Time,\n views: +d.Views\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"dataFromGist4 = d3.csv(\"https://raw.githubusercontent.com/garrettvercoe/Scratch/master/timeline_data_hourly1.csv\",\n d => {\n return {\n time: 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 {rasterizeSVG} from \"@distantshape/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"DOM.download(await rasterizeSVG(chart), null, \"Download as PNG\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}