2a:null 2b:["$","title",null,{"children":"Task of week 3 (29th October - 4th November) | Spe Chen | Observable"}] 30:T4b9,multilinechart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style('border', '1px dotted #999'); let legend = svg.selectAll(".legend") .data(dataGroup) .enter(); legend .append('text') .text(d => d[0]) // symbol .attr('x', legendOrigin[0] + labelHeight * 1.2) .attr('y', (d,i) => legendOrigin[1] + labelHeight * i * 1.2 ) .style('font-family', 'sans-serif') .style('font-size', `${labelHeight-1}px`); legend .append('rect') .attr('x', legendOrigin[0]) .attr('y', (d,i) => legendOrigin[1] + labelHeight * 1.2 * i - 7) .attr('width', labelHeight) .attr('height', labelHeight/2) .attr('fill', d => colorScale(d[0])) .attr('stroke', 'none') .style('stroke-width', '2px'); svg.append("g") .call(xmultiAxis); svg.append("g") .call(ymultiAxis); svg.selectAll('.line') .data(dataGroup) .join('path') .attr("class", "line") .attr("d", d => lineMultiValues(d[1])) // .attr("stroke", "#999") .attr("stroke", d => colorScale(d)) .style("fill", "none") .style("stroke-width", 1); return svg.node(); }31:T4a7,multilinechart2 = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style('border', '1px dotted #999'); let legend = svg.selectAll(".legend") .data(dataGroup2) .enter(); legend .append('text') .text(d => d[0]) // symbol .attr('x', legendOrigin[0] + labelHeight * 1.2) .attr('y', (d,i) => legendOrigin[1] + labelHeight * i * 1.2 ) .style('font-family', 'sans-serif') .style('font-size', `${labelHeight-1}px`); legend .append('rect') .attr('x', legendOrigin[0]) .attr('y', (d,i) => legendOrigin[1] + labelHeight * 1.2 * i - 7) .attr('width', labelHeight) .attr('height', labelHeight/2) .attr('fill', d => colorScale2(d[0])) .attr('stroke', 'none') .style('stroke-width', '1.5px'); svg.append("g") .call(xmultiAxis2); svg.append("g") .call(ymultiAxis2); svg.selectAll('.line') .data(dataGroup2) .join('path') .attr("class", "line") .attr("d", d => lineMultiValues2(d[1])) .attr("stroke", d => colorScale2(d)) .style("fill", "none") .style("stroke-width", 3); return svg.node(); }32:[] 2e:{"id":"3390a5d4be299cb6","slug":"task-of-week-3-29th-october-4th-november","title":"Task of week 3 (29th October - 4th November)","thumbnail":"76033bbac74a4b609240248474a5fccddcf6eff3dd48d8a36970207209be6194","access_level":"public","create_time":"$D2020-11-01T15:54:27.814Z","update_time":"$D2020-11-05T16:55:17.296Z","view_time":null,"first_public_time":"$D2020-11-04T06:05:06.051Z","fork":{"id":"b8f2b2684488dfdc","slug":"task-of-week-3-29th-october-4th-november","title":"Task of week 3 (29th October - 4th November)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"875efdc7be078385","login":"spepechen","name":"Spe Chen ","avatar_url":"https://avatars-next.observableusercontent.com/f9b28d0e0e81c7c6d6e8167c86d9659b16cf7d4d736bb8ff502ccf4b97fa1528","tier":"starter_2024"},"version":736,"publish_version":736,"role":null,"authored":false,"authors":[{"type":"individual","id":"48c34b5377e95cdb","login":"spepechen","name":"Spe Chen ","avatar_url":"https://avatars-next.observableusercontent.com/f9b28d0e0e81c7c6d6e8167c86d9659b16cf7d4d736bb8ff502ccf4b97fa1528","tier":null}],"members":[{"type":"individual","id":"48c34b5377e95cdb","login":"spepechen","name":"Spe Chen ","avatar_url":"https://avatars-next.observableusercontent.com/f9b28d0e0e81c7c6d6e8167c86d9659b16cf7d4d736bb8ff502ccf4b97fa1528","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Task of week 3 (29th October - 4th November)","cells":[{"id":0,"value":"md`# Task of week 3 (29th October - 4th November)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`This week, we have presented an introduction to time plots (line plots, area plots) and how to add axis on our plots. Please, take your time on reading again the notebook presented in this session in case any part wasn't clear at all.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`Here, you have links to notebooks that introduce similar plots than the ones presented this week:\n\n- [Multi-line chart](https://observablehq.com/@d3/multi-line-chart)\n- [Stacked area chart](https://observablehq.com/@d3/stacked-area-chart)\n- [Line](https://observablehq.com/@d3/line-with-missing-data) and [Area](https://observablehq.com/@d3/area-with-missing-data?collection=@d3/d3-shape) with missing data\n- [Radial area chart](https://observablehq.com/@d3/radial-area-chart?collection=@d3/d3-shape)\n- [Difference chart](https://observablehq.com/@d3/difference-chart)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`The task of this week will consist of the implementations of a multi-line plot to show the stock values different technological companies.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`You will have to first prepare the data, grouping the different data items of a given company. Feel free to improve the plot in the sense you think is better, adding complementary elements to the plot, such as axis, legend, grid, annotations,...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"stockValues = (await require('vega-datasets@1'))['stocks.csv']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"desiredData = stockValues.map(d => {return {\n name : d.symbol,\n date : new Date (d.date),\n price : +d.price};});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"md`## Preparing data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"md`checking how many companies | [ref](https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript)` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"companyList = stockValues.map(item => item.symbol)\n .filter((value, index, self) => self.indexOf(value) === index)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"processedData = stockValues.map( d => {return {\n symbol: d.symbol, \n date: new Date(d.date), \n price: d.price}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"processedData.filter( d => d.price != undefined)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"dataGroup = d3.groups(processedData, d => d.symbol)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`## Define drawing area`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"margin = ({top: 30, right: 30, bottom: 50, left: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"md`## Scales` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"md`#### scales for data projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"xmulti = d3.scaleTime()\n .domain(d3.extent(processedData, d => d.date)) // d3.extend returns [min, max] \n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"ymulti = d3.scaleLinear()\n .domain([0, d3.max(processedData, d => d.price)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"d3.extent(processedData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"ymulti(dataGroup[0][1][0]['price'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"xmulti(dataGroup[0][1][0]['date'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"md`#### specify type of chart and feed scales and data in`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"lineMultiValues = d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d.price))\n .x(d => xmulti(d.date))\n .y(d => ymulti(d.price))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"lineMultiValues(dataGroup[4][1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"dataGroup[0][1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"md`#### feed scales to axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"xmultiAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xmulti).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"ymultiAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(ymulti))\n .call(g => g.select(\".domain\").remove())\n // .call(g => g.select(\".tick:last-of-type text\").clone()\n // .attr(\"x\", 3)\n // .attr(\"text-anchor\", \"start\")\n // .attr(\"font-weight\", \"bold\")\n // .text(\"Total number of cases\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"xmultiAxis2 = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xmulti2).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"dataGroup","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"md`### color`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"colorScale = d3.scaleOrdinal().range(['blue', 'limegreen', 'black', 'orange', 'red', 'yellow'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"colorScale3 = d3.scaleOrdinal(dataGroup.map(d=> d[0]), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"checkCompany(parameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"companyList","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"md`## legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"legendOrigin = [85, 35]; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"labelHeight = 12;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"md`## Plotting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"d3.min(processedData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"d3.max(processedData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"d3.max(processedData, d => d.date).getFullYear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"d3.max(processedData, d => d.date).getFullYear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"processedData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"md`## Add selection and filtering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"md`https://stackoverflow.com/questions/5072136/javascript-filter-for-objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"function checkCompany(p) {\n let companies = {\n \"MSFT\" : p.MSFT, \n \"AMZN\": p.AMZN, \n \"IBM\": p.IBM, \n \"GOOG\": p.GOOG, \n \"AAPL\": p.AAPL} \n \n const filteredByValue = Object.fromEntries(Object.entries(companies).filter(([key, value]) => value === true))\n // companies.foreach( d => d\n \n return Object.keys(filteredByValue)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"checkCompany(parameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"processedData2 = processedData.filter(d => d.date >= new Date(parameters.start) && \n d.date <= new Date(parameters.end))\n .filter(d => checkCompany(parameters).includes(d.symbol))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":"md`https://stackoverflow.com/questions/46894352/filtering-an-array-of-objects-based-on-another-array-in-javascript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"dataGroup2 = d3.groups(processedData2, d => d.symbol)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"dataGroup2.filter( d => d[0].includes(checkCompany(parameters)))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":652,"value":"d3_annotation = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.3.0/d3-annotation.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":676,"value":"xmulti2 = d3.scaleTime()\n .domain(d3.extent(processedData2, d => d.date)) // d3.extend returns [min, max] \n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"ymulti2 = d3.scaleLinear()\n .domain([0, d3.max(processedData2, d => d.price)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"ymultiAxis2 = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(ymulti2))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"lineMultiValues2 = d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d.price))\n .x(d => xmulti2(d.date))\n .y(d => ymulti2(d.price))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":706,"value":"companyList","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":688,"value":"colorScale2 = d3.scaleOrdinal()\n .domain(companyList)\n .range([\"blue\", \"orange\", \"black\", \"yellow\", \"red\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"md`https://www.treasury.gov/connect/blog/pages/the-financial-crisis-five-years-later.aspx`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":621,"value":"md` # TODO \n- ☑️ fix color not match (but acts funkily when filtered to pre-Google era only. Colors will be messed up)\n- ☑️ rearrange code blocks \n- add annotation for 2008 financial crisis\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"