27:null 28:["$","title",null,{"children":"Homework 5: D3 Big-Data Interaction | Ramnath Raghu | Observable"}] 2d:T9e1,### Instructions In this assignment, you will design and implement methods for interactively navigating big 1D time series data with 1 million data points. For example, physics measurements or stock prices at every second for a year. Your goal is to enable users to see trends and interactively navigate this very large data space. We navigate 1M timeseries by Overview+Detail. Each view is 1000 pixels wide, enabling access to 1000^2 = 1M data points. Each pixel column in the Overview represents 1000 aggregated data points to be shown in Detail view. Fill in the missing code in the notebook. You may change the existing code if needed. The data is available in the **T** and **Y** variables. Requirements: 1. Overview visualization design. * Do NOT attempt to render all 1M points in the Overview, it will crash the browser. * Eliminate the existing Ysample polyline. It does not provide good information "scent" for the Overview, because it filters most of the data. But we included this as an example for you. The following solutions will use aggregation metrics for better scent. * Draw a polyline of the column means. Each pixel column in Overview represents 1000 data points; compute the mean for each pixel column and render as a polyline. * Draw a min-max envelope of the data to give "scent" about the data range. Compute min and max of each column. Hint: one method is to connect a min polyline and max polyline to create a closed polyline shape, and set the fill color. 1. Overview interaction design. * Clicking or dragging in the plot selects a pixel column, representing 1000 aggregated time points. * The selected column is highlighted by a visual indicator or brush. * The selection is linked to the Detail view, such that the 1000 data points represented by the selected pixel column in the Overview will be displayed in the Detail view. * Interactions should perform in realtime. 1. Detail visualization design. * Draw a polyline representing a 1000 point sub-range of the timeseries data, as determined by the Overview selection. * The plot (including x-axis labeling) should update with Overview interaction. 1. Detail interaction design. * Clicking or dragging in the Detail plot selects the data point on the same pixel column as the mouse. * The selected point is highlighted using a visual indicator. * The t and y values of the selected point are displayed nearby in textual form. Example solution screenshot posted here: https://canvas.vt.edu/files/250940332e:T71e,// Create Overview visualization overview = { // Create SVG const height = 200; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); // Create scales let xScale = d3 .scaleLinear() .domain([0, n]) .range([margin.left, width - margin.right]); let yScale = d3 .scaleLinear() .domain(extentY) .nice() .range([height - margin.bottom, margin.top]); // Draw axes const xAxis = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); const yAxis = svg .append("g") .attr("transform", `translate(${margin.left - 1},0)`) .call(d3.axisLeft(yScale)); // Draw timeseries overview here svg. append("polyline") .attr("fill", "none") .attr("stroke", "#00008B") .attr("stroke-width", 1) .attr("points", polyline(Tsample, Ysample, xScale, yScale)) svg.append("polyline").attr("fill", "none") .attr("stroke", "none") .attr("stroke-width", 1) .attr("points", polyline(Tsample, maxArray, xScale, yScale)) svg.append("polyline").attr("fill", "none") .attr("stroke", "none") .attr("stroke-width", 1) .attr("points", polyline(Tsample, minArray, xScale, yScale)) let bars = svg .append("polyline") .attr("fill", "none") .attr("stroke", "lightblue") .attr("stroke-width", 0.5) .attr("points", envelope(Tsample, Y, xScale, yScale)) // Interaction here .on('click', function(event) { mutable xData = xScale.invert(event.offsetX);// log the mouse x,y position }) svg.append("rect") .attr("x",xScale(xData)) .attr("y",yScale(14)) .attr("fill","none") .attr("stroke","orange") .attr("width",2) .attr("height",yScale(-6)) return svg.node(); }2f:T673,// Create Detail view detailview = { // Create SVG const height = 400; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); // Create scales let xScale = d3 .scaleLinear() .domain([Tdetail[0], Tdetail[Tdetail.length - 1] + 1]) .range([margin.left, width - margin.right]); let yScale = d3 .scaleLinear() .domain(extentY) .nice() .range([height - margin.bottom, margin.top]); // Draw axes const xAxis = svg .append("g") .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xScale)); const yAxis = svg .append("g") .attr("transform", `translate(${margin.left - 1},0)`) .call(d3.axisLeft(yScale)); // Draw time series here. something like this... let small_circle = svg .append("circle") .attr("cx", 30) .attr("cy", 30) .attr("r", 5) .attr("fill", "none") .attr("stroke", "darkred") .attr("stroke-width", 4) .attr("opacity", 0); const pline = svg .append("polyline") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("points", polyline(Tdetail, Ydetail, xScale, yScale)) // Interaction here .on('click', function(event) { mutable brushCoords = xScale.invert(event.offsetX); mutable Ydata = yScale.invert(event.offsetY); small_circle.attr("opacity",2) .attr("cx", d3.pointer(event, svg.node())[0] + "px") .attr("cy", d3.pointer(event, svg.node())[1] + "px" )// log the mouse x,y position }); return svg.node(); }30:[] 2b:{"id":"716af260f3d2f713","slug":null,"title":"Homework 5: D3 Big-Data Interaction","thumbnail":"9cd421b192c3972f4984419d71f39e4742c212b567a649242eaa28f8927f412c","access_level":"public","create_time":"$D2022-12-07T20:36:39.138Z","update_time":"$D2022-12-07T20:37:38.324Z","view_time":null,"first_public_time":"$D2022-12-07T20:36:39.138Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"af1f32a3e50946a5","login":"rramnath","name":"Ramnath Raghu","avatar_url":"https://avatars-next.observableusercontent.com/335952bcd3fa1aabe6068bb0a96927c80df69f1e96705c7a1e1b99da8d0e71ce","tier":"starter_2024"},"version":1845,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfa54124c5920c0f","login":"rramnath","name":"Ramnath Raghu","avatar_url":"https://avatars-next.observableusercontent.com/335952bcd3fa1aabe6068bb0a96927c80df69f1e96705c7a1e1b99da8d0e71ce","tier":null}],"members":[{"type":"individual","id":"dfa54124c5920c0f","login":"rramnath","name":"Ramnath Raghu","avatar_url":"https://avatars-next.observableusercontent.com/335952bcd3fa1aabe6068bb0a96927c80df69f1e96705c7a1e1b99da8d0e71ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Homework 5: D3 Big-Data Interaction","cells":[{"id":1,"value":"# Homework 5: D3 Big-Data Interaction\n\nEnter your **name** here: **Ramnath Raghu**\n\nEnter your **PID** here: **rramnath**\n\n**How to submit this homework:** (Note these instructions have changed due to recent changes in the ObservableHQ system.)\n1. \"Fork\" this notebook.\n1. Edit the notebook to create your solution.\n1. Click \"Share...\", select Public **\"Can view (unlisted)\",** then \"Save\".\n * Important: make sure to choose \"unlisted\".\n1. Copy the notebook URL and paste it into your Canvas Homework submission.\n1. Do not edit after the deadline, we will check the notebook edit date. If you want to edit, fork it and edit the forked one.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1134,"value":"## Overview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1171,"value":"

