DATA IS ALIVE; pushing forward the world of market research data analytics viz
Public
Edited
Sep 26, 2022
2 stars
interactions = (country) => country.on("click", d => {
const tooltip = d3.select(".svg-tooltip")
const region = Array.isArray(d)? d[0]: d.properties.name //an array means the hovered element is a marker rahter than region
set(viewof countrySelected, countrySelected != region? region: AggregateId)
d3.selectAll(".region.selected").classed("selected", false)
countrySelected != AggregateId? d3.select(`#${toId(region)}`).classed("selected", true): ""
}).on("mouseover", d => {
const tooltip = d3.select(".svg-tooltip")
const hoveredRegion = Array.isArray(d)? d[0]: d.properties.name
const region = countrySelected != AggregateId? countrySelected: hoveredRegion
if(groupByRegion.has(/*region*/hoveredRegion)){
const flag = `<image height="40" preserveAspectRatio="none" src="${flagsMap.get(region)[0].url}"></image><br/>`
const country = region == AggregateId? region: customCountriesReverseMap.get(region).x
const periodDescription = comparison.shift == 0? dateMappedToStrings[date]: `${dateMappedToStrings[date]} v ${dateMappedToStrings[getComparedDate(date)]}`
const separator = `${compareDatesMap.get(region)? " : ": " : no comparison"}`
const kpi = `<span class="kpi">${d3.format(comparison.shift == 0? format.period: format.deltas)(comparison.shift == 0?compareDatesMap.get(region): compareDatesMap.get(region)*kpiUnitDivider)}</span>`
tooltip.html(`${flag}${country}<br/>${kpiMetricDescription}<br/>${periodDescription}${separator}${compareDatesMap.get(region)? kpi : ""}<br/>`)
sparkAreaTweaked(tooltip, region, {
x: groupByRegion.get(region).map(d => parseDate(d.date) ),
y: groupByRegion.get(region).map(d => Math.max(0, d.ode)),
sparkXdomain
})
} //end if
})
.on("mousemove", function(d){
const hoveredRegion = Array.isArray(d)? d[0]: d.properties.name
const region = countrySelected != AggregateId? countrySelected: hoveredRegion
if(groupByRegion.has(/*region*/hoveredRegion)){
let el = d3.select(this).classed("marker")? d3.select(`#${toId(d[0])}`): d3.select(this)
el.attr("stroke-width", 1.5)
d3.select(this).classed("marker")?
d3.select(this)
.attr("stroke", markerType == "Bubble"? "#444": "black"):
""
} //end if
})
.on("mouseleave", function(d){
const tooltip = d3.select(".svg-tooltip")
//const hoveredRegion = Array.isArray(d)? d[0]: d.properties.name
const region = countrySelected /*AggregateId*//*countrySelected != AggregateId? countrySelected: hoveredRegion*/
tooltip.html(totalLegendPlaceholder)
sparkAreaTweaked(tooltip, region, {
x: groupByRegion.get(region).map(d => parseDate(d.date) ),
y: groupByRegion.get(region).map(d => Math.max(0, d.ode)),
sparkXdomain
})
let el = d3.select(this).classed("marker")?
d3.select(`#${toId(d[0])}`).attr("stroke-width", 0.2):
d3.select(this).attr("stroke-width", 0.2)
d3.select(this).classed("marker")?
d3.select(this)
.attr("stroke", markerType == "Bubble"? "#e1e1e1": "black"):
""
})
id = d => d.id || `${d.NAME}`
sparkXdomain = d3.extent(dates.map(d => new Date(d.slice(0,4), d.slice(5,7), d.slice(9,10))))
metricDomain = d3.extent(rawdata.filter(d => d.id != AggregateId).map(o => o.ode).map(metricDomainMapper))
metricDomainRaw = d3.extent(rawdata.filter(d => d.id != AggregateId).map(o => o.ode))
metricDomainMapper = (o,i) => i== 0? metricDomainRaw[0]*0.8: o /* may need to change for negative values*/
//excludes AggregateId as this is not represented on the map as a marker
maxPerSeriesPeriodDifference = d3.max(d3.groups(rawdata.filter(a => a.id != AggregateId), o => o.id).map(d => d[1].map(x => x.ode)).map(z => d3.extent(z)[1] - d3.extent(z)[0]))
countriesInData = new Set( rawdata.map(o => o.id) )
configs = dataMockDisplayr.configs
kpiType = configs["type"][0]
kpiUnitDivider = configs["unit.divider"][0]
kpiMetricDescription = configs["metric.description"][0]
kpiUnitDescription = ({ period: configs["unit.description"]["period"][0], deltas: configs["unit.description"]["deltas"][0] })
periodicity = configs["periodicity"][0]
periods = configs["periods"]
comparisonPeriodShift = configs["comparison.period.shift"][0]
customCountriesMap = d3.index(configs["custom.countries"], o => o.x)
customCountriesReverseMap = d3.index(configs["custom.countries"], o => o._row)
format = ({ period: `.${configs["decimal.points"]["period"][0]}${kpiType == "%"?"%":"f"}`, deltas: `+.${configs["decimal.points"]["deltas"][0]}f` })
circleRadius = ({ min: configs["circle.radius"]["min"][0], max: configs["circle.radius"]["max"][0] })
spark = ({
stroke: "black",
fill: "#e1e1e1"
})
AggregateId = customCountriesMap.get("NET")._row
graticule = d3.geoGraticule10()
topojson = require("topojson-client@3")
d3 = require("d3@5", "d3-array@2")
import { projectionInput } from "@fil/d3-projections"
import {Legend} from "@d3/color-legend"
import {ramp} from "@d3/color-schemes"
import {Scrubber} from "@mtsvelik/styled-scrubber"
import {set} from "@observablehq/synchronized-inputs"
import {clearableRadio} from "@saneef/is-observable-inputs-style-able"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
