2c:null 2d:["$","title",null,{"children":"Area Chart With Focus + Context | valentinachaconbuitrago | Observable"}] 32:T42d,viewof focus = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const brush = d3.brushX() .extent([[margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5]]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [x(d3.utcYear.offset(x.domain()[1], -1)), x.range()[1]]; svg.append("g") .call(xAxis, x, focusHeight); svg.append("path") .datum(data) .attr("stroke", "gray") .attr("fill", "gray") .attr("fill-opacity", "0.4") .attr("d", area(x, y.copy().range([focusHeight - margin.bottom, 4]))); const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); function brushed({selection}) { if (selection) { svg.property("value", selection.map(x.invert, x).map(d3.utcDay.round)); svg.dispatch("input"); } } function brushended({selection}) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }33:T669,focuss = { const chart = html`

${style}

`; // Dropdown menus configuration var menuDiv = d3.select(chart).select("#dropdown"); menuDiv .append("select") .attr("id", "metricMenu") .selectAll("option") .data(options) .enter() .append("option") .attr("value", function(d, i) { return i;}) .text(function(d) { return d; }); menuDiv .append("select") .attr("id", "agentMenu") .selectAll("option") .data(d3.group(data_test, d => d.AgentName).keys()) .enter() .append("option") .attr("value", function(d, i) { return i; }) .text(function(d) { return d}); menuDiv .append("select") .attr("id", "timeMenu") .selectAll("option") .data(times) .enter() .append("option") .attr("value", function(d, i) { return i; }) .text(function(d) { return d}); // Focus Viz const svg = d3.select(chart).select("#vis") .append("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block") svg.append("g") .append("path") .datum(data_test) .attr("d", d3.line() .x(function(d) { return x(+d.TestTime) }) .y(function(d) { return y(+d.Loss) }) ) .attr("stroke", "gray") .style("stroke-width", 4) .style("fill", "gray") .attr("fill-opacity", "0.4") return chart; }34:[{"id":"c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","href":"https://static.observableusercontent.com/files/c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","name":"aapl.csv","type":"text/csv","lastModified":1621262375595.526,"size":22707},{"id":"b76584d68ac560d1f892f49be20c93d128ba779515e3bc2228c9e90247159f5fb7d5c7e79800a1685742e1fad295d846f737a37e9f651e6ebc973cbb16b823bd","href":"https://static.observableusercontent.com/files/b76584d68ac560d1f892f49be20c93d128ba779515e3bc2228c9e90247159f5fb7d5c7e79800a1685742e1fad295d846f737a37e9f651e6ebc973cbb16b823bd","name":"export_data.csv","type":"text/csv","lastModified":1621285963446.399,"size":4190}] 30:{"id":"4eecdc87791aa8df","slug":"area-chart-with-focus-context","title":"Area Chart With Focus + Context","thumbnail":"5f72003449e4f8e5d6ed5bb054b7c40412e8dea9afc5b3c49b9ef7535482a6a9","access_level":"public","create_time":"$D2021-05-16T11:47:58.726Z","update_time":"$D2021-06-14T16:52:27.919Z","view_time":null,"first_public_time":"$D2021-05-20T19:03:18.490Z","has_unpublished_edits":null,"fork":false,"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":275,"publish_version":275,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Area Chart With Focus + Context","cells":[{"id":0,"value":"md`# Area Chart With Focus + Context`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"display\", \"block\");\n \n const clipId = DOM.uid(\"clip\");\n \n // Everything outside this clipPath will be clipped and therefore invisible\n svg.append(\"clipPath\")\n .attr(\"id\", clipId.id)\n .append(\"rect\")\n .attr(\"x\", margin.left)\n .attr(\"y\", 0)\n .attr(\"height\", height)\n .attr(\"width\", width - margin.left - margin.right)\n \n const gx = svg.append(\"g\");\n \n const gy = svg.append(\"g\");\n \n // path can be used to create lines, curves, etc. \n const path = svg.append(\"path\")\n .datum(data)\n .attr(\"clip-path\", clipId)\n .attr(\"stroke\", \"red\")\n .attr(\"fill\", \"red\")\n .attr(\"fill-opacity\", \"0.4\");\n \n return Object.assign(svg.node(), {\n update(focusX, focusY) {\n gx.call(xAxis, focusX, height);\n gy.call(yAxis, focusY, data.y);\n path.attr(\"d\", area(focusX, focusY));\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"area = (x,y) => d3.area()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width-margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([height-margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"xAxis = (g, x, height) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"yAxis = (g, y, title) => g\n .attr(\"transform\",`translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".title\").data([title]).join(\"text\")\n .attr(\"class\", \"title\")\n .attr(\"x\",-margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(title))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"update = {\n const [minX, maxX] = focus;\n const maxY = d3.max(data, d => minX <= d.date && d.date <= maxX ? d.value : NaN);\n chart.update(x.copy().domain(focus), y.copy().domain([0, maxY]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"aapl.csv\").text(), d3.autoType).map(({date, close}) => ({date, value: close})), {y: \"↑ Close $\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"margin = ({top: 20, right: 20, bottom: 30, left:40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 440","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"focusHeight = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"\ndata_test = d3.csvParse(await FileAttachment(\"export_data.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"options = [\"Loss\",\"AvgLatency\",\"Jitter\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"times = [\"24h\", \"7d\", \"14d\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"agents = d3.group(data_test, d => d.AgentName).keys();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"areaN = (x,y,attribute) => d3.area()\n .defined(d => !isNaN())\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"style = ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"