Legend: Mean, Min-Max envelope

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"

Selected time range: ${xData} - ${xData + size}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1137,"value":"## Detail ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"

Selected point: f( ${brushCoords} ) = ${Ydata}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1185,"value":"# Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1739,"value":"mutable brushCoords = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"// A regular sampling of T, based on size.\n// This will be useful for the x axis of the Overview.\nTsample = d3.range(0, n, size)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"// A regular sampling Y, based on Tsample.\n// This is not a very good Overview summary of Y, because it filters most of the data. Poor information \"scent\".\n//Ysample = Tsample.map((t) => Y[t])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"envelope = (T, Y, tscale, yscale) =>\n T.map((t, i) => tscale(t).toFixed(1) + \",\" + yscale(maxArray[i]).toFixed(1) + \" \" + tscale(t).toFixed(1) + \",\" + yscale(minArray[i]).toFixed(1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"// Initial t value for where the Detail view starts on the left side of its x axis\ntStartDetail = n / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"// This is a sub-range of T, to be used in the Detail view\nTdetail = T.slice(xData, xData + size)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"// This is a sub-range of Y, to be used in the Detail view\nYdetail = Y.slice(xData, xData + size)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"// Transform timeseries data into html polyline points string of form: \"x,y x,y x,y ...\"\n// https://www.w3schools.com/graphics/svg_polyline.asp\n// HTML rendering chokes on more than 10k polyline points\n// T = array of times\n// Y = corresponding array of y data values Y=f(T)\n// tscale = d3 Scale to convert t values to x axis pixels\n// yscale = d3 Scale to convert y values to y axis pixels\npolyline = (T, Y, tscale, yscale) =>\n T.map((t, i) => tscale(t).toFixed(1) + \",\" + yscale(Y[i]).toFixed(1)).join(\n \" \"\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"margin = ({ top: 30, right: 30, bottom: 30, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"chunkSize = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"minArray=Tsample.map((t) => d3.min(Y.slice(t, t+1000))).map(r => r === undefined ? 0 : r)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"maxArray=Tsample.map((t) => d3.max(Y.slice(t, t+1000))).map(r => r === undefined ? 0 : r)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"Ysample=Tsample.map((t) => d3.mean(Y.slice(t, t+1000))).map(r => r === undefined ? 0 : r)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"mutable xData= 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1805,"value":"mutable Ydata = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"minArray2=Tsample.map((t) => (Y.slice(t, t+1000)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"# Data\n\nUse the data stored in **T and Y variables** in your code. Do not call the dataSim function yourself because it generates different random timeseries every time its called.\n\n**Do not edit the code in this section**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"// This is the time data to use\n// T = [0, ..., n-1]\n// We use simle integer values as time values\nT = d3.range(0, n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"// This is the timeseries data values to use.\n// Timeseries y data values, corresponds to T array.\n// Y = f(T)\nY = dataSim(T)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"// total data size = overview width * detailview width\nn = size ** 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"// The width of each visualization. Overview+detail can visualize size^2 data.\nsize = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"// Fix the visualization width for our data size\nwidth = size + margin.left + margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"extentY = d3.extent(Y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"// Do not edit this cell.\n\n// Produces semi-randomized simulated timeseries data, Y = f(T), t=0...n-1\n// T = array of time values [0,...,n-1]\ndataSim = function (T) {\n let r = d3.range(0, 10).map((i) => Math.random() + 0.5); // randomize parameters\n return T.map(\n (t) =>\n // Convolve signals of various frequencies\n Math.sin(t / 100000) * Math.sin(t / 1000000 + r[1]) * r[2] * 2 +\n Math.sin(t / 100) * Math.sin(t / 100000 + r[3] * 10) * r[4] * 3 +\n Math.sin(t / 10) * Math.sin(t / 1000 + r[5] * 100) * r[6] * 2 +\n Math.sin(t / 1) * Math.sin(t / 100 + r[7]) * r[8] * 1 +\n Math.random() * r[9] * 2 +\n (Math.random() < 0.001 ? (Math.random() - 0.5) * 10 : 0) // intersperse some spikes\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"