2c:null 2d:["$","title",null,{"children":"Summary View | valentinachaconbuitrago | Observable"}] 32:T22c3,chart = { let height = 360 let margin = {top: 60, right: 70, bottom: 60, left: 60} let innerHeight = height - margin.top - margin.bottom; //let innerHeight = 230; let innerWidth = width - margin.left - margin.right; let chartidx = "chart-metrics"; //TODO: selectType -> metric const selectType = "Jitter"; let extData = d3.extent(setData, d => d[selectType]); let extDates = d3.extent(setData, d => d.TestTime); let selectSeries = d3.groups(setData, d => d.Type); let selectLookup = d3.group(setData, d => d.TestTime.toISOString()); let selectDates = Array.from(selectLookup).map(d => d[1][0].TestTime); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartidx); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain([0, extData[1]]) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); let area = d3.area() .x(d => x(d.TestTime)) .y1(d => y(d[selectType])) .y0(innerHeight) let line = d3.line() .curve(d3.curveStep) .x(d => x(d.TestTime)) .y(d => y(d[selectType])) let lineGroup = group.append("g") .attr('class', 'line-group') lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr("class", function(d) { return 'ts-area ts-area-' + d[0]; // }) .attr('d', (d) => area(d[1])) .style("fill", function(d) { console.log("fill in area", dataDict[d[0]].name) if(dataDict[d[0]].name =="general"){ return dataDict[d[0]].rgb } return "none" }) .style("opacity", "0.5"); lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return dataDict[d[0]].rgb }) .style("opacity", "0.8"); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.type = d[0]; obj.label = dataDict[obj.type].name; obj.color = dataDict[obj.type].rgb; //TODO: revisar para que sirve val --> en select Type en vez de la metrica obj.val = d[1][d[1].length - 1][selectType]; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + chartidx + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartidx + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartidx + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + chartidx + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartidx + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartidx + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); forceLabel.append('rect') .attr("class", 'lfl-rect'); const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) .force('collision', d3.forceCollide().radius(10)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mousemove', (event) => { // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); //it would return 2. // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).sort((a, b) => d3.descending(a[selectType], b[selectType])); // Display and position vertical line d3.select("#" + chartidx + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(lookup, d => d.Type) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', function(d) { return `translate(${x(d.TestTime)},${y(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => dataDict[d.Type].rgb), update => update .attr('transform', function(d) { return `translate(${x(d.TestTime)},${y(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` tipContent += `` }); tipContent += `

	RoundId	Value
${dataDict[d.Type].name}	${d.RoundId}	${d[selectType]}

`; chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (50+240) + "px"; } else { return event.pageX + 50 + "px"; } }) .style("top", event.pageY + 50 + "px") .style("display", "inline-block") .html(`${hoverDate}
${tipContent}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartidx + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartidx+ " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }33:T467,setData ={ var newData = [] general.map(d => { let timeT = d.FormatTime; let newD = new Date(timeT); d.TestTime = newD; //Set loss let loss = d.Loss.replace(",","."); let fixedLoss = parseFloat(loss); d.Loss = fixedLoss; //Set Latency let latency = d.Latency.replace(",","."); let fixedLatency = parseFloat(latency); d.Latency = fixedLatency; //Set Jitter let jitter = d.Jitter.replace(",","."); let fixedJitter = parseFloat(jitter); d.Jitter = fixedJitter; newData.push(d); }) agent.map(d => { let timeT = d.FormatTime; let newD = new Date(timeT); d.TestTime = newD; //Set loss let loss = d.Loss.replace(",","."); let fixedLoss = parseFloat(loss); d.Loss = fixedLoss; //Set Latency let latency = d.Latency.replace(",","."); let fixedLatency = parseFloat(latency); d.Latency = fixedLatency; //Set Jitter let jitter = d.Jitter.replace(",","."); let fixedJitter = parseFloat(jitter); d.Jitter = fixedJitter; newData.push(d); }) return newData; }34:T4f3,function rectCollide() { let nodes; function force(alpha) { const quad = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { quad.visit((q, x1, y1, x2, y2) => { let updated = false; if(q.data && q.data !== d){ let x = d.x - q.data.x, y = d.y - q.data.y, xSpacing = 2 + (q.data.width + d.width) / 2, ySpacing = 2 + (q.data.height + d.height) / 2, absX = Math.abs(x), absY = Math.abs(y), l, lx, ly; if (absX < xSpacing && absY < ySpacing) { l = Math.sqrt(x * x + y * y); lx = (absX - xSpacing) / l; ly = (absY - ySpacing) / l; // the one that's barely within the bounds probably triggered the collision if (Math.abs(lx) > Math.abs(ly)) { lx = 0; } else { ly = 0; } d.x -= x *= lx; d.y -= y *= ly; q.data.x += x; q.data.y += y; updated = true; } } return updated; }); } } force.initialize = _ => nodes = _; return force; }35:[{"id":"cad29d8e1697fe62e3411665602067c9cc139b48128c948472dee94a81f69f935cb2709251fa5cc059478fdc1eb3ad6a996baae84b4a054037d2ccab9a6b0829","href":"https://static.observableusercontent.com/files/cad29d8e1697fe62e3411665602067c9cc139b48128c948472dee94a81f69f935cb2709251fa5cc059478fdc1eb3ad6a996baae84b4a054037d2ccab9a6b0829","name":"agent_efficient@1.json","type":"application/json","lastModified":1623443546652.288,"size":349243},{"id":"dec7400f1409249ad4b4b81f9ac729753dff8c0c454e4dcd55d14e086d0e3c965000c0dd3c5645944598c8d938611a1b8e3c3e77ce2113fbde13072d260c1ae7","href":"https://static.observableusercontent.com/files/dec7400f1409249ad4b4b81f9ac729753dff8c0c454e4dcd55d14e086d0e3c965000c0dd3c5645944598c8d938611a1b8e3c3e77ce2113fbde13072d260c1ae7","name":"general_efficient@1.json","type":"application/json","lastModified":1623443554315.02,"size":353621}] 30:{"id":"3a9db84b18441238","slug":"untitled","title":"Summary View","thumbnail":"9a01727e67175b14b8a875b3cdf2df333f270e6d3dcc16637a995d1018a0e0ab","access_level":"public","create_time":"$D2021-06-11T04:47:37.129Z","update_time":"$D2021-06-13T23:02:31.672Z","view_time":null,"first_public_time":"$D2021-06-11T22:54:52.850Z","has_unpublished_edits":null,"fork":{"id":"d0a90b95f5419a3e","slug":"mta-daily-ridership-recovery","title":"MTA Daily Ridership Recovery","owner":{"id":"113f2867d5a070ee","login":"benoldenburg","name":"Ben Oldenburg"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2310aa02e804044d","login":"valentinachaconbuitrago","name":"","avatar_url":"https://avatars-next.observableusercontent.com/adfe83c7d3749c9691384cde3d70357718856e82eae2bab51c58084ada1ab7b2","tier":"starter_2024","bio":""},"version":2955,"publish_version":2955,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7718e0c43b791aa","login":"valentinachaconbuitrago","name":"","avatar_url":"https://avatars-next.observableusercontent.com/adfe83c7d3749c9691384cde3d70357718856e82eae2bab51c58084ada1ab7b2","tier":null,"bio":""}],"members":[{"type":"individual","id":"b7718e0c43b791aa","login":"valentinachaconbuitrago","name":"","avatar_url":"https://avatars-next.observableusercontent.com/adfe83c7d3749c9691384cde3d70357718856e82eae2bab51c58084ada1ab7b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Summary View","cells":[{"id":2876,"value":"md`# Summary View`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`## Select view\nSelect a RoundId to query path data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2689,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"md` ## Notebook Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"md`### Tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"md`### Formats & Data Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2692,"value":"general = FileAttachment(\"general_efficient@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2868,"value":"agents = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2698,"value":"agent = FileAttachment(\"agent_efficient@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2700,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dataDict = ({\n'general': {\n 'name': 'general',\n 'color': '#FE612C',\n //TODO: this color changes according to the metric --> is it better to create a profile for each metric?\n 'rgb': 'rgb(254,97,44)'\n},\n'agent': {\n 'name': 'agent',\n 'color': '#ee2b7b',\n 'rgb': 'rgb(128,0,0)'\n},\n'loss': {\n 'name': 'loss',\n 'color': '#f99d3e',\n 'rgb': 'rgb(249,157,62)'\n},\n'latency': {\n 'name': 'latency',\n 'color': '#a066aa',\n 'rgb': 'rgb(160,102,170)'\n},\n'jitter': {\n 'name': 'Access-A-Ride',\n 'color': '#27c3ed',\n 'rgb': 'rgb(39,195,237)'\n},\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"md`### Referenced Components & Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"// Lighten/Darker color functions \n// https://css-tricks.com/snippets/javascript/lighten-darken-color). - Wasn't working on some lighter colors\n// https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors) > Requries rgb color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"function LightenDarkenColor(col, amt) {\n \n var usePound = false;\n \n if (col[0] == \"#\") {\n col = col.slice(1);\n usePound = true;\n }\n \n var num = parseInt(col,16);\n \n var r = (num >> 16) + amt;\n \n if (r > 255) r = 255;\n else if (r < 0) r = 0;\n \n var b = ((num >> 8) & 0x00FF) + amt;\n \n if (b > 255) b = 255;\n else if (b < 0) b = 0;\n \n var g = (num & 0x0000FF) + amt;\n \n if (g > 255) g = 255;\n else if (g < 0) g = 0;\n \n return (usePound?\"#\":\"\") + (g | (b << 8) | (r << 16)).toString(16);\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"RGB_Linear_Shade=(p,c)=>{\n var i=parseInt,r=Math.round,[a,b,c,d]=c.split(\",\"),P=p<0,t=P?0:255*p,P=P?1+p:1-p;\n return\"rgb\"+(d?\"a(\":\"(\")+r(i(a[3]==\"a\"?a.slice(5):a.slice(4))*P+t)+\",\"+r(i(b)*P+t)+\",\"+r(i(c)*P+t)+(d?\",\"+d:\")\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"