2e:null 2f:["$","title",null,{"children":"Crossfilter input | Jakub Hampl | Observable"}] 34:T9a2,The default version (as you see) will try to automatically configure the filter input based on the columns in the dataset. However, this may or may not be exactly what you want, so `filters` takes a second argument where you can configure the filtered rows as you please. ### Available filter inputs Currently there are two filter inputs available (feel free to send in more via forks). These are `facetRange(options)` for numerical data and `facetCheckboxes(options)` for categorical data. ```js import {facetRange, facetCheckboxes} from "@gampleman/crossfilter-input" ``` #### `facetRange(options)` | Option | Type | Description |--------|---------|------------ | `facet` | `String` or `(item) => Number` | [Accessor](https://lodash.com/docs/#property) for the value that should be filtered on. | `label` | `String` or `HTMLElement` | Label on the top of the section. | `buildFilter` | `({min: Number, max: Number}) => (item) => Boolean` | A function that can be used to filter the dataset by. The default function will include everything inside the selected extent **and include also anything with a `Null` or `NaN` value**. #### `facetCheckboxes(options)` | Option | Type | Description |--------|---------|------------ | `facet` | `String` or `(item) => String` | [Accessor](https://lodash.com/docs/#property) for the value that should be filtered on. | `label` | `String` or `HTMLElement` | Label on the top of the section. | `filter` | `(String) => Boolean` | Can be used to remove categories from being displayed. Can be useful to remove checkboxes that have junk data. | `counter` | `(collection, facet) => Object` | Counts number of items belonging to each category. Defaults to [`_.countBy`](https://lodash.com/docs/#countBy). Useful if you want to implement a mutli-category facet system, for instance like *tags*. | `buildFilter` | `(Set) => (item) => Boolean` | A function that can be used to filter the dataset by. The default will create a function where calling `facet` on the item produces a value in the set. ### Options for filters The final argument to `filters` is an options object with the following optional keys: | Option | Type | Description |--------|---------|------------ | `style` | `Object` | Styles to apply to the top-level form. | `reset` | `Boolean` | Should we display the "Reset all filters" button? Defaults to `true`. ## Implementation The rest of this notebook is the implementation.35:Tc0f,facetRange = ({ facet, label, buildFilter = (extent) => (datum) => { const val = _.property(facet)(datum); return ( val == null || isNaN(val) || (val >= extent.min && val <= extent.max) ); } }) => (data) => { const [w, h] = [300, 70]; const padding = 25; const form = htl.html``; const [min, max] = d3.extent(data, _.property(facet)); let extent = { min, max }; const bin = d3 .bin() .value(_.property(facet)) .domain([min, max]) .thresholds((values, mi, ma) => { let vals = [ extent.min, extent.max, ...d3.ticks(mi, ma, d3.thresholdSturges(values) - 2) ]; vals.sort(); return vals; }); const histogram = bin(data); const x = d3 .scaleLinear() .domain([min, max]) // data space .range([padding, w]); // display space const y = d3 .scaleLinear() .domain([0, d3.max(histogram, _.property("length"))]) .range([h - padding, 0]); const svg = d3.select(form).select("svg"); const g = svg.append("g"); const dataContainer = g.append("g"); const render = (data) => { const histogram = bin(data); // draw histogram values dataContainer .selectAll("rect") .data(histogram) .join("rect") // .transition() // .duration(80) .attr("x", (d) => x(d.x0)) .attr("y", (d) => y(d.length || 0)) .attr("width", (d) => x(d.x1) - x(d.x0)) .attr("height", (d) => h - padding - y(d.length || 0)) .style("fill", (d) => { if (d.x0 >= extent.min && d.x1 <= extent.max) { return "steelblue"; } return "#ccc"; }); }; render(data); var brush = d3 .brushX() .extent([ [padding, 0], [w, h - padding] ]) .on("brush", function (e) { if (e.selection) { let inverted = e.selection.map((v) => x.invert(v)); extent.min = Math.min(inverted[0], inverted[1]); extent.max = Math.max(inverted[0], inverted[1]); } else { extent.min = min; extent.max = max; } form.dispatchEvent(new Event("input", { bubbles: true })); }) .on("end", function (e) { if (e.selection == null) { extent.min = min; extent.max = max; form.dispatchEvent(new Event("input", { bubbles: true })); } }); g.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${h - padding})`) .call(d3.axisBottom(x)); g.append("g") .attr("class", "y-axis") .attr("transform", `translate(${padding},0)`) .call(d3.axisLeft(y).ticks(2)); var gBrush = g.append("g").attr("class", "brush").call(brush); form.resetFilters = function () { extent.min = min; extent.max = max; brush.clear(g.select(".brush")); }; return Object.defineProperties(form, { value: { get() { return buildFilter(extent); } }, crossfilteredData: { set(cf) { render(cf); } } }); }36:Tc04,facetCheckboxes = ({ facet, label, filter = (v) => true, counter = _.countBy, buildFilter = (val) => (datum) => val.has(_.property(facet)(datum)) }) => (data) => { const total = data.length; const counts = counter(data, facet); const defaults = _.mapValues(counts, () => 0); const allSelected = new Set(_.keys(counts).filter(filter)); let formValue = new Set(_.keys(counts).filter(filter)); const onInput = (value) => (event) => { if (formValue.has(value)) { formValue.delete(value); } else { formValue.add(value); } event.currentTarget.form.dispatchEvent( new Event("input", { bubbles: true }) ); }; const form = htl.html``; const update = (data) => { const counts = _.merge({}, defaults, counter(data, facet)); const target = form.getElementsByClassName("fields")[0]; _.forEach( _.entries(counts).filter(([v, c]) => filter(v)), ([value, count], index) => { target.children[index].getElementsByClassName("bar")[0].style.width = (count / total) * 100 + "%"; target.children[index].getElementsByClassName( "count" )[0].textContent = count; } ); }; form.resetFilters = function () { allSelected.forEach((v) => formValue.add(v)); _.forEach(form.querySelectorAll("input[type=checkbox]"), (el) => { el.checked = true; }); }; return Object.defineProperties(form, { value: { get() { const f = buildFilter(formValue); return (d) => { if ([...allSelected].every((s) => formValue.has(s))) { return true; } return f(d); }; } }, crossfilteredData: { set(cf) { update(cf); } } }); }37:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1640173228264.67,"size":13506}] 32:{"id":"4cebe26129facb81","slug":"crossfilter-input","title":"Crossfilter input","thumbnail":"1e557ae60b83fd190e8dd7da03b774110485649a2437da1d5dd8747a58e3421a","access_level":"public","create_time":"$D2021-12-22T11:29:13.833Z","update_time":"$D2022-01-05T12:08:02.839Z","view_time":null,"first_public_time":"$D2022-01-04T13:07:12.893Z","has_unpublished_edits":null,"fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":"starter_2024"},"version":222,"publish_version":222,"role":null,"authored":false,"authors":[{"type":"individual","id":"34d15c3b1cc754ed","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":null}],"members":[{"type":"individual","id":"34d15c3b1cc754ed","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"7a8725a396b6ad22","slug":"utilities","title":"Utilities","owner":{"id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl"}},"type":"notebook","body":{"title":"Crossfilter input","cells":[{"id":0,"value":"# Crossfilter input\n\nThis notebook provides a library for doing quick cross-filtering of datasets. It's inspired by the `Inputs.search` input from the Inputs library, as a quick way to give interactive control.\n\nYou can use it like so:\n\n```javascript\nimport {filters} from \"@gampleman/crossfilter-input\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"viewof filtered = filters(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"Inputs.table(filtered)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"filters = (data, facets = auto(data), { style = {}, reset = true } = {}) => {\n let fields = facets.map((f) => f(data));\n let value = fields.map((f) => f.value);\n value = fields.map((f) => f.value);\n const resetButton = reset\n ? htl.html``\n : \"\";\n const form = htl.html`

\n ${resetButton}\n ${fields}\n

`;\n\n form.addEventListener(\"input\", () => {\n fields.forEach((f, i) => {\n let cf = data.filter((d) => value.every((f, j) => i === j || f(d)));\n f.crossfilteredData = cf;\n\n resetButton.disabled = cf.length == data.length;\n });\n });\n return Object.defineProperty(form, \"value\", {\n get() {\n return data.filter((d) => value.every((f) => f(d)));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"data = FileAttachment(\"penguins.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// This is a heuristic for auto to distinguish meaningfull categorical dimensions\ncategoryLimit = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"auto = (dataset) => {\n if (dataset.columns) {\n return dataset.columns.flatMap((column) => {\n switch (typeof dataset[0][column]) {\n case \"string\":\n const categories = _.countBy(dataset, column);\n if (\n _.keys(categories).length <\n Math.min(categoryLimit, dataset.length / 4)\n ) {\n return [facetCheckboxes({ facet: column, label: column })];\n }\n case \"number\":\n return [facetRange({ facet: column, label: column })];\n default:\n return [];\n }\n });\n }\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"