2c:null 2d:["$","title",null,{"children":"MapD3 examples | Chris Viau | Observable"}] 32: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); }); }33:[] 30:{"id":"11005fa6ad3860cd","slug":"mapd3-test-sheet","title":"MapD3 examples","thumbnail":"ea400b5d7877837c9d27932fe368b1493ef29c48ede551ee1d1f2f1dadbd8a17","access_level":"public","create_time":"$D2018-09-13T21:13:41.295Z","update_time":"$D2018-12-10T05:31:39.211Z","view_time":null,"first_public_time":"$D2018-09-13T21:42:58.709Z","has_unpublished_edits":null,"fork":{"id":"795b1fae04c69748","slug":"using-mapd-connector-with-mapd3","title":"Using MapD Connector with MapD3","owner":{"id":"ec5efd42ce7e8331","login":"biovisualize","name":"Chris Viau"}},"stars":5,"starred":false,"owner":{"type":"team","id":"ec5efd42ce7e8331","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":"starter_2024"},"version":997,"publish_version":997,"role":null,"authored":false,"authors":[{"type":"individual","id":"9f1f6ac72dad100b","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":null}],"members":[{"type":"individual","id":"9f1f6ac72dad100b","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`## Line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"md `Basic multi-line chart, time x axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`Positive-negative y axis, numerical x axis, gaps + isolated points (if any)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`Dots, 12 lines, horizontal grid lines, scrolling legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"md`Scrolling, gridlines, ordinal x axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"md`## Area chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"md`Area chart, gaps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`Multiple overlapping area charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`Stacked area chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`Streamgraph mode (experimental)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"md`## Bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"md`Stacked bar chart, sorting by total, custom y axis format`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md`Positive/negative bar chart, hidden legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`Positive/Negative stacked bar chart, custom color palette`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"md`Grouped bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`## Combo chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md`Combo line + bar, 2nd axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"md`## Interaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"md`Brush filtering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`Brush filtering across Notebook cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"focusChartContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`---\n## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"mapd3 = require(\"https://raw.githack.com/mapd/mapd3/chrisv/all-types/dist/mapd3.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"notebookStyle = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"mapd3CSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"