30:T491,brushFiltering = { const container = html`

`; yield container; const data = mapd3 .DataGenerator() .setConfig(commonDataConfig) .setConfig({ keyType: "time", lineCount: 1, groupCount: 1, pointCount: 100 }) .generateTestDataset(); const focusChart = mapd3 .Chart(container.querySelector(".focus-chart")) .setConfig(commonChartConfig) .setConfig({ keyType: "time", chartType: "line" }) .setData(data); const rangeChart = mapd3 .Chart(container.querySelector(".range-chart")) .setConfig(commonChartConfig) .setConfig({ keyType: "time", chartType: "line", height: 100, legendIsEnabled: false, brushIsEnabled: true, tooltipIsEnabled: false }) .setData(data); rangeChart .getEvents() .onBrush("brushMove", d => { const focusData = mapd3._Utils.filterByDate(data, d); focusChart.setData(focusData); }) .onBrush("brushClear", d => { focusChart.setData(data); }); }31:[] 2e:{"title":"MapD3 zoom","cells":[{"id":0,"value":"md`# MapD3 zoom\n\nHere are some examples of brush zooming to get started on prototyping a mousewheel zoom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"md`## Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`Brush filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"md`Brush filtering across Notebook cells.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"focusChartContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"md`Use the brush selection in this cell to change the one on the cell above`","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"viewof crossCellFilteredData = {\n const container = html`

`;\n\n const data = mapd3\n .DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"time\",\n lineCount: 1,\n groupCount: 1,\n pointCount: 100\n })\n .generateTestDataset();\n\n const rangeChart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"time\",\n chartType: \"line\",\n height: 100,\n legendIsEnabled: false,\n brushIsEnabled: true,\n tooltipIsEnabled: false\n })\n .setData(data);\n\n rangeChart\n .getEvents()\n .onBrush(\"brushMove\", extent => {\n container.value = mapd3._Utils.filterByDate(data, extent);\n container.dispatchEvent(new CustomEvent(\"input\"));\n })\n .onBrush(\"brushClear\", () => {\n container.value = data;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n container.value = data;\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"focusChartDataChange = {\n focusChart.setData(crossCellFilteredData);\n\n const values = crossCellFilteredData.series[0].values.map(d => d.x);\n return [values[0], values[values.length - 1]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"focusChart = {\n return mapd3\n .Chart(focusChartContainer)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"time\",\n chartType: \"line\"\n });\n}\n// .setData(crossCellFilteredData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`---\n## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"mapd3 = require(\"https://raw.githack.com/mapd/mapd3/chrisv/all-types/dist/mapd3.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"commonChartConfig = {\n return {\n width: 500,\n height: 300,\n margin: {\n top: 20,\n right: 10,\n bottom: 40,\n left: 50\n },\n brushIsEnabled: false\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"commonDataConfig = {\n return {\n range: [0, 100],\n pointCount: 300,\n groupCount: 1,\n stringMinMaxLength: [5, 10],\n randomStepSize: 50,\n nullRatio: 0\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"notebookStyle = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"mapd3CSS = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}