2d:null 2e:["$","title",null,{"children":"Grocery shops revenue/KPI outliers | Arseny Smoogly | Observable"}] 33:T194c,{ const detailAreaWidth = 200; const verticalDistributionChartWidth = 100; const horizontalDistributionChartHeight = 75; const plotAreaWidth = width - detailAreaWidth; const scatterplotWidth = plotAreaWidth - verticalDistributionChartWidth; const contextData = (selectedContext?.filter(filterPredicate) ?? filteredKpis).map(x => ({...x, ...outlierednessById.get(x.id) })).sort((a, b) => d3.ascending(a.outlieredness, b.outlieredness)); const selectedShop = contextData.find(x => x.id === selected?.id); const { isVeryDense, isDense } = cometDensity(contextData); const scatterplot = cometPlot(scatterplotWidth, contextData, selectedShop); const revenueOutlieredness = outlierBoundaries(logRevenue); const revenueBoundaries = revenueOutlieredness(contextData); const horizontalDistributionChart = Plot.plot({ height: horizontalDistributionChartHeight, width: scatterplotWidth, x: xRevenueAxis, marks: [ !isVeryDense && Plot.dotX(contextData, Plot.dodgeY({ x: logRevenue, fill: colorChannel, z: colorChannelProp, r: 2 })), !isVeryDense && selected && Plot.tickX([revenueBoundaries.lowBoundary, revenueBoundaries.highBoundary], { x: x => x, stroke: "#000" }), isVeryDense && Plot.rectY(contextData, Plot.binX({ y: "count" }, { x: logRevenue, fill: colorChannel, z: colorChannelProp })), ].filter(Boolean) }); const kpiOutlieredness = outlierBoundaries(x => x.kpi); const kpiBoundaries = kpiOutlieredness(contextData); const verticalDistributionChart = Plot.plot({ width: verticalDistributionChartWidth, marks: [ !isVeryDense && Plot.dotY(contextData, Plot.dodgeX({y: 'kpi', fill: colorChannel, z: colorChannelProp, r: 2 })), !isVeryDense && selected && Plot.tickY([kpiBoundaries.lowBoundary, kpiBoundaries.highBoundary], { y: x => x, stroke: "#000" }), isVeryDense && Plot.rectX(contextData, Plot.binY({ x: "count" }, {y: 'kpi', fill: colorChannel, z: colorChannelProp })), ].filter(Boolean) }); const locationsById = d3.index(collide(contextData), x => x.id); const locatedKpis = contextData.map(x => ({ ...x, ...locationsById.get(x.id) })); const mapChart = Plot.plot({ width: Math.floor(plotAreaWidth / 3), height: 300, // color: { legend: true }, r: { range: [0, 2] }, projection: { type: "mercator", rotate: [0, 0, -5], // domain: { // "type": "FeatureCollection", // features: locatedKpis.map(x => ({ // "type": "Feature", // "geometry": { // "type": "Point", // "coordinates": [x.lat, x.lng] // } // })), // } domain: d3.geoCircle().center([80, 45]).radius(3800 /* KM */ / (6371 * Math.PI * 2) * 360)(), }, marks: [ Plot.geo(russiaSubunits, { strokeOpacity: 0.2 }), Plot.dot(locatedKpis, { x: "lat", y: "lng", r: "revenue", fill: colorChannel }), Plot.dot([locatedKpis.find(k => k.id === selected?.id)].filter(Boolean), { x: "x", y: "y", r: "revenue", fill: selectedColor }), ] }); const brandsChart = Plot.plot({ caption: "Brands", width: Math.floor(plotAreaWidth / 3), marginLeft: 100, y: { label: '' }, x: { label: '', grid: true }, marks: [ Plot.barX(contextData, Plot.groupY({ x: "count" }, { y: "brand", fill: colorChannel, sort: { y: "x", reverse: true } })) ], }); const citiesChart = Plot.plot({ caption: "Cities", width: Math.floor(plotAreaWidth / 3), marginLeft: 100, y: { label: '', domain: contextData.length ? TopN(contextData, { groupby: "city" }) : [] }, x: { label: '', grid: true }, marks: [ Plot.barX(contextData, Plot.groupY({ x: "count" }, { y: "city", z: colorChannelProp, fill: colorChannel, sort: { y: "x", reverse: true } })) ], }); const scatterplotLeft = scatterplot.scale('x').range[0]; const scatterplotTop = scatterplot.scale('y').range[0]; const horizontalChartOffset = scatterplotLeft - horizontalDistributionChart.scale('x').range[0]; const verticalChartOffset = scatterplotTop - verticalDistributionChart.scale('y').range[0]; const distance = (a, b, c) => Math.sqrt(a * a + b * b + c * c); const outlieredness = a => distance(a.kpiOutlieredness, a.revenueOutlieredness, 0); const maxOutlieredness = Math.max(...contextData.map(outlieredness)); const clickAdjustment = scale => { const range = scatterplot.scale(scale).range; const min = Math.min(...range); const max = Math.max(...range); const spread = max - min; return x => selected ? (x / spread * max) : x; }; const xAdjustment = clickAdjustment('x'); const yAdjustment = clickAdjustment('y'); const selectFromScatterplot = (e) => { const x = xAdjustment(e.offsetX); const y = yAdjustment(e.offsetY); const outlierednessWeight = 0.5; const dist = a => distance( y - scatterplot.scale('y').apply(a.kpi), x - scatterplot.scale('x').apply(logRevenue(a)), outlierednessWeight * (maxOutlieredness - outlieredness(a)) ); mutable selected = contextData.reduce((a, b) => dist(a) < dist(b) ? a : b); mutable tailAngle = null; }; return htl.html`

${ horizontalDistributionChart }

${ scatterplot }

${ verticalDistributionChart }

${ brandsChart }

${ citiesChart }

${ mapChart }

${ selected && htl.html`

${ selected.isNumericName ? selected.name : selected.brand }

${ !selected.isNumericName ? `${ selected.name }, ${ selected.sector }` : selected.sector }

${ selected.city !== selected.area ? md`${ selected.city }, ${ selected.area }` : selected.area }

Revenue ${ selected.revenue }, MM Rub
KPI ${ selected.kpi }

`; }34:T77b,radialSelect = (size) => { const mid = size / 2; const context = DOM.context2d(size, size) const canvas = context.canvas; canvas.context = context; const coordsFromAngle = angle => ({ x: mid + 0.9 * Math.cos(angle) * size / 2, y: mid + 0.9 * Math.sin(angle) * size / 2, }); const clear = () => context.clearRect(0, 0, size, size); const and = (...fns) => (x) => fns.forEach(f => f(x)); const renderCircle = () => { context.strokeStyle = '#ccc'; context.beginPath(); context.arc(mid, mid, mid - 1, 0, Math.PI * 2); context.stroke() } const renderLine = (angle) => { const { x, y } = coordsFromAngle(angle); context.fillStyle = '#000'; context.beginPath(); context.moveTo(mid, mid); context.arc(mid, mid, 3, 0, Math.PI * 2); context.fill(); context.strokeStyle = '#000'; context.moveTo(mid, mid); context.lineTo(x, y); context.stroke() }; const update = tailAngle === null ? and(clear, renderCircle) : and(clear, renderLine, renderCircle); update(tailAngle); const coordinatesFromEvent = event => { const { offsetX: x, offsetY: y } = event; const offset = (x - mid) >= 0 ? 0 : Math.PI; const angle = Math.atan((y - mid) / (x - mid)) + offset; return { ...coordsFromAngle(angle), angle, }; }; let touching = false; let intermediateCoordinates = null; d3.select(canvas) .on('mousedown', event => { touching = true; intermediateCoordinates = coordinatesFromEvent(event); }) .on('mousemove', event => { if (!touching) { return; } intermediateCoordinates = coordinatesFromEvent(event) clear(); renderLine(intermediateCoordinates.angle); renderCircle(); }) .on('mouseup', event => { touching = false; mutable tailAngle = intermediateCoordinates.angle; }) return canvas; }35:T627,translateCity = generateTranslator('city', { "Смоленск": "Smolensk", "Москва": "Moscow", "Екатеринбург": "Yekaterinburg", "Санкт-Петербург": "Saint Petersburg", "Волгоград": "Volgograd", "Астрахань": "Astrakhan", "Вологда": "Vologda", "Воронеж": "Voronezh", "Мурманск": "Murmansk", "Калуга": "Kaluga", "Курск": "Kursk", "Краснодар": "Krasnodar", "Орёл": "Orel", "Новгород": "Novgorod", "Челябинск": "Chelyabinsk", "Псков": "Pskov", "Красноярск": "Krasnoyarsk", "Брянск": "Bryansk", "Ростов-на-Дону": "Rostov-on-Don", "Махачкала": "Makhachkala", "Владивосток": "Vladivostok", "Белгород": "Belgorod", "Владикавказ": "Vladikavkaz", "Грозный": "Grozny", "Новосибирск": "Novosibirsk", "Михайловск": "Mikhailovsk", "Тверь": "Tver", "Нальчик": "Nalchik", "Рязань": "Ryazan", "Ярославль": "Yaroslavl", "Тула": "Tula", "Ставрополь": "Stavropol", "Пятигорск": "Pyatigorsk", "Нижний Новгород": "Nizhny Novgorod", "Минводы": "Minvody", "Самара": "Samara", "Ессентуки": "Essentuki", "Будённовск": "Budyonnovsk", "Георгиевск": "Georgievsk", "Невинномысск": "Nevinnomyssk", "Кисловодск": "Kislovodsk", "Архыз": "Arkhyz", "Домбай": "Dombay", });36:Ta75,getContext = { // TODO: configurable from UI? const maxContextSize = 100; const maxDistanceKm = 1000; const maxNeighbours = 5; return shop => { const sameBrand = byBrand.get(shop.brand); const sameSector = bySector.get(shop.sector); const sameArea = byArea.get(shop.area); const sameCity = byCity.get(shop.city); const neighbourhood = cityOrderedNeighbours.get(shop.originalCity).filter(c => sameArea.some(x => x.city === c)); let context = []; const addToContext = values => { context = [...new Set([...context, ...values])]; }; const pick = (filter, maxNeighbours, maxDistanceKm) => { const thisNeighbourhood = [...neighbourhood].slice(0, maxNeighbours + 1); while (thisNeighbourhood.length) { if (context.length >= maxContextSize) { return context; } const neighbouringCity = thisNeighbourhood.shift(); const distance = cityDistances.get(shop.city).get(neighbouringCity); if (distance > maxDistanceKm * 1e3) { continue; } const inThatCity = byCity.get(neighbouringCity).filter(filter); addToContext(inThatCity); } } // TODO: orderable from UI? pick(x => sameBrand.includes(x), maxNeighbours, maxDistanceKm); pick(x => sameSector.includes(x), maxNeighbours, maxDistanceKm); if (context.length < maxContextSize / 3) { pick(x => sameBrand.includes(x), 2 * maxNeighbours, maxDistanceKm); pick(x => sameSector.includes(x), 2 * maxNeighbours, maxDistanceKm); } if (context.length < maxContextSize / 3) { addToContext(sameArea.filter(x => sameBrand.includes(x))); } if (context.length < maxContextSize / 3) { addToContext(sameArea.filter(x => sameSector.includes(x))); } if (context.length < maxContextSize / 3) { pick(x => sameBrand.includes(x), 3 * maxNeighbours, 2 * maxDistanceKm); pick(x => sameSector.includes(x), 3 * maxNeighbours, 2 * maxDistanceKm); } if (context.length < 10) { const sectorIndex = sectorsOrderByAscRevenue.indexOf(shop.sector); const nextSector = sectorIndex === 0 ? sectorsOrderByAscRevenue[1] : sectorsOrderByAscRevenue[sectorIndex - 1]; pick(x => x.sector === nextSector, maxNeighbours, maxDistanceKm); pick(x => x.sector === nextSector, 2 * maxNeighbours, 2 * maxDistanceKm); if (context.length < 10) { addToContext(sameArea.filter(x => x.sector === nextSector)); } } if (context.length < 10) { addToContext(sameCity); } if (context.length < 10) { pick(() => true, maxNeighbours, maxDistanceKm); } return context; } }37:T44d,outlierBoundaries = (accessor) => (ctx) => { // const topQ = d3.quantile(ctx, 0.75, accessor); // const bottomQ = d3.quantile(ctx, 0.25, accessor); // const iqr = topQ - bottomQ; // const lowBoundary = bottomQ - 1.5 * iqr; // const highBoundary = topQ + 1.5 * iqr; // const mean = d3.mean(ctx, accessor); // const lowBoundary = mean - 1.58 * iqr; // const highBoundary = mean + 1.58 * iqr; // const lowBoundary = mean - iqr; // const highBoundary = mean + iqr; // const lowBoundary = mean; // const highBoundary = mean; // const spread = 0.25; // const lowBoundary = d3.quantile(ctx, 0.5 - spread, accessor); // const highBoundary = d3.quantile(ctx, 0.5 + spread, accessor); const median = d3.quantile(ctx, 0.5, accessor); const lowBoundary = median; const highBoundary = median; // const groups = simplestat.ckmeans(ctx.map(accessor), 10); // const lowBoundary = groups[0][groups[0].length - 1]; // Last value in first group // const highBoundary = groups[groups.length - 1][0]; // First value in last group return { lowBoundary, highBoundary }; }38:T55a,outlierednessById = { const outlieredness = (accessor) => (x) => { const { lowBoundary, highBoundary } = outlierBoundaries(accessor)(contextById.get(x.id)); const val = accessor(x); if (val < lowBoundary) { return val - lowBoundary; } if (val > highBoundary) { return val - highBoundary; } return 0; } const scaledMetrics = (group, metric) => { const metrics = group.map(metric); const negativeScale = d3.scaleLinear() .range([-1, 0]) .domain(d3.extent(metrics.filter(x => x < 0))); const positiveScale = d3.scaleLinear() .range([0, 1]) .domain(d3.extent(metrics.filter(x => x > 0))); return metrics.map(x => { if (x === 0) { return 0; } const scale = x > 0 ? positiveScale : negativeScale; return scale(x); }); } const revenueOutlierMetric = outlieredness(logRevenue); const kpiOutlierMetric = outlieredness(x => x.kpi); const revenueMetrics = scaledMetrics(kpis, revenueOutlierMetric); const kpiMetrics = scaledMetrics(kpis, kpiOutlierMetric); const combinedMetrics = scaledMetrics(kpis.map((x, i) => i), i => (revenueMetrics[i] + kpiMetrics[i]) / 2); return new Map(kpis.map((x, i) => [x.id, { outlieredness: combinedMetrics[i], revenueOutlieredness: revenueMetrics[i], kpiOutlieredness: kpiMetrics[i] }])); }39:Tc7b,cityLocations = { return new Map([["Смоленск",{"lat":54.7903112,"lng":32.0503663}],["Москва",{"lat":55.755826,"lng":37.6173}],["Екатеринбург",{"lat":56.8430993,"lng":60.64540859999999}],["Санкт-Петербург",{"lat":59.9310584,"lng":30.3609097}],["Волгоград",{"lat":48.708048,"lng":44.5133034}],["Астрахань",{"lat":46.3586008,"lng":48.0569482}],["Вологда",{"lat":59.21806649999999,"lng":39.8978052}],["Воронеж",{"lat":51.6683487,"lng":39.19192880000001}],["Мурманск",{"lat":68.97331129999999,"lng":33.0855848}],["Калуга",{"lat":54.5135904,"lng":36.2636786}],["Курск",{"lat":51.7482395,"lng":36.1947023}],["Краснодар",{"lat":45.036035,"lng":38.97457060000001}],["Орёл",{"lat":52.9668468,"lng":36.06248980000001}],["Новгород",{"lat":58.52556980000001,"lng":31.2741928}],["Челябинск",{"lat":55.1644419,"lng":61.4368431}],["Псков",{"lat":57.8166994,"lng":28.3344734}],["Красноярск",{"lat":56.01528339999999,"lng":92.8932476}],["Брянск",{"lat":53.2635306,"lng":34.41611}],["Ростов-на-Дону",{"lat":47.2357137,"lng":39.701505}],["Махачкала",{"lat":42.9777885,"lng":47.5146913}],["Владивосток",{"lat":43.1332484,"lng":131.9112975}],["Белгород",{"lat":50.5997134,"lng":36.5982621}],["Владикавказ",{"lat":43.0252344,"lng":44.6659759}],["Грозный",{"lat":43.31877009999999,"lng":45.68652429999999}],["Новосибирск",{"lat":54.9832693,"lng":82.8963831}],["Михайловск",{"lat":45.1299577,"lng":42.0284212}],["Тверь",{"lat":56.85872140000001,"lng":35.9175965}],["Нальчик",{"lat":43.4846029,"lng":43.6070118}],["Рязань",{"lat":54.6095418,"lng":39.7125857}],["Ярославль",{"lat":57.62607440000001,"lng":39.8844708}],["Тула",{"lat":54.204836,"lng":37.6184915}],["Ставрополь",{"lat":45.0390116,"lng":41.9631954}],["Пятигорск",{"lat":44.04989330000001,"lng":43.039636}],["Нижний Новгород",{"lat":56.3268684,"lng":44.0058793}],["Минводы",{"lat":44.211675,"lng":43.1238527}],["Самара",{"lat":53.203772,"lng":50.1606382}],["Ессентуки",{"lat":44.0455121,"lng":42.8575232}],["Будённовск",{"lat":44.7977007,"lng":44.1590538}],["Георгиевск",{"lat":44.1497667,"lng":43.4577689}],["Невинномысск",{"lat":44.6393075,"lng":41.9419233}],["Кисловодск",{"lat":43.9055914,"lng":42.7159184}],["Архыз",{"lat":43.5631805,"lng":41.28128969999999}],["Домбай",{"lat":43.2894021,"lng":41.6235059}]]); const apiKey = ""; if (!apiKey) { throw new Error("Need api key for geocoder") } const locations = await [...new Set(kpis.map(k => k.city))].reduce(async (prev, c) => { const agg = await prev; await new Promise(res => setTimeout(res, 200)); const res = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${c}, Russia&key=${apiKey}`); const json = await res.json(); const coordinates = json?.results[0]?.geometry?.location ?? null; return [...agg, [c, coordinates]]; }, Promise.resolve([])) return new Map(locations); }3a:T56d,collide = { const collisions = new Map(); const collide = (set) => { const key = set.map(x => x.id).sort().join("::"); const cached = collisions.get(key); if (cached) { return cached; } const locatedKpis = set.map(k => ({ id: k.id, revenue: k.revenue, ...cityLocations.get(k.originalCity) })); const revenueScale = d3.scaleSqrt() .domain(d3.extent(locatedKpis.map(k => k.revenue))) .range([0, 0.75]); const sim = d3.forceSimulation(locatedKpis) .force("collision", d3.forceCollide(d => revenueScale(d.revenue)).iterations(2).strength(0.2)) // Repulsion force .force("x_force", d3.forceX(d => d.lng).strength(2)) // Each point attacted to its center x and y .force("y_force", d3.forceY(d => d.lat).strength(2)) let ticks = 300; while (ticks--) { sim.tick(); } const result = locatedKpis.map(x => ({ id: x.id, lat: x.x, lng: x.y })); collisions.set(key, result); return result; }; // preheat const preheatQueue = [null, ...byArea.keys()].flatMap(area => [null, ...bySector.keys()].map(sector => { const predicate = getFilterPredicate({ area, sector, tailAngle: null }); return kpis.filter(predicate); })); function preheat() { if (preheatQueue.length === 0) { return; } collide(preheatQueue.shift()); requestAnimationFrame(preheat); } preheat(); return collide; }3b:[{"id":"9ad44594d6510fc17ded7c929276b194cbc8e49105354ddef6c4e37eb048c8cecb8ab6fcf7306114859497f14b3ec279f60ca268dbc439123361fe92e2d1da0b","href":"https://static.observableusercontent.com/files/9ad44594d6510fc17ded7c929276b194cbc8e49105354ddef6c4e37eb048c8cecb8ab6fcf7306114859497f14b3ec279f60ca268dbc439123361fe92e2d1da0b","name":"dataviz-shops-kpi.csv","type":"text/csv","lastModified":1671014416644.29,"size":106780}] 31:{"id":"10a438a76b2d5d7c","slug":"fireworks","title":"Grocery shops revenue/KPI outliers","thumbnail":"eeb457aa8d2de081c5f62e5d57a83ebd0799119d2b420dbfe2724dd7c2579478","access_level":"public","create_time":"$D2022-12-14T10:39:49.350Z","update_time":"$D2022-12-28T12:27:00.824Z","view_time":null,"first_public_time":"$D2022-12-14T10:39:49.350Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8eccbf9e36e0f8d3","login":"smoogly","name":"Arseny Smoogly","avatar_url":"https://avatars-next.observableusercontent.com/88acd182f1a5446542f4cc229f29ecac72ff1a21b110764076ca2fc36d78a114","tier":"starter_2024"},"version":3351,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0da04014c2a8fed6","login":"smoogly","name":"Arseny Smoogly","avatar_url":"https://avatars-next.observableusercontent.com/88acd182f1a5446542f4cc229f29ecac72ff1a21b110764076ca2fc36d78a114","tier":null}],"members":[{"type":"individual","id":"0da04014c2a8fed6","login":"smoogly","name":"Arseny Smoogly","avatar_url":"https://avatars-next.observableusercontent.com/88acd182f1a5446542f4cc229f29ecac72ff1a21b110764076ca2fc36d78a114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Grocery shops revenue/KPI outliers","cells":[{"id":0,"value":"# Grocery shops revenue/KPI outliers\n\nHomework for the [Bureau datavis course.](https://bureau.ru/courses/data-online/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3238,"value":"## Comet\n\nEvery shop is represented by a \"comet\" — a dot with a tail. \nHere's \"${ sampleOutlier.name }\" in ${ sampleOutlier.city }: ${ drawStandaloneComet(sampleOutlier) } \nAnd here's a \"${ sampleNormie.name }\" in ${ sampleNormie.city }: ${ drawStandaloneComet(sampleNormie) }\n\nLength of the tail represents how far the shop is from its peer group along the Revenue and KPI axes — KPI is non-monetary metric of shop quality like cleanliness and such.\n\nRevenue is horizontal, KPI is vertical. Tail points towards the median of the peer group, so ${ drawStandaloneComet(sampleOutlier) } is both _higher revenue,_ and _higher KPI_ than average peer.\n\n\n## Peers\n\nPeer group is shops of the same brand in same or nearby cities. Sometimes also shops from the same sector, if there aren't enough shops from same brand. Here's how the peer group looks like for that \"${ sampleOutlier.name }\" in ${ sampleOutlier.city }:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3294,"value":"{\n const withOutlieredness = (shop) => ({ ...shop, ...outlierednessById.get(shop.id) });\n return cometPlot(undefined, contextById.get(sampleOutlier.id).map(withOutlieredness), withOutlieredness(sampleOutlier))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3338,"value":"$${ htl.html`

` }\n\n# Fireworks\n\nPlay with the entire dataset below.\n\nClick the dot to select a particular shop and its peer group. \nUse filters to narrow down what you see.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1677,"value":"{\n const deselect = selected && pseudolink(\n `${selected.isNumericName ? selected.name : `${ selected.brand} ${selected.name}`} ❌`, \n () => { mutable selected = null; }\n );\n\n const deselectAngle = () => { mutable tailAngle = null };\n return htl.html`\n

${ selectArea.view }

${ selectSector.view }

Tail angle

${ radialSelect(50) }

${ tailAngle !== null ? pseudolink('❌', deselectAngle) : null }

${ deselect }

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":654,"value":"mutable selected = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"mutable selectedArea = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1917,"value":"mutable selectedSector = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3043,"value":"mutable tailAngle = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3117,"value":"getFilterPredicate = ({ area, sector, tailAngle }) => {\n return [\n area && (x => x.area === area),\n sector && (x => x.sector === sector),\n tailAngle !== null && (x => {\n const data = outlierednessById.get(x.id);\n \n const offset = data.revenueOutlieredness >= 0 ? 0 : Math.PI;\n const angle = Math.PI - (Math.atan(data.kpiOutlieredness / data.revenueOutlieredness) + offset);\n\n const threshold = Math.PI / 6;\n const diff = Math.abs(angle - tailAngle);\n return Math.abs(angle - tailAngle) < threshold \n || Math.abs(angle - tailAngle + 2 * Math.PI) < threshold \n || Math.abs(angle - tailAngle - 2 * Math.PI) < threshold;\n }),\n ].filter(Boolean).reduce((a, b) => x => a(x) && b(x), () => true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"filterPredicate = getFilterPredicate({ area: selectedArea, sector: selectedSector, tailAngle })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3240,"value":"sampleOutlier = kpis.find(k => k.id === \"311-058\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3275,"value":"sampleNormie = kpis.find(k => k.id === \"351-079\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1935,"value":"## Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2802,"value":"pseudolink = (text, onclick) => htl.html`\n ${ text }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"fancySelect = ({ label, options, value, format, available, suggested, onChange }) => {\n const controller = Inputs.select(options, {\n disabled: available.length === 0 ? true : options.filter(x => !available.includes(x)),\n format,\n value,\n width: 10,\n });\n\n const inputted = () => { onChange(controller.value) }\n controller.addEventListener(\"input\", inputted);\n invalidation.then(() => controller.removeEventListener(\"input\", inputted));\n\n const setSuggestion = () => { onChange(suggested) };\n const view = htl.html`\n

\n \n \n ${ label }\n ${ controller }\n \n ${ (suggested && suggested !== value) ? pseudolink(format(suggested), setSuggestion) : null }\n

\n `;\n\n return { view };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"defaultFormat = (val) => x => x === null ? val : x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"selectArea = {\n const options = [null, ...byArea.keys()]\n return fancySelect({\n label: \"Region\",\n value: selectedArea,\n options,\n available: selectedContext ? [null, ...selectedContext.map(x => x.area)] : options,\n format: defaultFormat(\"All\"),\n suggested: selected ? selected.area : null,\n onChange: x => { mutable selectedArea = x; }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"selectSector = {\n const options = [null, ...sectorsOrderByAscRevenue]\n return fancySelect({\n label: \"Sector\",\n value: selectedSector,\n options,\n available: selectedContext ? [null, ...selectedContext.map(x => x.sector)] : options,\n format: defaultFormat(\"All\"),\n suggested: selected ? selected.sector : null,\n onChange: x => { mutable selectedSector = x; }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2976,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2167,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"kpis_raw = FileAttachment(\"dataviz-shops-kpi.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"kpis = kpis_raw.map(k => {\n const rawName = k[\"Название магазина\"];\n const brand = rawName.includes(\"Овощи-фрукты\") ? \"Овощи-фрукты\" : rawName.split('-')[0].replace(\" Центральная\", \"\");\n\n const name = rawName === \"Груша Центральная\" ? rawName\n : rawName.replace(brand, \"\").replace(/^-/, '');\n const isNumericName = Number(name).toString() === name;\n const numericAdjustedName = Number(name).toString() === name ? rawName : name;\n\n const translatedBrand = translateBrand(brand);\n const translatedName = numericAdjustedName.replace(brand, translatedBrand);\n \n return ({ \n q: k[\"Квартал\"], \n id: k[\"Код магазина\"], \n name: translatedName,\n isNumericName,\n brand: translatedBrand, \n originalCity: k[\"Город\"],\n city: translateCity(k[\"Город\"]), \n area: translateArea(k[\"Город\"] === \"Москва\" ? k[\"Город\"] : k[\"Округ\"]),\n sector: translateSector(k[\"Сектор\"]), \n revenue: Number(k[\"Выручка за квартал, млн руб.\"]),\n kpi: Number(k[\"KPI оценка\"]),\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3150,"value":"## Translations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3155,"value":"generateTranslator = (type, mapping) => (input) => {\n const res = mapping[input];\n if (!res) { throw new Error(`No ${ type } translation for '${ input }'`); }\n return res;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3153,"value":"translateBrand = generateTranslator('brand', {\n \"Алёнка\": \"Alyonka\",\n \"Груша\": \"Pear\",\n \"Минимаркет24\": \"Minimarket24\",\n \"Продукты\": \"Groceries\",\n \"Пять гор\": \"Five mountains\",\n \"Гипер\": \"Hyper\",\n \"Овощи-фрукты\": \"Vegetables-fruits\",\n \"Кхор\": \"Khor\",\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3160,"value":"translateSector = generateTranslator('sector', {\n 'магазин у дома': 'Convenience store',\n 'супермаркет': 'Supermarket',\n 'гипермаркет': 'Superstore',\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3166,"value":"translateArea = generateTranslator('area', {\n \"Центр\": \"Center\",\n \"Москва\": \"Moscow\",\n \"Урал\": \"Urals\",\n \"Северо-запад\": \"North-west\",\n \"Юг\": \"South\",\n \"Сибирь\": \"Siberia\",\n \"Кавказ\": \"Caucasus\",\n \"Дальний Восток\": \"Far east\",\n \"Поволжье\": \"Volga region\",\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3174,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1940,"value":"## Indices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"byArea = d3.group(kpis, k => k.area)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"byCity = d3.group(kpis, k => k.city)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"byBrand = d3.group(kpis, k => k.brand)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"bySector = d3.group(kpis, k => k.sector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"sectorsOrderByAscRevenue = {\n return [...bySector.entries()]\n .map(([s, group]) => ({\n rev: d3.median(group, x => x.revenue),\n sector: s,\n }))\n .sort((a, b) => d3.ascending(a.rev, b.rev))\n .map(x => x.sector)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2632,"value":"## Shop contexts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"contextById = d3.rollup(kpis, x => getContext(x[0]), x => x.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"selectedContext = contextById.get(selected?.id);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"filteredKpis = kpis.filter(filterPredicate);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2914,"value":"## Drawing the comet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1093,"value":"drawSymbol = kpi => ({ draw: (context, size) => {\n const r = Math.sqrt(size / Math.PI) / 2;\n\n const lineSize = size + r;\n context.moveTo(0, 0);\n context.lineTo(-lineSize * kpi.revenueOutlieredness, lineSize * kpi.kpiOutlieredness)\n\n context.moveTo(r, 0);\n context.arc(0, 0, r, 0, 2 * Math.PI);\n}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3266,"value":"drawStandaloneComet = (shop) => {\n const size = 20;\n const context = DOM.context2d(size, size)\n\n context.fillStyle = colorChannel(shop);\n context.strokeStyle = colorChannel(shop);\n\n const outlieredness = outlierednessById.get(shop.id)\n\n const max = Math.floor(0.9 * size);\n const min = Math.ceil(0.1 * size);\n \n const xOffset = outlieredness.revenueOutlieredness > 0 ? max : min;\n const yOffset = outlieredness.kpiOutlieredness > 0 ? min : max;\n \n context.translate(xOffset, yOffset)\n drawSymbol({ ...shop, ...outlieredness }).draw(context, size)\n\n context.stroke()\n context.fill()\n\n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2354,"value":"## Geo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"russia = {\n const resp = await fetch('https://raw.githubusercontent.com/zarkzork/russia-topojson/5f573d74f8a14b3728429a72d277fdc94836f3a4/russia.json')\n return resp.json()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"russiaSubunits = topojson.feature(russia, russia.objects.subunits)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"cityDistances = {\n const index = new Map();\n const rename = ll => ({ latitude: ll.lat, longitude: ll.lng });\n \n const cities = [...cityLocations.keys()];\n cities.forEach(c1 => cities.forEach(c2 => {\n const innerIndex = index.get(c1) ?? new Map();\n innerIndex.set(c2, haversine.default(rename(cityLocations.get(c1)), rename(cityLocations.get(c2)), { unit: \"meter\" }));\n index.set(c1, innerIndex);\n }));\n\n return index;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"cityOrderedNeighbours = {\n const index = new Map();\n const invert = map => new Map([...map.enntries()].map(([a, b]) => [b, a]));\n\n const cities = [...cityLocations.keys()];\n return new Map(cities.map(c1 => {\n const neighboursByDistance = d3.rollup([...cityDistances.get(c1).entries()], group => group.map(([city, distance]) => city), ([city, distance]) => distance)\n\n const distances = [...neighboursByDistance.keys()].sort((a, b) => d3.ascending(a, b));\n return [c1, distances.map(d => neighboursByDistance.get(d)).reduce((a, b) => [...a, ...b])];\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2918,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2169,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"haversine = import('https://cdn.skypack.dev/haversine@1.1.1?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"import { TopN } from \"@enjalot/topn\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2639,"value":"## Common","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1131,"value":"selectedColor = \"#F00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3228,"value":"colorChannelProp = \"brand\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3231,"value":"colorChannel = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\n const colorChannel = x => scale(x[colorChannelProp]);\n kpis.map(colorChannel); // Pre-assign the colors\n\n return colorChannel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"logRevenue = k => Math.log10(k.revenue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"logRevenueFormat = d => {\n const val = Math.pow(10, d);\n return val % 1 === 0 ? val : val.toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"xRevenueAxis = ({ tickFormat: logRevenueFormat, ticks: 10, label: \"Revenue, MM RUB →\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3311,"value":"cometDensity = (contextData) => {\n const isVeryDense = contextData.length > 200;\n const isDense = contextData.length > 75;\n\n return { isVeryDense, isDense };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3306,"value":"cometPlot = (width, contextData, selectedShop) => {\n const { isVeryDense, isDense } = cometDensity(contextData);\n const scatterplotOpacity = x => {\n if (Math.abs(x.outlieredness) > 0.15) { return 1; };\n if (isVeryDense) { return 0.35; }\n if (isDense) { return 0.66; }\n return 0.85;\n };\n \n return Plot.plot({\n width: width,\n x: xRevenueAxis,\n y: { label: \"↑ KPI\" },\n color: { legend: contextData.length > 0 },\n marks: [\n Plot.dot(contextData, { x: logRevenue, y: 'kpi', fill: colorChannel, stroke: colorChannel, r: 2, symbol: drawSymbol, opacity: scatterplotOpacity, pointerEvents: 'none' }),\n \n Plot.dot([selectedShop].filter(Boolean), { x: logRevenue, y: 'kpi', fill: selectedColor, stroke: selectedColor, r: 5, opacity: 0.25, pointerEvents: 'none' }),\n Plot.dot([selectedShop].filter(Boolean), { x: logRevenue, y: 'kpi', fill: selectedColor, stroke: selectedColor, r: 2, symbol: drawSymbol, pointerEvents: 'none' }),\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"