31: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(); }32: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(); }33:[] 2f:{"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"},{"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"},{"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"},{"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"},{"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"},{"id":21,"value":"stockValues = (await require('vega-datasets@1'))['stocks.csv']()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":47,"value":"md`## Preparing data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":68,"value":"companyList = stockValues.map(item => item.symbol)\n .filter((value, index, self) => self.indexOf(value) === index)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":202,"value":"processedData.filter( d => d.price != undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"dataGroup = d3.groups(processedData, d => d.symbol)","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`## Define drawing area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"margin = ({top: 30, right: 30, bottom: 50, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Scales` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`#### scales for data projection`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":153,"value":"d3.extent(processedData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"ymulti(dataGroup[0][1][0]['price'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"xmulti(dataGroup[0][1][0]['date'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`#### specify type of chart and feed scales and data in`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":178,"value":"lineMultiValues(dataGroup[4][1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"dataGroup[0][1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`#### feed scales to axis`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":246,"value":"dataGroup","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`### color`","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"colorScale = d3.scaleOrdinal().range(['blue', 'limegreen', 'black', 'orange', 'red', 'yellow'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"colorScale3 = d3.scaleOrdinal(dataGroup.map(d=> d[0]), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"checkCompany(parameters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"companyList","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`## legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"legendOrigin = [85, 35]; ","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"labelHeight = 12;","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`## Plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"d3.min(processedData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"d3.max(processedData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"d3.max(processedData, d => d.date).getFullYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"d3.max(processedData, d => d.date).getFullYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"processedData","pinned":true,"hidden":false,"mode":"ojs"},{"id":684,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`## Add selection and filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"md`https://stackoverflow.com/questions/5072136/javascript-filter-for-objects`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":479,"value":"checkCompany(parameters)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":503,"value":"dataGroup2 = d3.groups(processedData2, d => d.symbol)","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"dataGroup2.filter( d => d[0].includes(checkCompany(parameters)))\n","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":706,"value":"companyList","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"colorScale2 = d3.scaleOrdinal()\n .domain(companyList)\n .range([\"blue\", \"orange\", \"black\", \"yellow\", \"red\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":649,"value":"md`https://www.treasury.gov/connect/blog/pages/the-financial-crisis-five-years-later.aspx`","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W33","stdlib":"1","titling":"auto"}