44:["$","title",null,{"children":"Visuals Module | Mohammed Sallam's Workspace | Observable"}] 4c:T48e,hBar = (data, x, y, options) => { const showValues = options?.showValues ? [Plot.text(data, { x: x.name, y: y.name, fill: "#000", textAnchor: "start", dx: 2, text: d => d[x.name], })] : []; const chart = Plot.plot({ style: "background-color: transparent;", title: options?.title, subtitle: options?.subtitle, color: { legend: options?.legend }, marks: [ Plot.barX( data, Plot.groupY( { x: x.calc || "count" }, { y: y.name, x: x.name, fill: y?.fill, tip: true, sort: options?.sort ? { y: "x", order: options?.sort === "desc" ? "descending" : "ascending" } : undefined, } ), ), ...showValues, Plot.ruleX([0]), ], x: { label: x.label }, y: { label: y.label, grid: true }, marginLeft: options?.marginLeft || 150, width: options?.width || 400, height: options?.height, }); return chart; };4d:T1083,pieChart = (data, { title, // given d in data, returns the title text subtitle, width = 450, // outer width, in pixels height = 450, margin = 10, donut, colors, }) => { // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin. var radius = Math.min(width, height) / 2 - margin const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("background-color", "#CCC") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;") .style("font-family", "var(--sans-serif)") .style("font-size", "12px"); // set the color scale const color = d3.scaleOrdinal() .domain(data.map(m => m.name)) .range((colors === undefined ? generateGradients(data.length) : colors)); // Compute the position of each group on the pie: var pie = d3.pie() .sort(null) // Do not sort group by size .value(function(d) { return d.value.value; }) var data_ready = pie(d3.map(data, (d, i) => ({key: i.toString(), value: d}))) // The arc generator var arc = d3.arc() .innerRadius(!donut ? 0 : radius * 0.5) // This is the size of the donut hole .outerRadius(radius * 0.8) // Another arc that won't be drawn. Just for labels positioning var outerArc = d3.arc().innerRadius(radius * 0.9).outerRadius(radius * 0.9) // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function. svg .selectAll('allSlices') .data(data_ready) .enter() .append('path') .attr('d', arc) .attr('fill', function(d) { return(color(d.data.key)) }) .attr("stroke", "white") .style("stroke-width", "2px") .style("opacity", 0.7) // Add the polylines between chart and labels: svg .selectAll('allPolylines') .data(data_ready) .enter() .append('polyline') .attr("stroke", "black") .style("fill", "none") .attr("stroke-width", 0.5) .attr('points', (d) => { var posA = arc.centroid(d) // line insertion in the slice var posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that var posC = outerArc.centroid(d); // Label position = almost the same as posB var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) // Add the polylines between chart and labels: svg .selectAll('allLabels') .data(data_ready) .enter() .append('text') .text( (d) => { return d.data.value.name + " (" + formatThousands(d.data.value.value) + ")"; } ) .attr('transform', (d) => { var pos = outerArc.centroid(d); var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1); return 'translate(' + pos + ')'; }) .style('font-size', '8pt') .style('text-anchor', (d) => { var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) // svg // .selectAll('allLabels') // .data(data_ready) // .enter() // .append('text') // .text( (d) => { return d.data.value.value; } ) // .attr('transform', (d) => { // var pos = outerArc.centroid(d); // var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1); // return 'translate(' + pos + ')'; // }) // .style('text-anchor', (d) => { // var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // return (midangle < Math.PI ? 'start' : 'end') // }) return html`

${title || ""}

${subtitle || ""}

${svg.node()} ` }4e:T6e1,humIcons = () => { return html` ` }4f:T8c8,widget = (data, x, {icon, whiteIcon, backgroundColor, textColor, width, borderColor}) => { let value = 0; if(x.value) { value = x.value; } else if(x.calc === "sumOfMaxBy") { const dataBy = _.groupBy(data, x.by); // entry => `${entry.admin1_name_en}` value = _.sumBy(Object.values(dataBy), byGroup => { return _.maxBy(byGroup, x.name).total_reached; }); } else { value = x.calc && x?.calc === "sum" ? _.sumBy(data, x.name): x.calc && x.calc === "avg" ? _.meanBy(data, x.name) : _.size(_.uniq(_.map(data, x.name))); } const suffix = generateSuffix(); const iconHolder = icon ? html` `: ""; return html` `; }50:T7e9,legendClasses = (colors, classes, label, { labelBackground }) => { const container = document.createElement('div'); container.style.display = 'flex'; container.style.alignItems = 'flex-end'; if(label) { const title = document.createElement('div'); title.innerText = label; title.style.margin = '2px'; container.appendChild(title) } colors.forEach((color, index) => { const squareContainer = document.createElement('div'); squareContainer.style.position = 'relative'; const square = document.createElement('div'); square.style.width = '20px'; square.style.height = '20px'; square.style.backgroundColor = color; square.style.margin = '2px'; square.style.opacity = 0.5; square.style.borderRadius = '4px'; squareContainer.appendChild(square); const line = document.createElement('div'); line.style.position = 'absolute'; line.style.width = '1px'; line.style.height = `${10 + index * 13}px`; line.style.backgroundColor = color; line.style.left = '50%'; line.style.top = '110%'; square.appendChild(line); const ft = formatThousands; const classLabel = document.createElement('div'); classLabel.innerText = `${ft(classes[index].lowerBound)}-${ft(classes[index].upperBound)}`; classLabel.style.fontSize = '7pt'; classLabel.style.position = 'absolute'; classLabel.style.top = `${38 + index * 13}px`; classLabel.style.width = 'fit-content'; classLabel.style.textAlign = 'right'; classLabel.style.right = 'calc(50% - 4px)'; classLabel.style.padding = '0px 1px'; classLabel.style.height = '10px'; classLabel.style.textWrap = 'nowrap'; if(labelBackground) { classLabel.style.backgroundColor = '#FFFFFF80'; classLabel.style.borderRadius = '2px'; } square.appendChild(classLabel); container.appendChild(squareContainer); }); return container; }51:Tccb,map = async (data, x, { color, classes, center, zoom, height, noBaseMap, noBorder, labelBackground }) => { const container = htl.html`

`; const map = L.map(container, { zoomControl: false, dragging: false }).setView([center.lat, center.lng], zoom || 6); L.tileLayer(!noBaseMap ? "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png" : "", { // L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", { // L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); const geo = await FileAttachment("admin1_sym2@1.json").json(); const colors = generateGradients(classes, color, 1); const min_value = _.minBy(data, x.name)[x.name]; const max_value = _.maxBy(data, x.name)[x.name]; const sum_value = _.sumBy(data, x.name); geo.features.map((f) => { const { geometry, properties } = f; const s = data.find((f) => f.admin1_pcode === properties.ADM1_PCODE); let poly = null; if(s) { const fillColor = getColorClass(s[x.name], min_value, max_value, colors) poly = L.geoJson(f.geometry, { fillColor, fillOpacity: 0.6, weight: 0.5, color, opacity: 1}).addTo(map) .bindPopup(html`${properties.ADM1_EN}
${x.label}: ${formatThousands(s[x.name])}`); const pointCenter = poly.getBounds().getCenter(); const targetpoint = findPoint2(center.lat, center.lng, pointCenter.lat, pointCenter.lng, Math.random() * 2 + 0.4); const endpoint = L.latLng(targetpoint.lat , targetpoint.lng); const polyline = L.polyline([pointCenter, endpoint], { weight: 0.5, color: "#000", dashArray: [5,3]}).addTo(map); const endpoint2 = L.latLng(endpoint.lat, endpoint.lng + (center.lng < pointCenter.lng ? 0.5 : -0.5)); const polyline2 = L.polyline([endpoint, endpoint2], { weight: 0.5, color: "#000", dashArray: [5,3]}).addTo(map); const textIcon = L.divIcon({ className: 'map-point-label', html: `${formatThousands(s[x.name])} (${(s[x.name]/sum_value * 100).toFixed(1)}%)` }); const textMarker = L.marker(endpoint2, { icon: textIcon }).addTo(map); } else { poly = L.geoJson(f.geometry, { fillColor: "#DDD", fillOpacity: 0.6, weight: 0.5, color, opacity: 1}).addTo(map) .bindPopup(properties.ADM1_EN); } }); const mapLegend = L.Control.extend({ onAdd: (map) => { return legendClasses(colors, getClassifications(min_value, max_value, classes), x.label, { labelBackground }); } }); setTimeout(() => { map.invalidateSize(); }, 200); const legendInstance = new mapLegend({ position: 'topright' }); // Position as needed legendInstance.addTo(map); return container; }52:T2496,function range( initialDataArray, accessorFunction, aggregatorFunction, paramsObject ) { const initialData = initialDataArray; const accessor = accessorFunction; const aggregator = aggregatorFunction; const argumentsArr = [...arguments]; let params = argumentsArr.filter(isPlainObj)[0]; if (!params) { params = {}; } let chartHeight = 100; let startSelection = 100; params.minY = params.yScale ? 0.0001 : 0; params.yScale = params.yScale || d3.scaleLinear(); chartHeight = params.height || chartHeight; params.yTicks = params.yTicks || 4; params.freezeMin = params.freezeMin || false; params.color = params.color || (() => "steelblue"); const chartWidth = width - 40 - (params.marginRight || 0); var accessorFunc = (d) => d; if (initialData[0].value != null) { accessorFunc = (d) => d.value; } if (typeof accessor == "function") { accessorFunc = accessor; } const dataFinal = initialData; // const isDate = Object.prototype.toString.call(accessor(dataFinal[0])) === "[object Date]"; 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, chartWidth]); dateRanges = d3 .range(dateRangesCount) .map((d) => [dateScale.invert(d), dateScale.invert(d + 1)]); } 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; }; const handlerWidth = 2, handlerFill = "#E1E1E3", middleHandlerWidth = 10, middleHandlerStroke = "#8E8E8E", middleHandlerFill = "#EFF4F7"; const svg = d3 .select(DOM.svg(chartWidth, chartHeight)) .style("overflow", "visible"); const chart = svg .append("g") .attr("transform", `translate(${params.marginLeft ?? 30},5)`); const groupedInitial = 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 aggregator == "function" ? aggregator(d) : d.values.length }) ); const values = grouped.map((d) => d.value); const min = d3.min(values); 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 = chartWidth / minDiff / (maxX - minX); if (eachBarWidth > 20) { eachBarWidth = 20; } if (minDiff < 1) { eachBarWidth = eachBarWidth * minDiff; } if (eachBarWidth < 1) { eachBarWidth = 1; } const scale = params.yScale .domain([params.minY, max]) .range([0, chartHeight - 25]); const scaleY = scale .copy() .domain([max, params.minY]) .range([0, chartHeight - 25]); const scaleX = d3.scaleLinear().domain([minX, maxX]).range([0, chartWidth]); var axis = d3.axisBottom(scaleX); if (isDate) { axis = d3.axisBottom(scaleTime); } const axisY = d3 .axisLeft(scaleY) .tickSize(-chartWidth - 20) .ticks(max == 1 ? 1 : params.yTicks) .tickFormat(d3.format(".2s")); const bars = chart .selectAll(".bar") .data(grouped) .enter() .append("rect") .attr("class", "bar") .attr("width", eachBarWidth) .attr("height", (d) => scale(d.value)) .attr("fill", params.color) .attr("y", (d) => -scale(d.value) + (chartHeight - 25)) .attr("x", (d, i) => scaleX(d.key) - eachBarWidth / 2) .attr("opacity", 0.9); const xAxisWrapper = chart .append("g") .attr("transform", `translate(${0},${chartHeight - 25})`) .call(axis); const yAxisWrapper = chart .append("g") .attr("transform", `translate(${-10},${0})`) .call(axisY); const brush = chart .append("g") .attr("class", "brush") .call( d3 .brushX() .extent([ [0, 0], [chartWidth, chartHeight] ]) .on("start", brushStarted) .on("end", brushEnded) .on("brush", brushed) ); chart.selectAll(".selection").attr("fill-opacity", 0.1); 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", 100) .attr("fill", handlerFill) .attr("stroke", handlerFill) .attr("y", -50) .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"); function brushStarted() { if (d3.event.selection) { startSelection = d3.event.selection[0]; } } function brushEnded() { console.log("ended"); 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]); } console.log(d0, d1); } function brushed(d) { if (d3.event.sourceEvent.type === "brush") return; console.log("brushed", d3.event.selection); if (params.freezeMin) { if (d3.event.selection[0] < startSelection) { d3.event.selection[1] = Math.min( d3.event.selection[0], d3.event.selection[1] ); } if (d3.event.selection[0] >= startSelection) { d3.event.selection[1] = Math.max( d3.event.selection[0], d3.event.selection[1] ); } d3.event.selection[0] = 0; // console.log(d3.event.selection) d3.select(this).call(d3.event.target.move, d3.event.selection); } var d0 = d3.event.selection.map(scaleX.invert); const s = d3.event.selection; console.log(s); handle.attr("display", null).attr("transform", function (d, i) { console.log(d); return "translate(" + (s[i] - 2) + "," + chartHeight / 2 + ")"; }); output({ range: d0 }); } yAxisWrapper.selectAll(".domain").remove(); xAxisWrapper.selectAll(".domain").attr("opacity", 0.1); chart.selectAll(".tick line").attr("opacity", 0.1); function isPlainObj(o) { return typeof o == "object" && o.constructor == Object; } function output(value) { const node = svg.node(); node.value = value; node.value.data = getData(node.value.range); if (isDate) { node.value.range = value.range.map((d) => dateScale.invert(d)); } node.dispatchEvent(new CustomEvent("input")); } function getData(range) { const dataBars = bars .attr("fill", params.color) .filter((d) => { return d.key >= range[0] && d.key <= range[1]; }) .attr("fill", "red") .nodes() .map((d) => d.__data__) .map((d) => d.values) .reduce((a, b) => a.concat(b), []); return dataBars; } const returnValue = Object.assign(svg.node(), { value: { range: [minX, maxX], data: initialData } }); if (isDate) { returnValue.value.range = returnValue.value.range.map((d) => dateScale.invert(d) ); } return returnValue; }53:[{"id":"71586814dbcb4a44d255473994cc94ffee9f9177bd1b9ede917ba2b501d5640928547406b85f4d9cd628a68f5c79f411203cbeb8166c4d332bb73b860bcf4af2","href":"https://static.observableusercontent.com/files/71586814dbcb4a44d255473994cc94ffee9f9177bd1b9ede917ba2b501d5640928547406b85f4d9cd628a68f5c79f411203cbeb8166c4d332bb73b860bcf4af2","name":"admin1-sym.geojsonl.json","type":"application/json","lastModified":1698144706622.129,"size":2447630},{"id":"2a13794979cd7a0618e98b363ece1329af30233174296abbc3c478da503d1bc362f0f5fb9e6d7c31d55d4aacf941405a5290c5a9932f2be9342cd97ce852f45e","href":"https://static.observableusercontent.com/files/2a13794979cd7a0618e98b363ece1329af30233174296abbc3c478da503d1bc362f0f5fb9e6d7c31d55d4aacf941405a5290c5a9932f2be9342cd97ce852f45e","name":"admin1_sym2.json","type":"application/json","lastModified":1698716919727.965,"size":117118},{"id":"1a9e07d8bf46f9203326db2b2f231a7f63493515ba5fadf2436869af6b5779727e88db8ee25fc87bd06c7409b1b4816030396ecd90f70993cce8fe67deaaef32","href":"https://static.observableusercontent.com/files/1a9e07d8bf46f9203326db2b2f231a7f63493515ba5fadf2436869af6b5779727e88db8ee25fc87bd06c7409b1b4816030396ecd90f70993cce8fe67deaaef32","name":"admin1_sym2@1.json","type":"application/json","lastModified":1698717218420.107,"size":91003}] 48:{"id":"2de552db6ffa4669","slug":"visuals-module","title":"Visuals Module","thumbnail":"00b51bc2bf1e5c6ebf83aa585e56176fef58ab4b17cfe207baf959241b664f38","access_level":"public","create_time":"$D2023-10-17T16:12:27.679Z","update_time":"$D2023-11-11T14:51:50.520Z","view_time":null,"first_public_time":"$D2023-10-24T12:41:19.563Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6df1dabcac5226fb","login":"mohammed-sallam-ws","name":"Mohammed Sallam's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8164500f5c68f1eda7bb492a2b1ae7ebc6fe2347ed8c962c1e286fac96ad265a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":596,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5203c5a98843d0fd","login":"mohammed-sallam","name":"msallam","avatar_url":"https://avatars-next.observableusercontent.com/3e55835e936b7454f0e5af5539cec3b395ab6781a15c449768b6e00ea329a895","tier":null,"bio":"","followed_by_you":false,"follows_you":false},{"type":"individual","id":"d329efa70c5b0bc2","login":"heshamo","name":"Hesham Othman","avatar_url":"https://avatars-next.observableusercontent.com/97cd2fd4eae41fa7baca92b81a3ed653fa8a2359c206cc578631f94d108ceea5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5203c5a98843d0fd","login":"mohammed-sallam","name":"msallam","avatar_url":"https://avatars-next.observableusercontent.com/3e55835e936b7454f0e5af5539cec3b395ab6781a15c449768b6e00ea329a895","tier":null,"role":"editor"},{"type":"team","id":"6df1dabcac5226fb","login":"mohammed-sallam-ws","name":"Mohammed Sallam's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8164500f5c68f1eda7bb492a2b1ae7ebc6fe2347ed8c962c1e286fac96ad265a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e2595a1837372083","slug":"modules","title":"Modules","owner":{"id":"6df1dabcac5226fb","login":"mohammed-sallam-ws","name":"Mohammed Sallam's Workspace"}},"type":"notebook","body":{"titling":"auto","title":"Visuals Module","cells":[{"id":9,"value":"# Visuals Module","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"summarizeSeries = (data, name, value, calc = \"sum\") => {\n return _(data)\n .groupBy(name)\n .map((group, key) => ({\n name: key,\n value: calc === \"sum\" ?\n _.sumBy(group, value):\n _.countBy(group, value)\n }))\n .value();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"generateGradients = (classes, fill = \"#4593c9\", step = 0.5) => {\n const colorScale = d3.scaleLinear()\n .domain([0, classes - 1])\n .range([d3.color(fill).brighter(1), d3.color(fill).darker(step)]);\n\n const gradients = [];\n\n for (let i = 0; i < classes; i++) {\n const gradientColor = colorScale(i);\n gradients.push(gradientColor);\n }\n\n return gradients;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"pie = (data, x, options) => {\n const d = summarizeSeries(data, x.label, x.name, x.calc);\n let colors = options?.colors;\n if(x.fill && colors === undefined) colors = generateGradients(d.length, x.fill)\n return pieChart(d, {...options, colors});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"donut = (data, x, options) => {\n const d = summarizeSeries(data, x.label, x.name, x.calc);\n let colors = options?.colors;\n if(x.fill && colors === undefined) colors = generateGradients(d.length, x.fill)\n return pieChart(d, {...options, colors, donut: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"generateSuffix = () => {\n return 'xxxxxxyy'.replace(/[xy]/g, function(c) {\n const r = Math.random() * 16 | 0,\n v = c === 'x' ? r : (r & 0x3 | 0x8);\n return v.toString(16);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"layout = (arr) => {\n const generateLayout = (input) => {\n if (Array.isArray(input)) {\n const row = html`

`\n for (const i in input) {\n row.append(html`${generateLayout(input[i])}`)\n }\n return row;\n } else if (typeof input === 'object' && !!input.cols) {\n const cols = html`

`\n for (const i in input.cols) {\n cols.append(html`${generateLayout(input.cols[i])}`)\n }\n return cols;\n } else {\n return html`

${input}

`;\n }\n }\n \n return html`\n \n

\n ${generateLayout(arr)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"vDivider = `

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"getColorClass = (value, min, max, colors) => {\n const range = max - min;\n const step = range / colors.length;\n const index = Math.floor((value - min) / step);\n const colorIndex = Math.min(colors.length - 1, Math.max(0, index));\n\n return colors[colorIndex];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"findPoint2 = (centerX, centerY, point1X, point1Y, targetRadius) => {\n // Calculate the distance between the center and point1\n const distance = Math.sqrt((point1X - centerX) ** 2 + (point1Y - centerY) ** 2);\n\n // Calculate the angle between the center and point1\n const angle = Math.atan2(point1Y - centerY, point1X - centerX);\n\n // Calculate the coordinates of point2 at the target radius from point1\n const point2X = point1X + targetRadius * Math.cos(angle);\n const point2Y = point1Y + targetRadius * Math.sin(angle);\n\n return { lat: point2X, lng: point2Y };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"unpivot = (data, keyProp, typeProps) => {\n const result = [];\n\n data.forEach(item => {\n const key = item[keyProp];\n typeProps.forEach(type => {\n const value = item[type];\n result.push({ key, type, value });\n });\n });\n\n return result;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"import {group} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"getClassifications = (min, max, n) => {\n const step = (max - min) / n;\n const classifications = [];\n\n for (let i = 0; i <= n; i++) {\n const lowerBound = min + (i * step);\n const upperBound = min + ((i + 1) * step);\n\n classifications.push({\n lowerBound: Math.floor(lowerBound) + (i > 0 ? 1 : 0),\n upperBound: Math.floor(upperBound),\n });\n }\n\n return classifications;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"formatThousands = (value) => value ? value.toLocaleString('en-US') : 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 24:null

${title || ""}

${subtitle || ""}

${value.toLocaleString('en-US')}

${x.label}