31:Ta98,### [TO-DO] Typecasting Data Use native JavaScript Array.map() to typecast the features in raw_data into the following: - date: JavaScript Date() type - temperature: Float type - humidity: Integer type - co2: Integer type **Do not mutate the original raw_data array**. Rather, save the modified data into a new variable data_1. If you need help reminding yourself how to parse the timestamps in the raw data, here's a table of all time codes in string form, copied from Lab 9: | Directive | Meaning | Example | | --------- | ----------------------------------------- | ----------------- | | `%Y` | 4-digit year | `2025` | | `%y` | 2-digit year | `25` | | `%m` | Month number (01–12) | `03` | | `%b` | Abbreviated month name | `Jan`, `Feb` | | `%B` | Full month name | `January` | | `%d` | Day of month (01–31) | `09` | | `%e` | Day of month (space-padded) | ` 9` | | `%a` | Abbreviated weekday | `Mon` | | `%A` | Full weekday | `Monday` | | `%H` | Hour (00–23, 24-hour clock) | `14` | | `%I` | Hour (01–12, 12-hour clock) | `02` | | `%p` | AM/PM indicator | `AM`, `PM` | | `%M` | Minute (00–59) | `05` | | `%S` | Second (00–61, includes leap seconds) | `09` | | `%L` | Milliseconds (000–999) | `123` | | `%Z` | Time zone abbreviation | `GMT`, `UTC` | | `%j` | Day of year (001–366) | `032` | | `%U` | Week number (Sunday as first day of week) | `07` | | `%W` | Week number (Monday as first day of week) | `06` | | `%x` | Locale-specific date | depends on locale | | `%X` | Locale-specific time | depends on locale | | `%%` | Literal `%` | `%` |32:T603,### [TO-DO] Plotting Line Data Below, you are provided some input data that lets you control the aspect ratio of a chart. The form lets you control the following elements: - dims.w: The "width" factor of your upcoming chart's aspect ratio. - dims.h: The "height" factor of your upcoming chart's aspect ratio. - dims.width: The actual pixel width for your upcoming chart. - dims.margin: The actual pixel margins in all directions for your upcoming chart. - dims.dependent: A dropdown that lets a user select which feature from data_1 to plot in your upcoming chart. Alongside these inputs, you're provided a **non-interactable** textbox that shows you what your current aspect ratio is, given your inputs. You must use this dims object to help you plot a dynamic line chart, with: - X-axis: date - Y-axis: dims.dependent - _Your chart must be able to dynamically switch based on this dropdown._ - Width: dims.width - Margins: dims.margins - Height: auto-calculated based on dims.w, dims.h, and dims.width Once you plot the chart, play around with the chart's aspect ratio. Which aspect ratio seems to be the best for each y-axis feature?33:T464,e1_chart = { dims; // [TO-DO] const width = dims.width; const height = width * (dims.h / dims.w); const margins = dims.margins; const svg = d3.create("svg") .attr('width', width + margins*2) .attr('height', height + margins*2); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins}, ${margins})`); const x = data_1.map(d => d.date) const y = data_1.map(d => d[dims.dependent]) const x_scale = d3.scaleTime() .domain(d3.extent(x)) .range([0, width]); const y_scale = d3.scaleLinear() .domain([d3.min(y), d3.max(y)]) .range([height, 0]); chart.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(x_scale)) chart.append('g') .call(d3.axisLeft(y_scale)) const line = d3.line() .x(d => x_scale(d.date)) .y(d => y_scale(d[dims.dependent])); chart.append("path") .datum(data_1) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", line); return svg.node(); }34:T62b,spaghetti = { // Define the width, height, and margins of the chart const width = 600, height = 400, margins = 50; // Define the SVG and chart const svg = d3.create("svg") .attr('width', width + margins*2) .attr('height', height + margins*2); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins}, ${margins})`); // Extract all values from our `sensors` array, as to create the appropriate y-axis scale const all_values = sensors.flatMap(s => s.values.map(d => d.value)); // Define our scales for the x-axis, y-axis, and color scale const x_scale = d3.scaleTime() .domain(d3.extent(sensor_data.map(d => d.timestamp))) .range([0, width]); const y_scale = d3.scaleLinear() .domain(d3.extent(all_values)) .range([height, 0]); const color_scale = d3.scaleOrdinal() .domain(sensors.map(s => s.name)) .range(sensors.map(s => s.color)) // Append our axes to our chart chart.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(x_scale)) chart.append('g') .call(d3.axisLeft(y_scale)) // Plot the lines for each sensor const line = d3.line() .x(d => x_scale(d.timestamp)) .y(d => y_scale(d.value)); chart.selectAll(".line") .data(sensors) .enter() .append("path") .attr("class", "line") .attr("fill", "none") .attr("stroke", d => color_scale(d.name)) .attr("stroke_width", 2) .attr("d", d => line(d.values)); // Return return svg.node() }35:T73c,### [TO-DO] Helper Function: Chart Generator Let's do something interesting and create a helper function create_subplot(). This helper function must be fed an item from our almighty sensors array (so it's fed a name, a color, and an array of values). You might also want to insert an `x_scale` and `y_scale` as additional parameters, to ensure that all our charts at the end of our day have the same time scale and y-axis scale. The output is a g group that can be inserted into an existing SVG. Your job is to create this create_subplot() with the following parameters: - parent: The parent element - usually svg. - sensor: An element from sensors. - x_scale: The scale used for our x-axis. Must be generated prior. - c_scale: The color scale. Must be generated prior. - width: The width of this subplot. - height: The height of this subplot. - x_pos: The x-position of this chart relative to the parent. - y_pos: The y-position of this chart relative to the parent. If succcessful, the function should append a new g element with all our data already plotted inside it and sized based on our parameters, alongside our axes and so on. Feel free to add a title and axis labels if you want, but that's optional. The function isn't expected to return anything. ${comment(html`Why don't we give you a y_scale like with our other scales? Because you have to adjust it to fit the size of your subplot.`)}36:T5da,multiples = { // Define the width, height, and margins of the bigger chart const width = 600, height = 600, margins = 50; // Define the width and height of our smaller subplots. Height is auto-calculated const subplot_width = 600 const subplot_height = height / sensors.length; // Define the SVG and chart const svg = d3.create("svg") .attr('width', width + margins*2) .attr('height', height + margins*2); // We define our scales, so that we can pass them onto our subplots const all_values = sensors.flatMap(s => s.values.map(d => d.value)); const x_scale = d3.scaleTime().domain(d3.extent(sensor_data.map(d => d.timestamp))).range([0, width]); const c_scale = d3.scaleOrdinal().domain(sensors.map(s => s.name)).range(sensors.map(s => s.color)) // Now, we iterativaly loop through `sensors` // and append our charts to our `svg` // For each chart, we need to not just generate them... // ... but also position them using `transform` and `translate()` // If we want to position them so that they're in a single column, for example, then we need to just translate them to correspond with our margins and adjust their height. sensors.forEach((sensor, i) => { // Calcuylate our plot's position let x_pos = margins; let y_pos = margins + ((margins + subplot_height) * i); // Produce our chart create_subplot(svg, sensor, x_scale, c_scale, subplot_width, subplot_height, x_pos, y_pos); }); // Return return svg.node() }37:T4d5,{ const width = 700, height = 400, margin_left = 150, margin_bottom = 50; const svg = d3.create("svg") .attr('width', width + margin_left) .attr('height', height + margin_bottom); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margin_left}, 0)`); const x_scale = d3.scaleTime() .domain([ d3.min(gantt_data, d => d.start), d3.max(gantt_data, d => d.end) ]) .range([0, width]); const y_scale = d3.scaleBand() .domain(gantt_data.map(d => d.task)) .range([0, height]) .padding(0.2); const color_scale = d3.scaleOrdinal() .domain([...new Set(gantt_data.map(d => d.category))]) .range(d3.schemeSet2); chart.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x_scale)); chart.append("g") .call(d3.axisLeft(y_scale)); chart.selectAll("rect") .data(gantt_data) .enter() .append("rect") .attr("x", d => x_scale(d.start)) .attr("y", d => y_scale(d.task)) .attr("width", d => x_scale(d.end) - x_scale(d.start)) .attr("height", y_scale.bandwidth()) .attr("fill", d => color_scale(d.category)); return svg.node(); }38:[{"id":"e037230774275ae9a9412e5e6bb2b1d7a87eb1186e58f5de4051dca845991b4f6a33c6126f67b73eb0a73f88aa38567590efc1bf33c12baf0687d791580230cd","href":"https://static.observableusercontent.com/files/e037230774275ae9a9412e5e6bb2b1d7a87eb1186e58f5de4051dca845991b4f6a33c6126f67b73eb0a73f88aa38567590efc1bf33c12baf0687d791580230cd","name":"ex_data_1@4.csv","type":"text/csv","lastModified":1763135635670.917,"size":2100},{"id":"219656b37bfa3ecbbd71c1ecb68a7c3b1007ef18d6e29a786d2253870343587264f2853c6444a2b021d17950043f6687c4e6b583ac8bc782070806d70e9dbb48","href":"https://static.observableusercontent.com/files/219656b37bfa3ecbbd71c1ecb68a7c3b1007ef18d6e29a786d2253870343587264f2853c6444a2b021d17950043f6687c4e6b583ac8bc782070806d70e9dbb48","name":"gantt_data@1.csv","type":"text/csv","lastModified":1763135635670.917,"size":1826},{"id":"01c09f43eef4d70784eddb621cd747b8157fa83fc8491740b99f383ef0b7b346052b55b35a69d2248a8007ddc079e449e788cbb3658a3117227be2b28e84bc20","href":"https://static.observableusercontent.com/files/01c09f43eef4d70784eddb621cd747b8157fa83fc8491740b99f383ef0b7b346052b55b35a69d2248a8007ddc079e449e788cbb3658a3117227be2b28e84bc20","name":"sensor_data.csv","type":"text/csv","lastModified":1763135635670.917,"size":21307}] 2f:{"title":"Week 11 Lab: Solutions","cells":[{"id":0,"value":"# Week 11 Lab: Solutions","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"## Exercise #1: Basic Time Series Line Chart\n\nWe already imported the raw data from ex_data_1@4.csv into raw_data, without type-casting the data:","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"raw_data = FileAttachment(\"ex_data_1@4.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"// [TO-DO]\n\ndata_1 = {\n const parseDate = d3.timeParse(\"%Y-%m-%d\");\n return raw_data.map(row => ({\n date: parseDate(row.date),\n temperature: parseFloat(row.temperature),\n humidity: parseInt(row.humidity),\n co2: parseInt(row.co2)\n }))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"viewof dims = Inputs.form({\n w: Inputs.range([1, 20], {value: 4, step: 1, label: \"Aspect ratio: width\"}),\n h: Inputs.range([1, 20], {value: 3, step: 1, label: \"Aspect ratio: height\"}),\n width: Inputs.range([200, 900], {value: 600, step: 50, label: \"Chart width\"}),\n margins: Inputs.range([0, 100], {value: 50, step: 5, label: \"Chart margins\"}),\n dependent: Inputs.select(['temperature', 'humidity', 'co2'], {label: \"Dependent variable\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof aspect_ratio_calc = {\n function gcd(a, b) {\n if (!b) return a;\n return gcd(b, a % b);\n }\n\n const _gcd = gcd(dims.w, dims.h);\n const _w = dims.w / _gcd;\n const _h = dims.h / _gcd;\n \n return Inputs.text({\n label: \"Aspect ratio\",\n value: `${_w} : ${_h}`,\n disabled: true\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"## Exercise 2: Solving Spaghetti Plots\n\nWe have some sensor data from sensor_data.csv. We've already processed the data and typecast the timestamps to JavaScript's Date() type.","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"sensor_data = FileAttachment(\"sensor_data.csv\").csv().then(_data => {\n const parseDate = d3.timeParse(\"%Y-%m-%d %H:%M:%S\");\n return _data.map(row => ({\n timestamp: parseDate(row.timestamp),\n sensor1: parseFloat(row.sensor1),\n sensor2: parseFloat(row.sensor2),\n sensor3: parseFloat(row.sensor3),\n sensor4: parseFloat(row.sensor4),\n sensor5: parseFloat(row.sensor5)\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"sensor_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"We also assign each sensor a color, like so:","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"sensor_colors = ({\n sensor1: \"#1f77b4\", // blue\n sensor2: \"#ff7f0e\", // orange\n sensor3: \"#2ca02c\", // green\n sensor4: \"#d62728\", // red\n sensor5: \"#9467bd\" // purple\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"We created an almighty sensors array, where each item is a big Object that each represents a sensor. Each object thus should have the following:\n\n- name: The name of the sensor, like \"sensor1\" or \"sensor3\"\n- values: An object array where each item is an object with timestamp and value\n- color: The color, lifted from sensor_colors","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"sensors = {\n \n // 1. Extract sensor names from `sensors` ...\n const sensor_names = Object.keys(sensor_colors);\n \n // 2. Flatten all the data into a single large array ...\n const all_values = sensor_data.flatMap(d =>\n sensor_names.map(s => d[s])\n );\n \n // 3. Re-mold the data into a series, where sensors are the keys and the values are arrays of objects.\n return sensor_names.map(name => ({\n name,\n color: sensor_colors[name],\n values: sensor_data.map(d => ({\n timestamp: d.timestamp,\n value: d[name]\n }))\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"The thing about this data is that, if you plot all that data into the same plot so that each line represents a specific sensor, you'll get the following chart:","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"Swatches(d3.scaleOrdinal(sensors.map(s => s.name), sensors.map(s => s.color)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"That plot is very noisy - it's basically a **\"spaghetti plot\"**. There are several strategies to solve this problem. One of those strategies is to create **\"small multiples\"**, where we subdivide the data into smaller charts. Let's try a multi-step implementation of this right now.","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"function create_subplot(parent, sensor, x_scale, c_scale, width, height, x_pos, y_pos) {\n // TO-DO \n\n // Create our `g` chart\n const chart = parent.append('g')\n .attr('width', width)\n .attr('height', height)\n .attr('transform', `translate(${x_pos}, ${y_pos})`)\n\n // Calculate our y-scale\n const y_scale = d3.scaleLinear()\n .domain(d3.extent(sensor.values.map(v => v.value)))\n .range([height, 0]);\n \n // Append our axes to it\n chart.append('g')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(x_scale))\n chart.append('g')\n .call(d3.axisLeft(y_scale))\n\n // Append our line\n const line = d3.line()\n .x(d => x_scale(d.timestamp))\n .y(d => y_scale(d.value));\n \n chart.append(\"path\")\n .attr('id', sensor.name)\n .attr(\"class\", \"line\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", d => c_scale(sensor.name))\n .attr(\"stroke_width\", 2)\n .attr(\"d\", line(sensor.values))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"### [TO-DO] Combining All Charts\n\nOnce we have create_subplot() created, then we can see if it works.\n\nIn the code below, we've provided the scaffolding for our almightly chart. It'll print our data in a single column of subplots. All we need to do is combine it with create_subplot(). Keep in mind that you need to calculate the position of each chart manually, given the provided SVG parameters!","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"## Chart Example: Gantt Charts With D3\n\nWe have a timestamped data called gantt_data@1.csv. If we load it in, here's what it looks like:","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"gantt_data = FileAttachment(\"gantt_data@1.csv\").csv().then(_data => {\n return _data.map(row => ({\n task: row.task,\n category: row.category,\n start: new Date(row.start),\n end: new Date(row.end)\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"This is a unique set of data because each entry has a \"start\" timestamp and an \"end\" timestamp. We can take advantage of this to generate a **Gantt Chart**, which visualizes time series as bars.\n\nThe example below provides a good idea of what that chart might look like. Feel free to take a look at it at your own pace. Though, keep in mind of the following:\n\n1. How did we define each rectangle for each entry?\n2. How did we process the timestamps for each entry?","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"import { css, comment } from \"@rk2546/2025-infovis-cse_notebook-gallery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"css","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}