25:["$","title",null,{"children":"Visual Module | Hakim's Workspace | Observable"}] 4b: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; };4c:Tf95,Regular_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", "Helvetica") .style("font-size", "14px"); // 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", "#5e5e60") .style("fill", "none") .attr("stroke-width", 0.2) .attr("stroke-dasharray", "6,6") .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', '10pt') .style('text-anchor', (d) => { var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .attr('fill', '#5e5e60');// Set the desired font color here // Add a title and subtitle to the chart svg.append("text") .attr("x", 0) .attr("y", -10) .attr("text-anchor", "middle") .style("font-size", "16px") .text(title); svg.append("text") .attr("x", 0) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "12px") .text(subtitle); // Add a legend to the chart return html`

${svg.node()} ` }4d:T1519,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", "Arial") .style("font-size", "12px") .style("opacity", 1); // set the color scale const color = d3.scaleOrdinal() .domain(data.map(m => m.name)) .range((colors === undefined ? generateGradients(data.length) : colors)); //d3.select(this).style('opacity', 1); // 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", "#5e5e60") .style("fill", "none") .attr("stroke-width", 0.2) .attr("stroke-dasharray", "6,3") .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', '10pt') .style('text-anchor', (d) => { var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .attr('fill', '#5e5e60');// Set the desired font color here // Add a title and subtitle to the chart svg.append("text") .attr("x", 0) .attr("y", -10) .attr("text-anchor", "middle") .style("font-size", "16px") .text(title); svg.append("text") .attr("x", 0) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "12px") .text(subtitle); // Add event listeners to the slices of the pie chart svg.selectAll('path') //.style('filter', 'drop-shadow(0 0 1px #ffffff)') .on('mouseover', function(event, d) { // Highlight the hovered slice d3.select(this).style('opacity', 1); // Show a tooltip with information about the hovered slice const tooltip = d3.select('body').append('div') .attr('class', 'tooltip') .style('position', 'absolute') .style("font-family", "Arial") .style("font-size", "12px") .style('left', (event.pageX + 10) + 'px') .style('top', (event.pageY - 10) + 'px') .attr('fill', '#5e5e60')// Set the desired font color here .html(`

${d.data.value.name}

${formatThousands(d.data.value.value)}

`); }) .on('mouseout', function(event) { // Stop the event from bubbling up to the SVG element d3.select(this).style('opacity', 0.7); // d3.select('tooltip').classed('hidden', true); event.stopPropagation(); // Hide the tooltip d3.select('.tooltip').remove(); }) // .on('click', function(event, d) { // Handle click event on the slice // alert(`You clicked on ${d.data.value.name}!`); //} // ); svg.selectAll('path') .attr("opacity", 0) .transition() .delay((d, i) => i * 100) .duration(1000) .attr("opacity", 1); return html`

${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:Tedf,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) .bindTooltip(`${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: `${(s[x.name]/sum_value * 100).toFixed(1)}%` //}); // Add mouseover and mouseout event listeners to the feature poly.on('mouseover', function(e) { const layer = e.target; layer.setStyle({ weight: 3, //color: '#FF0000', fillOpacity: 0.7, }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { // layer.bringToFront(); } }); poly.on('mouseout', function(e) { const layer = e.target; layer.setStyle({ weight: .50, // color: '#FF0000', // Change this to the same color as the fill color fillOpacity: 0.6, }); }); } else { poly = L.geoJson(f.geometry, { fillColor: "#DDD", fillOpacity: 0.6, weight: 0.5, color, opacity: 1}).addTo(map) //This part is to show the name of the oblast when user click on it if there is no data .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":"1a9e07d8bf46f9203326db2b2f231a7f63493515ba5fadf2436869af6b5779727e88db8ee25fc87bd06c7409b1b4816030396ecd90f70993cce8fe67deaaef32","href":"https://static.observableusercontent.com/files/1a9e07d8bf46f9203326db2b2f231a7f63493515ba5fadf2436869af6b5779727e88db8ee25fc87bd06c7409b1b4816030396ecd90f70993cce8fe67deaaef32","name":"admin1_sym2-1.json","type":"application/json","lastModified":1704746567476.757,"size":91003}] 47:{"id":"34f61999730e65f5","slug":"visual-module","title":"Visual Module","thumbnail":"f994ca13a2d1c9f98ee22d462f306e5112fff244556c2ea1928231e4dc62e595","access_level":"public","create_time":"$D2024-01-08T18:28:57.475Z","update_time":"$D2024-02-19T17:16:05.371Z","view_time":null,"first_public_time":"$D2024-01-08T18:28:57.475Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0d55791abf4ea637","login":"hakim2-ws","name":"Hakim's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d8ecaeff354fe723a09ed03c790704a54ba07f3571c4262d9b75d8936be5c83a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":435,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"64334cc3d01decb5","login":"hakim2","name":"Hakim","avatar_url":"https://avatars-next.observableusercontent.com/805601731643bdffdf0d4d5d88916189c3c4dc915b0036702733613e93adbaa6","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"64334cc3d01decb5","login":"hakim2","name":"Hakim","avatar_url":"https://avatars-next.observableusercontent.com/805601731643bdffdf0d4d5d88916189c3c4dc915b0036702733613e93adbaa6","tier":null,"role":"editor"},{"type":"team","id":"0d55791abf4ea637","login":"hakim2-ws","name":"Hakim's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d8ecaeff354fe723a09ed03c790704a54ba07f3571c4262d9b75d8936be5c83a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visual Module","cells":[{"id":0,"value":"# Visual Module","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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\n // Modify the pieChart function to include the color property for text marks\n return pieChart(d, {\n ...options,\n colors,\n donut: true,\n label: { color: \"#5e5e60\" }, // Set the desired font color here\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"vDivider = `

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"admin1_sym21 = FileAttachment(\"admin1_sym2-1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"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":39,"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":41,"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":43,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"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

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

${x.label}