25:["$","title",null,{"children":"Data driven range slider | drbagwell | Observable"}] 49:T3aff,class RangeSlider { constructor() { const attrs = { id: "ID" + Math.floor(Math.random() * 1000000), svgWidth: 400, svgHeight: 400, marginTop: 10, marginBottom: 0, marginRight: 0, marginLeft: 40, container: "body", defaultTextFill: "#2C3E50", defaultFont: "Helvetica", data: null, accessor: null, aggregator: null, yScale: null, freezeMin: null, onBrush: (d) => d, yScale: d3.scaleLinear(), yTicks: 4, freezeMin: false, startSelection: 100, svg:null }; this.getChartState = () => attrs; Object.keys(attrs).forEach((key) => { //@ts-ignore this[key] = function (_) { var string = `attrs['${key}'] = _`; if (!arguments.length) { return eval(`attrs['${key}'];`); } eval(string); return this; }; }); this.initializeEnterExitUpdatePattern(); } // Fancy version of d3 join initializeEnterExitUpdatePattern() { d3.selection.prototype.patternify = function (params) { var container = this; var selector = params.selector; var elementTag = params.tag; var data = params.data || [selector]; // Pattern in action var selection = container.selectAll("." + selector).data(data, (d, i) => { if (typeof d === "object") { if (d.id) { return d.id; } } return i; }); selection.exit().remove(); selection = selection.enter().append(elementTag).merge(selection); selection.attr("class", selector); return selection; }; } drawChartTemplate() { const attrs = this.getChartState(); const calc = attrs.calc; //Drawing containers var container = d3.select(attrs.container); var containerRect = container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; //Add svg var svg = container .patternify({ tag: "svg", selector: "svg-chart-container", }) .style("overflow", "visible") .attr("width", attrs.svgWidth) .attr("height", attrs.svgHeight) .attr("font-family", attrs.defaultFont); //Add container g element var chart = svg .patternify({ tag: "g", selector: "chart", }) .attr( "transform", "translate(" + calc.chartLeftMargin + "," + calc.chartTopMargin + ")" ); // Share chart attrs.chart = chart; attrs.svg = svg; } drawBrushHandles() { const attrs = this.getChartState(); const brush = attrs.brush; const calc = attrs.calc; const handlerWidth = 2, handlerFill = "#3F434D", middleHandlerWidth = 10, middleHandlerStroke = "#D4D7DF", middleHandlerFill = "#486878"; var handle = brush .patternify({ tag: "g", selector: "custom-handle", data: [ { left: true, }, { left: false, }, ], }) .attr("cursor", "ew-resize") .attr("pointer-events", "all") handle .patternify({ tag: "rect", selector: "custom-handle-rect", data: (d) => [d], }) .attr("width", handlerWidth) .attr("height", calc.chartHeight) .attr("fill", handlerFill) .attr("stroke", handlerFill) .attr("y", -calc.chartHeight / 2) .attr("pointer-events", "none"); handle .patternify({ tag: "rect", selector: "custom-handle-rect-middle", data: (d) => [d], }) .attr("width", middleHandlerWidth) .attr("height", 30) .attr("fill", middleHandlerFill) .attr("stroke", middleHandlerStroke) .attr("y", -16) .attr("x", -middleHandlerWidth / 4) .attr("pointer-events", "none") .attr("rx", 3); handle .patternify({ tag: "rect", selector: "custom-handle-rect-line-left", data: (d) => [d], }) .attr("width", 0.7) .attr("height", 20) .attr("fill", middleHandlerStroke) .attr("stroke", middleHandlerStroke) .attr("y", -100 / 6 + 5) .attr("x", -middleHandlerWidth / 4 + 3) .attr("pointer-events", "none"); handle .patternify({ tag: "rect", selector: "custom-handle-rect-line-right", data: (d) => [d], }) .attr("width", 0.7) .attr("height", 20) .attr("fill", middleHandlerStroke) .attr("stroke", middleHandlerStroke) .attr("y", -100 / 6 + 5) .attr("x", -middleHandlerWidth / 4 + middleHandlerWidth - 3) .attr("pointer-events", "none"); handle.attr("display", "none"); // Share props attrs.handle = handle } createScales() { const attrs = this.getChartState(); const dataFinal = attrs.dataFinal; const accessorFunc = attrs.accessorFunc; const isDate = attrs.isDate; const dateScale = attrs.dateScale; const calc = attrs.calc; const groupedInitial = this.group(dataFinal) .by((d, i) => { const field = accessorFunc(d); if (isDate) { return Math.round(dateScale(field)); } return field; }) .orderBy((d) => d.key) .run(); const grouped = groupedInitial.map((d) => Object.assign(d, { value: typeof attrs.aggregator == "function" ? attrs.aggregator(d) : d.values.length }) ); const values = grouped.map((d) => d.value); const max = d3.max(values); const maxX = grouped[grouped.length - 1].key; const minX = grouped[0].key; var minDiff = d3.min(grouped, (d, i, arr) => { if (!i) return Infinity; return d.key - arr[i - 1].key; }); let eachBarWidth = calc.chartWidth / minDiff / (maxX - minX); if (eachBarWidth > 20) { eachBarWidth = 20; } if (minDiff < 1) { eachBarWidth = eachBarWidth * minDiff; } if (eachBarWidth < 1) { eachBarWidth = 1; } const scale = attrs.yScale .domain([calc.minY, max]) .range([0, calc.chartHeight - 25]); const scaleY = scale .copy() .domain([max, calc.minY]) .range([0, calc.chartHeight - 25]); const scaleX = d3 .scaleLinear() .domain([minX, maxX]) .range([0, calc.chartWidth]); attrs.scale = scale; attrs.scaleX = scaleX; attrs.scaleY = scaleY; attrs.max = max; attrs.minX = minX; attrs.maxX = maxX; attrs.grouped = grouped; attrs.eachBarWidth = eachBarWidth; attrs.scale = scale; } render() { const that = this; const attrs = this.getChartState(); //Calculated properties var calc = { id: null, chartTopMargin: null, chartLeftMargin: null, chartWidth: null, chartHeight: null, }; calc.id = "ID" + Math.floor(Math.random() * 1000000); // id for event handlings calc.chartLeftMargin = attrs.marginLeft; calc.chartTopMargin = attrs.marginTop; calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin; calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin; calc.minY = attrs.yScale ? 0.0001 : 0; attrs.calc = calc; var accessorFunc = (d) => d; if (attrs.data[0].value != null) { accessorFunc = (d) => d.value; } if (attrs.accessor && typeof attrs.accessor == "function") { accessorFunc = attrs.accessor; } const dataFinal = attrs.data; attrs.accessorFunc = accessorFunc; const isDate = Object.prototype.toString.call(accessorFunc(dataFinal[0])) === "[object Date]"; attrs.isDate = isDate; var dateExtent, dateScale, scaleTime, dateRangesCount, dateRanges, scaleTime; if (isDate) { dateExtent = d3.extent(dataFinal.map(accessorFunc)); dateRangesCount = Math.round(width / 5); dateScale = d3.scaleTime().domain(dateExtent).range([0, dateRangesCount]); scaleTime = d3.scaleTime().domain(dateExtent).range([0, calc.chartWidth]); dateRanges = d3 .range(dateRangesCount) .map((d) => [dateScale.invert(d), dateScale.invert(d + 1)]); } attrs.dateScale = dateScale; attrs.dataFinal = dataFinal; attrs.scaleTime = scaleTime; this.drawChartTemplate(); var chart = attrs.chart; var svg = attrs.svg; this.createScales(); const scaleX = attrs.scaleX; const scaleY = attrs.scaleY; const max = attrs.max; const grouped = attrs.grouped; const eachBarWidth = attrs.eachBarWidth; const scale = attrs.scale; var axis = d3.axisBottom(scaleX); if (isDate) { axis = d3.axisBottom(scaleTime); } const axisY = d3 .axisLeft(scaleY) .tickSize(-calc.chartWidth - 20) .ticks(max == 1 ? 1 : attrs.yTicks) .tickFormat(d3.format(".2s")); const bars = chart .patternify({ tag: "rect", selector: "bar", data: grouped }) .attr("class", "bar") .attr("pointer-events", "none") .attr("width", eachBarWidth) .attr("height", (d) => scale(d.value)) .attr("fill", "#424853") .attr("y", (d) => -scale(d.value) + (calc.chartHeight - 25)) .attr("x", (d, i) => scaleX(d.key) - eachBarWidth / 2) .attr("opacity", 0.9); const xAxisWrapper = chart .patternify({ tag: "g", selector: "x-axis" }) .attr("transform", `translate(${0},${calc.chartHeight - 25})`) .call(axis); const yAxisWrapper = chart .patternify({ tag: "g", selector: "y-axis" }) .attr("transform", `translate(${-10},${0})`) .call(axisY); const brush = chart.patternify({ tag: "g", selector: "brush" }).call( d3 .brushX() .extent([ [0, 0], [calc.chartWidth, calc.chartHeight], ]) .on("start", brushStarted) .on("end", brushEnded) .on("brush", brushed) ); attrs.brush = brush; this.drawBrushHandles(); const handle = attrs.handle; chart .selectAll(".selection") .attr("fill-opacity", 0.1) .attr("fill", "white") .attr("stroke-opacity", 0.4); function brushStarted() { if (d3.event.selection) { attrs.startSelection = d3.event.selection[0]; } } function brushEnded() { const attrs = that.getChartState(); debugger var minX = attrs.minX; var maxX = attrs.maxX; if (!d3.event.selection) { handle.attr("display", "none"); output({ range: [minX, maxX], }); return; } if (d3.event.sourceEvent.type === "brush") return; var d0 = d3.event.selection.map(scaleX.invert), d1 = d0.map(d3.timeDay.round); if (d1[0] >= d1[1]) { d1[0] = d3.timeDay.floor(d0[0]); d1[1] = d3.timeDay.offset(d1[0]); } } function brushed(d) { if (d3.event.sourceEvent.type === "brush") return; if (attrs.freezeMin) { if (d3.event.selection[0] < attrs.startSelection) { d3.event.selection[1] = Math.min( d3.event.selection[0], d3.event.selection[1] ); } if (d3.event.selection[0] >= attrs.startSelection) { d3.event.selection[1] = Math.max( d3.event.selection[0], d3.event.selection[1] ); } d3.event.selection[0] = 0; d3.select(this).call(d3.event.target.move, d3.event.selection); } var d0 = d3.event.selection.map(scaleX.invert); const s = d3.event.selection; handle.attr("display", null).attr("transform", function (d, i) { return "translate(" + (s[i] - 2) + "," + (calc.chartHeight / 2 - 25) + ")"; }); output({ range: d0, }); } yAxisWrapper.selectAll(".domain").remove(); xAxisWrapper.selectAll(".domain").attr("opacity", 0.1); xAxisWrapper.selectAll("text").attr("fill", "#9CA1AE"); yAxisWrapper.selectAll("text").attr("fill", "#9CA1AE"); svg.selectAll('.selection').attr('transform', 'translate(0,-25)') chart .selectAll(".tick line") .attr("opacity", 0.1) .attr("stroke-dasharray", "2 2"); function output(value) { const result = value; result.data = getData(result.range); if (isDate) { result.range = value.range.map((d) => dateScale.invert(d)); } attrs.onBrush(result); } function getData(range) { const dataBars = bars .attr("fill", "#535966") .filter((d) => { return d.key >= range[0] && d.key <= range[1]; }) .attr("fill", "#72A3B7") .nodes() .map((d) => d.__data__) .map((d) => d.values) .reduce((a, b) => a.concat(b), []); return dataBars; } return this; } updateData(data) { const attrs = this.getChartState(); return this; } // Advanced group by func group(arr) { const that = this; const operations = []; const initialData = arr; const resultObj = {}; let resultArr; let sort = function (a, b) { return a.values.length < b.values.length ? 1 : -1; }; // Group by this.group.by = function (groupFuncs) { const length = arguments.length; for (let j = 0; j < initialData.length; j++) { const dataObj = initialData[j]; const keys = []; for (let i = 0; i < length; i++) { const key = arguments[i]; keys.push(key(dataObj, j)); } const strKey = JSON.stringify(keys); if (!resultObj[strKey]) { resultObj[strKey] = []; } resultObj[strKey].push(dataObj); } operations.push("by"); return that.group; }; // Order by func this.group.orderBy = function (func) { sort = function (a, b) { var a = func(a); var b = func(b); if (typeof a === "string" || a instanceof String) { return a.localeCompare(b); } return a - b; }; operations.push("orderBy"); return that.group; }; // Order by descending func this.group.orderByDescending = function (func) { sort = function (a, b) { var a = func(a); var b = func(b); if (typeof a === "string" || a instanceof String) { return a.localeCompare(b); } return b - a; }; operations.push("orderByDescending"); return that.group; }; // Custom sort this.group.sort = function (v) { sort = v; operations.push("sort"); return that.group; }; // Run result this.group.run = function () { resultArr = Object.keys(resultObj).map((k) => { const result = {}; const keys = JSON.parse(k); if (keys.length == 1) { result.key = keys[0]; } else { result.keys = keys; } result.values = resultObj[k]; return result; }); if (sort) { resultArr.sort(sort); } return resultArr; }; return this.group; }; }4a:[] 29:{"id":"315ea268aa71a153","slug":null,"title":"Data driven range slider","thumbnail":"2533d67a116cea49eb2000e8f49385ee88a6caf3197f87cf076ed092b4861853","access_level":"public","create_time":"$D2024-01-10T17:25:06.889Z","update_time":"$D2024-01-10T17:25:06.889Z","view_time":null,"first_public_time":"$D2024-01-10T17:25:06.889Z","has_unpublished_edits":null,"fork":{"id":"bcabd0e6d982b9fc","slug":"data-driven-range-slider","title":"Data driven range slider","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":0,"starred":false,"owner":{"type":"team","id":"3df590ff6b5ddeb9","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":278,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f52baf2f7ed93665","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f52baf2f7ed93665","login":"drbagwell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/44febcf38b1a0e9ddfc1c4d6c2df40de4227fc13f07d386ae87a7053ec79b220","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data driven range slider","cells":[{"id":0,"value":"md`# Data driven range slider`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`[Github Repo](https://github.com/bumbeishvili/data-driven-range-slider)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`This is slightly modified version of earlier Observable specific [Data driven range slider](https://observablehq.com/@bumbeishvili/data-driven-range-sliders)\n\n* I cleaned code a bit, it's still **not good** though :/ \n* Made it dark\n* Switched to class syntax\n* Published as NPM Module\n* Built examples of Vue, React, Angular integrations\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`**Average cars weight by horsepower in lbs**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"dataCars = require('@observablehq/cars')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"mutable carsRangeResult = ({\n range:[],\n data:[] \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"containerAlphabet = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"new RangeSlider()\n .container(containerAlphabet)\n .svgWidth(width-50)\n .svgHeight(100)\n\n .data(dataCars)\n .accessor(d=>d.Horsepower)\n .aggregator(group=>d3.mean(group.values,d=>d.Weight_in_lbs))\n .onBrush(d=>mutable carsRangeResult = d)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`**Average horsepower per year**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"mutable horsePowerResult = ({\n range:[],\n data:[] \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"containerHorsePower = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"new RangeSlider()\n .container(containerHorsePower)\n .svgWidth(width-50)\n .svgHeight(100)\n\n .data(dataCars)\n .accessor(d=>d.Year)\n .aggregator(group=> d3.mean(group.values, d=>d.Horsepower))\n .onBrush(d=>mutable horsePowerResult = d)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`#### Works with dates too`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"datesData = d3.json('https://gist.githubusercontent.com/bumbeishvili/a0ab3299b4e4eb1557085317b9136ec1/raw/ba488da953d2fa0e64ff2469a209c520fd408055/dateData.json')\n .then(d=> d.map(dt=>new Date(dt)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"mutable datesRangeResult= ({\n range:[],\n data:[] \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"containerData = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"new RangeSlider()\n .container(containerData)\n .svgWidth(width-50)\n .svgHeight(100)\n\n .data(datesData)\n .accessor(d=>d)\n .onBrush(d=>mutable datesRangeResult = d)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`#### Play with simple data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"data = [1, 2, 3, 4, 4, 4, 4, 5, 6, 7, 8, 9, 10] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"mutable output = ({\n range:[],\n data:[]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"containerSimpleData = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"new RangeSlider()\n .container(containerSimpleData)\n .svgWidth(width-50)\n .svgHeight(100)\n\n .data(data)\n //.aggregator(group => sumArray(group.values))\n .onBrush(d=>mutable output = d)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"sumArray = (arr)=> arr.reduce((a,b)=>a+b, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`### Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null