31: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); }); }32:[] 2f:{"title":"MapD3 examples","cells":[{"id":0,"value":"md`# MapD3 examples\n\nHere are some examples of how to configure MapD3 for various needs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`## Line chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"md `Basic multi-line chart, time x axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"lineTime = {\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"time\",\n lineCount: 3,\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"time\",\n chartType: \"line\"\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"md`Positive-negative y axis, numerical x axis, gaps + isolated points (if any)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n range: [-100, 100],\n keyType: \"number\",\n lineCount: 3,\n nullRatio: 10\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"line\",\n yDomain: [-100, 100],\n dotsToShow: \"isolated\"\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"md`Dots, 12 lines, horizontal grid lines, scrolling legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n pointCount: 50,\n lineCount: 14\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"line\",\n dotsToShow: \"all\",\n grid: \"horizontal\"\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`Scrolling, gridlines, ordinal x axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"string\",\n lineCount: 3,\n pointCount: 100,\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"string\",\n chartType: \"line\",\n useScrolling: true,\n grid: \"full\"\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"md`## Area chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`Area chart, gaps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 1,\n nullRatio: 5\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"area\",\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`Multiple overlapping area charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 3\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"area\",\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`Stacked area chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 4\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"stackedArea\",\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`Streamgraph mode (experimental)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 5,\n pointCount: 100,\n randomStepSize: 10\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"stackedArea\",\n stackOffset: \"stackOffsetWiggle\"\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"md`## Bar chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`Stacked bar chart, sorting by total, custom y axis format`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"string\",\n lineCount: 5,\n pointCount: 30,\n range: [0, 10000]\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"string\",\n chartType: \"stackedBar\",\n sortBy: \"totalDescending\",\n yAxisFormat: \".2s\"\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"md`Positive/negative bar chart, hidden legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 1,\n pointCount: 30,\n range: [-100, 100],\n randomStepSize: 5\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"stackedBar\",\n yDomain: [-100, 100],\n legendIsEnabled: false\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`Positive/Negative stacked bar chart, custom color palette`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 4,\n pointCount: 10,\n range: [-100, 100],\n randomStepSize: 10\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"stackedBar\",\n stackOffset: \"stackOffsetDiverging\",\n colorSchema: [\n {key: 0, value: \"lime\"},\n {key: 1, value: \"orange\"},\n {key: 2, value: \"violet\"},\n {key: 3, value: \"skyblue\"}\n ]\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"md`Grouped bar chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 3,\n pointCount: 6,\n randomStepSize: 10\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: \"bar\",\n })\n .setData(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`## Combo chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`Combo line + bar, 2nd axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"{\n const container = html`

`\n yield container\n \n const data = mapd3.DataGenerator()\n .setConfig(commonDataConfig)\n .setConfig({\n keyType: \"number\",\n lineCount: 4,\n groupCount: 2,\n pointCount: 10\n })\n .generateTestDataset()\n\n const chart = mapd3\n .Chart(container)\n .setConfig(commonChartConfig)\n .setConfig({\n keyType: \"number\",\n chartType: [\"bar\", \"bar\", \"line\", \"line\"]\n })\n .setData(data)\n}","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":"$31","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":"$W32","stdlib":"1","titling":"auto"}