31:T437,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([1860,2020]).range([30,570]) var yScale = d3.scaleLinear().domain([0,300]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale).tickFormat(d3.format(".0f"))(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(1900)},0)`) d3.axisLeft(yScale)(yAxis) var yankees = d3.area().x(d=>xScale(d.yearID)).y0(d => yScale(0)).y1(d => yScale(d.HR)).curve(d3.curveMonotoneX)(data.filter(d => d.name == "New York Yankees")) svg.append("path").attr("d",yankees).attr("fill","cornflowerblue").attr("stroke","black") var sox = d3.area().x(d=>xScale(d.yearID)).y0(d => yScale(0)).y1(d => yScale(d.HR)).curve(d3.curveMonotoneX)(data.filter(d => d.name == "Boston Red Sox")) svg.append("path").attr("d",sox).attr("fill","tomato").attr("stroke","black").attr("opacity",.5) yield svg.node() }32:[] 2f:{"title":"Time Series/Line Chart","cells":[{"id":0,"value":"md`# Time Series/Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"html`

Filtering

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"data.filter(d => d.name == \"New York Yankees\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"html`

Time Series

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var xScale = d3.scaleLinear().domain([1860,2020]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,300]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(1900)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n var pathData = d3.line().x(d => xScale(d.yearID)).y(d => yScale(d.HR)).curve(d3.curveMonotoneX)(data.filter(d => d.name == team))\n svg.append(\"path\").attr(\"d\",pathData).attr(\"stroke\",\"cornflowerblue\").attr(\"fill\",\"none\")\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"viewof team = select({options:[\"New York Yankees\",\"Boston Red Sox\",\"Philadelphia Phillies\",\"New York Mets\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"html`

Two Time Series on One Plot

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var xScale = d3.scaleLinear().domain([1860,2020]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,300]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale).tickFormat(d3.format(\".0f\"))(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(1900)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n var team1Path = d3.line().x(d => xScale(d.yearID)).y(d => yScale(d.HR)).curve(d3.curveMonotoneX)(data.filter(d => d.name == team1))\n svg.append(\"path\").attr(\"d\",team1Path).attr(\"stroke\",\"cornflowerblue\").attr(\"fill\",\"none\")\n \n var team2Path = d3.line().x(d => xScale(d.yearID)).y(d => yScale(d.HR)).curve(d3.curveMonotoneX)(data.filter(d => d.name == team2))\n svg.append(\"path\").attr(\"d\",team2Path).attr(\"stroke\",\"tomato\").attr(\"fill\",\"none\")\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"html`\n\n${viewof team1}\n${viewof team2}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"html`

Area Plots

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`\n---\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"data = d3.csv(`https://gist.githubusercontent.com/bendazz/c36e23b3400ba346107eefdcb9e48b0f/raw/1e69dab04fd605be0fcadc1953f3c5dfa1e3091c/Teams.csv`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"cos = stdlib.base.cos","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"sin = stdlib.base.sin","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"exp = stdlib.base.exp","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"ln = stdlib.base.ln","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"pow = stdlib.base.pow","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"poly = stdlib.base.evalpoly","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"viewof team2 = select({options:[\"New York Yankees\",\"Boston Red Sox\",\"Philadelphia Phillies\",\"New York Mets\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"viewof team1 = select({options:[\"New York Yankees\",\"Boston Red Sox\",\"Philadelphia Phillies\",\"New York Mets\"]})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}