29:null 2a:["$","title",null,{"children":"Temporal data | Visualization for Transparency Foundation (Fundació ViT) | Observable"}] 2f:T552,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); const yScale = d3.scaleLinear() .domain([d3.min(desiredData, d => d.minTemp), d3.max(desiredData, d => d.maxTemp)]).nice() .range([height - margin.bottom, margin.top]); const xScale = d3.scaleUtc() .domain(d3.extent(desiredData2, d => d.date)) .range([margin.left, width - margin.right]); const curvedline = key => {return d3.line() .curve(d3[curve]) //.curve(d3.curveCardinal) .defined(d => !isNaN(d.date) && !isNaN(d[key]) ) .x(d => xScale(d.date)) .y(d => yScale(d[key]))}; const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .datum(desiredData2) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", curvedline('maxTemp')); svg.selectAll("circle") .data(desiredData2) .join("circle") .attr("cx", d => xScale(d.date)) .attr("cy", d => yScale(d.maxTemp)) .attr("r", 3) .style("fill", "steelblue"); return svg.node(); }30:[{"id":"c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","href":"https://static.observableusercontent.com/files/c97db823eca27e1e4fdc0e3379a984d9d5475a2d7fc882175744e12a0b31dc91c04a25986a72cdc6b6bbea2ac8e6e83893857e52fe19dacadb5f344381b83bbe","name":"GironaWeatherData.csv","type":"text/csv","lastModified":1676389428151.084,"size":9013},{"id":"2c1978fc4618e52aac39c2f4174d6cb02f9519a7089e4cd4f778bcce904b50503d3954fcb9fdb83358ce1a5e5248bd03ac5affb6cad01f3599d05f46e6037530","href":"https://static.observableusercontent.com/files/2c1978fc4618e52aac39c2f4174d6cb02f9519a7089e4cd4f778bcce904b50503d3954fcb9fdb83358ce1a5e5248bd03ac5affb6cad01f3599d05f46e6037530","name":"areachart.png","type":"image/png","lastModified":1676389428151.084,"size":53467},{"id":"a8553a41e21a0fef90a62048ca03d759b21db47b01669f8d32d2e422c2cbd7c142e9e9e6805797700bf0adba1f012196295bc8c9dabe385630720f615442b218","href":"https://static.observableusercontent.com/files/a8553a41e21a0fef90a62048ca03d759b21db47b01669f8d32d2e422c2cbd7c142e9e9e6805797700bf0adba1f012196295bc8c9dabe385630720f615442b218","name":"areachartpro.png","type":"image/png","lastModified":1676389428151.084,"size":144285}] 2d:{"id":"6660ab28c38b03db","slug":null,"title":"Temporal data","thumbnail":"42cc45f65b67e917806bf07ce6c1130bf02f5eb620748bb841978ab648c22ae2","access_level":"public","create_time":"$D2023-02-14T15:43:48.151Z","update_time":"$D2023-02-14T15:43:48.151Z","view_time":null,"first_public_time":"$D2023-02-14T15:43:48.151Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024"},"version":918,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}],"members":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null,"role":"editor"},{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"c12f09c9b891d3ce","slug":"2022-23-mvtec-data-visualization-programming-module","title":"2022-23 MVTEC Data Visualization Programming module","owner":{"id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)"}},"type":"notebook","body":{"title":"Temporal data","cells":[{"id":0,"value":"md`# Temporal data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`## Dates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"md`JavaScript **[Date objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)** represent a single moment in time in a platform-independent format. Internally, Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"date1 = new Date(); //returns the current date/time","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"Date: ${date1.toDateString()} or ${date1.getDate()} / ${date1.getMonth()+1} / ${date1.getFullYear()}.\n\nTake care with *.getDay()* (0..6) --> ${date1.getDay()} (because it's ${new Intl.DateTimeFormat('en-US', {weekday: 'long'}).format(date1)})\n\nUse *.getDate()* for the day number --> ${date1.getDate()}\n\nTake care with *.getMonth()* (0..11) --> ${date1.getMonth()} (always the month number minus 1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"md`You can create dates from strings (if they have the a [specific format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format)), but is somewhat implementation-specific, so it isn't recomended at all.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"date2 = new Date(\"10/25/2022\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"date2.toDateString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"md`If we have a date on a string with any given format which isn't standard (according to the [ECMAScript specification](https://tc39.es/ecma262/#sec-date-time-string-format)), we need to get the date, the month, and the year and construct a new **Date** object:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"strDate = \"20221025\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"date3wrong = new Date(strDate); //Date(\"20221025\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"dt2 = strDate.substring(6,8);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"dt2 + 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"dt1 = parseInt(strDate.substring(6,8));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"dt1 + 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"date3init = {\nvar dt1 = parseInt(strDate.substring(6,8));\nvar mon1 = parseInt(strDate.substring(4,6));\nvar yr1 = parseInt(strDate.substring(0,4));\nvar date = new Date(yr1, mon1-1, dt1); //Warning with the month!!!!\nreturn date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"dateCreator = function(str){\n var dt1 = parseInt(str.substring(6,8));\nvar mon1 = parseInt(str.substring(4,6));\nvar yr1 = parseInt(str.substring(0,4));\nvar date = new Date(yr1, mon1-1, dt1);\nreturn date;\n}; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"date3 = dateCreator(strDate);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"date3.toDateString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"md`## Data wrangling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":825,"value":"For the session today, we will use again the *Girona weather* dataset, which contains weather data (maxium and minimum temperature, precipitation,...) for three months in Girona. In that case, since the date values have the format `DD/MM/YYYY`, which is a standard format, simply using `new Date (d[\"Date time\"])` will create the correct JavaScript date objects.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":564,"value":"weather= await FileAttachment(\"GironaWeatherData.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"desiredData = weather.map(d => { \n var newd = {\n date : new Date(d[\"Date time\"]),\n maxTemp : +d[\"Maximum Temperature\"],\n minTemp : +d[\"Minimum Temperature\"],\n condition : d[\"Conditions\"], //d.Conditions\n precipitation : +d[\"Precipitation\"]\n}\n return newd;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"md`## Scales with dates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"md`Time scales are commonly used for charts where one axis (usually the X axis) represents the time or date. If a dimension of the data is expressed as Date objects, you will probably use d3.scaleTime instead of d3.scaleLinear to represent it on screen, because it better expreses these objects.\n\nThere are two D3 [time scales](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time-scales): *d3.scaleUtc()* and *d3.scaleTime()*. They are almost equivalent, but in the first one the returned time scale operates in Coordinated Universal Time rather than local time.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"xScale = d3.scaleUtc()\n .domain(d3.extent(desiredData, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"xScale2 = d3.scaleTime()\n .domain(d3.extent(desiredData, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"In this plot we have added some margin (following the [margin conventions](https://observablehq.com/@d3/margin-convention)) to have space to place the axis. You can see the definition of the margin object in the Appendix.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":414,"value":"## Line plot\n\nLine plot is a very used technique to show the evolution of a numerical value over time. To create this plot with D3, we will have to create a [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) which isn't very intuitive and its generation from the data elements isn't trivial (a nice [tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) is here). Fortunately, the *[d3.line()](https://github.com/d3/d3-shape/blob/master/README.md#lines)* function will help us on that. This function creates a *shape* that follows a sequence of points. Its default curve interpolator connects the points with straight line segments, creating a polygonal chain or polyline:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":425,"value":"p = d3.line()([[10, 60], [40, 90], [60, 10], [190, 10]]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"md`A good introduction to *d3.line()* can be found on [this notebook](https://observablehq.com/@d3/d3-line).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"md`To create our plots, we will create a path from the data values (and using the corresponding scales for that):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"lineMaxTemp = d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d.maxTemp))\n .x(d => xScale(d.date))\n .y(d => yScale(d.maxTemp))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"lineMinTemp = d3.line()\n .defined(d => !isNaN(d.date))\n .x(d => xScale(d.date))\n .y(d => yScale(d.minTemp))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"yScale = d3.scaleLinear()\n .domain([d3.min(desiredData, d => d.minTemp), d3.max(desiredData, d => d.maxTemp)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":"We can also define the axis in a similar way we did in the previous notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":625,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"md`Then, we will be able to add these paths on our plot in the following manner:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"temporalchart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"purple\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", lineMaxTemp);\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", lineMinTemp);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"md`Note that in this case, we use the function *.datum(...)* instead of *.data(...)*. This is because we only append a single element (one path) to the SVG, although this single element is created from an array of data. We neither use the *.join()* for the same reason. Then, we will have to set to the *d* attribute the line generator function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"md`In the previous line definitions, we used a very similar code for both *lineMaxTemp()* and *lineMinTemp()* functions. When programming, code repetition usually indicates a bad code structure. For instance, in this case we could define a single function with a parameters, which indicates which key has to be used. In this way, a single line function has to be defined:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"line = key => {return d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d[key]) )\n .x(d => xScale(d.date)) \n .y(d => yScale(d[key]))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"purple\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line('maxTemp'));\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line('minTemp'));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"*Tiny task*: Create a line plot for the humidity data in Girona.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":814,"value":"### Daily task\n\nCreate a line plot with the Microsoft stock value given in the following dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":816,"value":"MSFTstockvalue = stockValues.filter(d => d.symbol === \"MSFT\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"### Missing data\n\nWhen confronted with data points that are not well-defined, the line must absolutely not break (because a value is NaN) nor jump to a fixed point such as [0,0]. It should either ignore the fact or stop before (and restart after).\n\nThe function *line.defined*, which sets (or reads) a function that returns true when the data point should be drawn, and false when the line should stop. (The default value for this function is the constant true.) This reflects the underlying data quality better, at the expense of continuity. In this [notebook](https://observablehq.com/@d3/d3-line#cell-329), you can see more details.\n\nLet's see one example. Imagine that our automatized system sets the value -300º (a value below the absolute 0 degrees Kelvin) when there's a problem. In that case, we have to omit those values. By correctly defining the *line.defined* function, we can easily remove them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":765,"value":"missingWeather = copiedData.map((d,i) => {d.date = new Date(d.date);if(i>30 && i<40){d.maxTemp = -300} return d;}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"copiedData = JSON.parse(JSON.stringify(desiredData));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n const lineMissingMaxTemp = d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d.maxTemp) && d.maxTemp !== -300)\n .x(d => xScale(d.date))\n .y(d => yScale(d.maxTemp));\n \n svg.append(\"path\")\n .datum(missingWeather)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"purple\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n// .attr(\"d\", lineMissingMaxTemp);\n .attr(\"d\", line('maxTemp'));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"### Curve options\n\nIn the previous examples, we have always plotted straight-line segments from one point to the next one. But there are other ways a path can join the dots. d3-shape offers several [curve factories](https://github.com/d3/d3-shape/blob/master/README.md#curves) that will enable a host of possibilities. Next, some of the options are shown:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":745,"value":" curvedline = key => {return d3.line()\n .curve(d3[curve]) //Curve function defines which strategy is used\n //Usually you have something similar to .curve(d3.curveCardinal)\n .defined(d => !isNaN(d.date) && !isNaN(d[key]) )\n .x(d => xScale(d.date))\n .y(d => yScale(d[key]))} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":748,"value":"viewof curve = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":876,"value":"desiredData2 = desiredData.filter(d => {const newdate = new Date(\"09/01/2020\"); return d.date < newdate;});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"md`## Area chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"For the area charts, instead of defining a line, we have to define an area path (a path that encloses the area and it's filled with a solid color). Afortunately, D3 provides as with the *[area()](https://github.com/d3/d3-shape/blob/v2.0.0/README.md#areas)* function. An area is defined by two bounding lines that, usually, share the same x-values (x0 = x1), differing only in y-value (y0 and y1); most commonly, y0 is defined as a constant representing zero in case the area starts from the plot baseline.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":116,"value":"area = d3.area()\n .x(d => xScale(d.date))\n .y0(d => yScale(0))\n .y1(d => yScale(d.maxTemp))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":893,"value":"area(desiredData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"md`Similarly to the plot chart, we will have to add the area chart using the datum function and setting the d attibute as the area function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"areachart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", 'steelblue')\n .attr(\"d\", area)\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"purple\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line('minTemp'));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"The plot can also show the area between two paths:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":688,"value":"area2 = d3.area()\n .x(d => xScale(d.date))\n .y0(d => yScale(d.minTemp))\n .y1(d => yScale(d.maxTemp))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":692,"value":"meanline = d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d.maxTemp) && !isNaN(d.minTemp) )\n .x(d => xScale(d.date)) \n .y(d => yScale((d.maxTemp + d.minTemp)/2));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"areachart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", 'steelblue')\n .attr(\"d\", area2)\n\n svg.append(\"path\")\n .datum(desiredData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"purple\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", meanline);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"md`## Multi-line plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"Usually, we want to render multiple lines, each one corresponding to a different serie. To illustrate this case, let's imagine that we want to compare the stock value of different companies:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":701,"value":"stockValues = (await require('vega-datasets@1'))['stocks.csv']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"niceStockValues = stockValues.map(d => {return {\n name : d.symbol,\n date : new Date (d.date),\n price : +d.price};});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"What we need now is to group the data according to the different countries. To do so, D3 has the function *[groups( data, key)](https://github.com/d3/d3-array/blob/v2.8.0/README.md#groups)* that returns and Array that groups the parameter *data* according to the elements that have the same value on the *key* element. In our example, we have to use it in this way:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":706,"value":"groupedData = d3.groups(niceStockValues, d => d.name);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":841,"value":"Once we have prepared the data, we need to prepare the scales, axes and the other elements in a similar way than the basic line chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":709,"value":"stockxScale = d3.scaleTime()\n .domain(d3.extent(niceStockValues, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"stockyScale = d3.scaleLinear()\n .domain([0, d3.max(niceStockValues, d => d.price)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":843,"value":"If we want a different color for each company, we can create an [ordinal scale](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#ordinal-scales), so we need the domain of the company values (all the possible values):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":715,"value":"groupedData.map(d=> d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"stockColorScale = d3.scaleOrdinal()\n .domain(groupedData.map(d=> d[0]))\n .range(d3.schemeCategory10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":852,"value":"In that case, we use the scheme `schemeCategory10`, but we can use any of that [list](https://github.com/d3/d3-scale-chromatic#categorical).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":850,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"stockxAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(stockxScale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":722,"value":"stockyAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(stockyScale))\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(\"Stock price\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"stockLine = d3.line()\n .defined(d => !isNaN(d.date))\n .x(d => stockxScale(d.date))\n .y(d => stockyScale(d.price))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"multilinechart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\")\n .call(stockxAxis);\n\n svg.append(\"g\")\n .call(stockyAxis);\n\n svg.selectAll('.line')\n .data(groupedData) //Now is data instead of datum! Because there are multiple lines\n .join('path')\n .attr(\"class\", \"line\")\n .attr(\"d\", d => stockLine(d[1]))\n .attr(\"stroke\", d => stockColorScale(d[0]))\n .style(\"fill\", \"none\")\n .style(\"stroke-width\", 1.5);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"md`## Extra Daily Task`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"md`Create an area chart showing the minimum and maximum temperatures on Seattle from 2014 to 2016. The object **weather** contains the data you need (and some that you don't):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"weatherVega = (await require('vega-datasets@1'))['weather.csv']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"cities = [...new Set(weatherVega.map(d=>d.location))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"weatherVega[2000]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"md`The final chart has to look like:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"FileAttachment(\"areachart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"md`If you get this first plot, try to add the information about the precipitation, achieving a plot similar to:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"FileAttachment(\"areachartpro.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":905,"value":"Note that probably this isn't a good design choice!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":72,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"md`We define the margin, following the [margin conventions](https://observablehq.com/@d3/margin-convention):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"d3 = require(\"d3@7\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"