31:T9fe,/** This function takes a list of intervals, an interval pattern, a feature, a search margin, and an overlap margin percentage, and returns a list of objects representing the temporal relationship between the intervals and their neighbors. @param {Array} intervals - A list of intervals. @param {String} pattern - A string representing the interval pattern. @param {String} feature - A string representing the interval feature. @param {Number} searchMargin - A number representing the search margin around each interval. @param {Number} overlapMarginPercentage - A number representing the overlap margin as a percentage of the interval length. @returns {Array} A list of objects representing the temporal relationship between each interval and its neighbors. Each object has the following properties: reference: The reference interval. neighbor: The neighbor interval. relativeCenter: The relative center of the neighbor interval with respect to the reference interval. intervalLength: The length of the neighbor interval. overlap: An object representing the overlapping time interval between the reference and neighbor intervals. overlapMargin: The overlap margin. relationship: A string representing the temporal relationship between the reference and neighbor intervals. */ function getNeighbors( intervals, pattern, feature, searchMargin, overlapMarginPercentage ) { const res = []; const references = intervals.filter( (d) => d.pattern === pattern && d.feature === feature ); const candidates = intervals.filter((d) => d.feature !== feature); for (const ref of references) { const start = ref.start - searchMargin; const end = ref.end + searchMargin; for (const neighbor of filterByWindow(candidates, [start, end])) { // Should be ref or the shorter interval, or longer? const shorter = getIntervalLength(ref) <= getIntervalLength(neighbor) ? ref : neighbor; const overlapMargin = (shorter.end - shorter.start) * overlapMarginPercentage; // const overlapMargin = (ref.end - ref.start) * overlapMarginPercentage; const relativeCenter = getRelativeCenter(neighbor, ref); const overlap = { extent: overlappingTimeInterval(ref, neighbor) }; res.push({ reference: ref, neighbor: neighbor, relativeCenter: relativeCenter, intervalLength: getIntervalLength(neighbor), overlap: overlap, overlapMargin: overlapMargin, relation: temporalRelation(neighbor, ref, overlapMargin) }); } } return res; }32:T3b89,class BinChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.referenceFeature = config["referenceFeature"]; this.referencePattern = config["referencePattern"]; this.neighborFeature = config["neighborFeature"]; this.neighborPattern = config["neighborPattern"]; this.relations = config["relations"]; this.features = config["features"]; this.nThreshold = config["nThreshold"] || 30; this.timeseries = config["timeseries"]; this.filteredData = d3.sort( data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern && d.neighbor.feature == this.neighborFeature && d.neighbor.pattern == this.neighborPattern ), (a, b) => d3.ascending(a.relativeCenter, b.relativeCenter) ); this.yMaxBin = this.getUniformMaxCountBin(); this.binList = this.getBins(this.filteredData, this.nThreshold); this.intervals = this.getIntervals(this.filteredData); this.rootSelector = this.selector.split(" ")[0]; } getIntervals(data) { const res = []; for (const relation of this.relations) { const data = this.filteredData.filter( (d) => d.relation === relation ); const sy = d3 .scaleLinear() .domain([0, data.length]) .range([this.height - this.margin.bottom, this.margin.top]); res.push({ data: data, relation: relation, scale: sy }); } return res; } getBinThreshold(data, nThreshold) { const extent = d3.extent(this.data, (d) => d.relativeCenter); const width = (extent[1] - extent[0]) / nThreshold; return d3.range(extent[0], extent[1] + width, width); } getBins(data, nThreshold) { const res = []; const binThreshold = this.getBinThreshold(data, nThreshold); for (const relation of this.relations) { res.push({ data: getBins( data.filter((d) => d.relation === relation), binThreshold ), relation: relation }); } return res; } getUniformMaxCountInterval() { const data = this.data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern ); let countMax = 0; for (const [feature, maps] of d3.group( data, (d) => d.neighbor.feature, (d) => d.neighbor.pattern )) { for (const [pattern, values] of maps) { if (countMax < values.length) countMax = values.length; } } return countMax; } getUniformMaxCountBin() { const data = this.data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern ); let countMax = 0; for (const [feature, maps] of d3.group( data, (d) => d.neighbor.feature, (d) => d.neighbor.pattern )) { for (const [pattern, values] of maps) { const count = this.getMaxCountBin( this.getBins(values, this.nThreshold) ); if (countMax < count) countMax = count; } } return countMax; } getMaxCountBin(bins) { return d3.max( bins.map((obj) => obj.data).map((bins) => bins.map((d) => d.length)), (d) => d3.max(d) ); } drawAxes() { // const maxAbsX = d3.max([ // -d3.min( // this.filteredData, // (d) => d.relativeCenter - d.intervalLength / 2 // ), // d3.max(this.filteredData, (d) => d.relativeCenter + d.intervalLength / 2) // ]); // const maxAbsX = // Math.ceil( // d3.max( // d3.extent(this.filteredData, (d) => d.relativeCenter), // (d) => Math.abs(d) // ) / 10 // ) * 10; const maxAbsX = 100; this.sx = d3 .scaleLinear() .domain([-maxAbsX, maxAbsX]) .range([this.margin.left, this.width - this.margin.right]); this.syBin = d3 .scaleLinear() .domain([0, this.yMaxBin + 10]) .range([this.height - this.margin.bottom, this.margin.top]); const xaxis = d3.axisBottom(this.sx).ticks(3); this.svg .append("g") .attr("transform", `translate(0, ${this.height - this.margin.bottom})`) .call(xaxis); const yaxis = d3.axisRight(this.syBin).ticks(2); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis); this.sc = d3 .scaleOrdinal() .domain(this.relations) .range(["blue", "grey", "red"]); } drawRelativeTime() { for (const intervals of this.intervals) { this.svg .append("g") .selectAll("line") .data(intervals["data"]) .join("line") .attr("class", intervals.relation) .attr("x1", (d) => this.sx(d.relativeCenter - d.intervalLength / 2)) .attr("x2", (d) => this.sx(d.relativeCenter + d.intervalLength / 2)) .attr("y1", (d, i) => intervals["scale"](i)) .attr("y2", (d, i) => intervals["scale"](i)) .attr("stroke", this.sc(intervals["relation"])) .attr("stroke-width", 0.5) .attr("opacity", 0.8) .on("mouseover", _.partial(this.mouseover, this)) .on("mouseleave", _.partial(this.mouseleave, this)); this.svg .append("g") .selectAll("circle") .data(intervals["data"]) .join("circle") .attr("class", intervals.relation) .attr("cx", (d) => this.sx(d.relativeCenter)) .attr("cy", (d, i) => intervals["scale"](i)) .attr("r", 1) .attr("fill", "none") .attr("stroke", this.sc(intervals["relation"])) .attr("opacity", 0.8) .on("mouseover", _.partial(this.mouseover, this)) .on("mouseleave", _.partial(this.mouseleave, this)); this.svg .append("g") .selectAll("text") .data(intervals["data"]) .join("text") .attr("class", intervals.relation) .attr("x", (d) => this.sx(d.relativeCenter)) .attr("y", (d, i) => intervals["scale"](i)) .attr("dy", 3) .attr("font-size", 6) .attr("opacity", 0.8) .attr("text-anchor", "middle") .text((d) => countryCodesToEmoji[d.neighbor.country]) .on("mouseover", _.partial(this.mouseover, this)) .on("mouseleave", _.partial(this.mouseleave, this)); } } drawBins() { for (const bins of this.binList) { this.svg .append("g") .selectAll("rect") .data(bins["data"]) .join("rect") .attr("class", bins.relation) .attr("x", (d) => this.sx(d["x0"])) .attr("width", (d) => this.sx(d["x1"]) - this.sx(d["x0"])) .attr("y", (d) => this.syBin(d.length)) .attr("height", (d) => this.syBin(0) - this.syBin(d.length)) .attr("fill", this.sc(bins.relation)) .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("opacity", 0.3); // .on("mouseover", _.partial(this.mouseoverBins, this)); } } mouseoverBins(thisClass, event, bin) { const selectedRelation = d3.select(this).attr("class"); for (const relation of thisClass.relations) { thisClass.svg.selectAll(`.${relation}`).attr("opacity", 0.1); } d3.select(this).attr("opacity", 0.8); thisClass.svg .selectAll(`.${selectedRelation}`) .filter( (d) => d.relativeCenter >= d3.extent(bin)[0] && d.relativeCenter <= d3.extent(bin)[1] ) .attr("opacity", 0.8); d3.selectAll( `${thisClass.rootSelector} .${thisClass.neighborFeature}-${thisClass.neighborPattern}` ).text( "#intervals=" + bin.length + "/" + thisClass.countRelations(thisClass.binList, "all") ); thisClass.lastlySelected = thisClass.filteredData.filter( (d) => d.relation === selectedRelation && d.relativeCenter >= d3.extent(bin)[0] && d.relativeCenter <= d3.extent(bin)[1] ); for (const feature of thisClass.features) { thisClass.drawHighlightedTimeSeriesChart( thisClass.timeseries, `${thisClass.rootSelector} .highlightedTimeSeries .${feature}`, feature, thisClass.filteredData.filter( (d) => d.relation === selectedRelation && d.relativeCenter >= d3.extent(bin)[0] && d.relativeCenter <= d3.extent(bin)[1] ), thisClass.getExtentFromNeighbors(thisClass.data) ); } } getExtentFromNeighbors(neighbors) { const referenceMin = d3.min(neighbors, (d) => d.reference.start); const neighborMin = d3.min(neighbors, (d) => d.neighbor.start); const referenceMax = d3.max(neighbors, (d) => d.reference.end); const neighborMax = d3.max(neighbors, (d) => d.neighbor.end); return [ d3.min([referenceMin, neighborMin]), d3.max([referenceMax, neighborMax]) ]; } drawBinExistence() { const sy = d3 .scaleBand() .domain(this.binList.map((d) => d.relation)) .range([3, this.margin.bottom]); for (const bins of this.binList) { this.svg .append("g") .selectAll("line") .data(bins["data"].filter((d) => d.length !== 0)) .join("line") .attr("class", bins.relation) .attr("x1", (d) => this.sx(d["x0"])) .attr("x2", (d) => this.sx(d["x1"])) .attr( "y1", (d) => this.height - this.margin.bottom + sy(bins.relation) ) .attr( "y2", (d) => this.height - this.margin.bottom + sy(bins.relation) ) .attr("stroke", this.sc(bins.relation)) .attr("stroke-width", 4) .attr("opacity", 0.4) .on("mouseover", _.partial(this.mouseoverExistence, this)) .on("mouseleave", _.partial(this.mouseleaveExistence, this)); } } mouseoverExistence(thisClass, event, d) { const selectedRelation = d3.select(this).attr("class"); for (const relation of thisClass.relations) { if (relation === selectedRelation) continue; thisClass.svg.selectAll(`.${relation}`).attr("opacity", 0.1); } thisClass.svg.selectAll(`.${selectedRelation}`).attr("opacity", 0.5); // Sampleのチャートと干渉する d3.selectAll( `#${thisClass.neighborFeature}-${thisClass.neighborPattern}` ).text( "#intervals=" + thisClass.countRelations(thisClass.binList, selectedRelation) + "/" + thisClass.countRelations(thisClass.binList, "all") ); thisClass.lastlySelected = thisClass.filteredData.filter( (d) => d.relation === selectedRelation ); for (const feature of thisClass.features) { thisClass.drawHighlightedTimeSeriesChart( thisClass.timeseries, `${thisClass.rootSelector} .highlightedTimeSeries .${feature}`, feature, thisClass.filteredData.filter( (d) => d.relation === selectedRelation ), // thisClass.getExtentFromNeighbors(thisClass.data) d3.extent(thisClass.timeseries, (d) => d.frame) ); } } mouseleaveExistence(thisClass, event, d) { const selectedRelation = d3.select(this).attr("class"); d3.selectAll( `#${thisClass.neighborFeature}-${thisClass.neighborPattern}` ).text("#intervals=" + thisClass.countRelations(thisClass.binList, "all")); } countRelations(binList, relation) { if (relation === "all") { return d3.sum( binList.map((d) => d.data.map((bins) => bins.length)), (d) => d3.sum(d) ); } return d3.sum( binList.find((d) => d.relation === relation).data.map((d) => d), (d) => d.length ); } drawSelectedRelations() { const sum = this.countRelations(this.binList, "all"); this.svg .append("g") .append("text") .attr("id", `${this.neighborFeature}-${this.neighborPattern}`) .attr("sum", sum) .attr("x", this.margin.left) .attr("y", this.margin.top + 10) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("#intervals=" + sum); } drawTitle() { if (this.neighborFeature === this.features[0]) { const nPattern = this.data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern && d.neighbor.pattern == this.neighborPattern ).length; this.svg .append("g") .append("text") .attr("x", this.margin.left) .attr("y", this.margin.top) .attr("font-family", "sans-serif") .attr("font-size", 15) .style("font-weight", "bold") .text(`${this.neighborPattern} (${nPattern})`); } } getBagkgroundColor() { if (this.referenceFeature === this.neighborFeature) return "#ccc"; return "#fff1cf"; } draw() { this.svg.style("cursor", "crosshair"); this.svg.call(this.paintBG, this.getBagkgroundColor()); this.svg.call(this.drawAxes.bind(this)); this.drawBins(); this.drawBinExistence(); this.drawRelativeTime(); this.drawTitle(); this.drawSelectedRelations(); this.svg.on("mouseleave", _.partial(this.mouseleaveWhole, this)); } drawHighlightedTimeSeriesChart( timeseries, selector, feature, neighbors, extent ) { drawHighlightedTimeSeriesChart(timeseries, selector, { height: 93, width: 450, margin: { top: 10, bottom: 20, left: 25, right: 10 }, feature: feature, neighbors: neighbors, extent: extent }); } mouseleaveWhole(thisClass, event, d) { for (const relation of thisClass.relations) { thisClass.svg.selectAll(`.${relation}`).attr("opacity", 0.5); } for (const feature of thisClass.features) { thisClass.drawHighlightedTimeSeriesChart( thisClass.timeseries, `${thisClass.rootSelector} .highlightedTimeSeries .${feature}`, feature, thisClass.lastlySelected, d3.extent(thisClass.timeseries, (d) => d.frame) ); } } mouseover(thisClass, event, d) { const selectedRelation = d3.select(this).attr("class"); d3.select(this).attr("stroke-width", 2); new IntervalCompare(d, `${thisClass.rootSelector} .intervalCompare`, { margin: { top: 20, bottom: 20, left: 20, right: 20 }, height: 100, width: 800 }).draw(); thisClass.lastlySelected = thisClass.filteredData.filter( (fd) => fd.relation === selectedRelation && fd.overlap.extent === d.overlap.extent ); for (const feature of thisClass.features) { thisClass.drawHighlightedTimeSeriesChart( thisClass.timeseries, `${thisClass.rootSelector} .highlightedTimeSeries .${feature}`, feature, thisClass.filteredData.filter( (fd) => fd.relation === selectedRelation && fd.overlap.extent === d.overlap.extent ), // thisClass.getExtentFromNeighbors(thisClass.data), d3.extent(thisClass.timeseries, (d) => d.frame) ); } } mouseleave(thisClass, event, d) { d3.select(this).attr("stroke-width", 0.5); } }33:T6af,function drawBinTable( data, referenceFeature, referencePattern, features, patterns, relations, timeseries, rootSelector ) { d3.select(`${rootSelector} .bins`).selectAll("div").remove(); const bins = document .getElementById(rootSelector.slice(1)) .getElementsByClassName("bins")[0]; for (const feature of features) { const row = document.createElement("div"); row.setAttribute("class", feature); row.style.display = "flex"; bins.appendChild(row); const label = document.createElement("div"); label.setAttribute("class", "label"); label.innerHTML = feature.replace("_and_", "&"); label.style.fontSize = "10px"; label.style.transform = "rotate(270deg) translate(-20px, 55px)"; row.appendChild(label); for (const pattern of patterns) { const patternElem = document.createElement("div"); patternElem.setAttribute("class", pattern); patternElem.style.display = "flex"; row.appendChild(patternElem); } } for (const pattern of patterns) { for (const feature of features) { { let marginTop; if (feature === features[0]) marginTop = 15; else marginTop = 5; new BinChart(data, `${rootSelector} .bins .${feature} .${pattern}`, { margin: { top: marginTop, bottom: 16, left: 5, right: 10 }, height: 100, width: 200, relations: relations, referenceFeature: referenceFeature, referencePattern: referencePattern, neighborFeature: feature, neighborPattern: pattern, nThreshold: 30, features: features, timeseries: timeseries }).draw(); } } } }34:T13a3,class IntervalCompare extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); } setAxes() { const tStart = d3.min([ this.data.reference.start, this.data.neighbor.start ]); const tEnd = d3.max([this.data.reference.end, this.data.neighbor.end]); this.sx = d3 .scaleLinear() .domain([tStart, tEnd]) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain([-1, 2]) .range([this.margin.top, this.height - this.margin.bottom]); this.scRelation = d3 .scaleOrdinal() .domain(temporalRelations) .range(["blue", "grey", "red"]); this.scPattern = d3 .scaleOrdinal() .domain(getPatterns().map((d) => d.name)) .range(getPatterns().map((d) => d.color)); } fillPattern() { this.svg .append("defs") .append("pattern") .attr("id", "hash4_4_relation") .attr("width", 8) .attr("height", 8) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(60)") .append("rect") .attr("width", 1.5) .attr("height", 8) .attr("transform", "translate(0,0)") .attr("fill", this.scRelation(this.data.relation)); this.svg .append("defs") .append("pattern") .attr("id", "hash4_4_margin") .attr("width", 8) .attr("height", 8) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(60)") .append("rect") .attr("width", 4) .attr("height", 8) .attr("opacity", 0.5) .attr("transform", "translate(0,0)") .attr("fill", this.scRelation(this.data.relation)); } drawAxes(sel) { this.setAxes(); const xaxis = d3 .axisBottom(this.sx) .tickFormat((d) => getDateFromDayCount(d, "2020-02-15")); sel .append("g") .attr("transform", `translate(0, ${this.height - this.margin.bottom})`) .call(xaxis); } drawTitle(sel) { const fontSize = 14; const relationStatement = { before: "is before", overlap: "overlaps", after: "is after" }; sel .append("g") .append("text") .attr("x", this.margin.left) .attr("y", this.margin.top + fontSize) // .attr("fill", this.scRelation(this.data.relation)) .attr("fill", "#333") .attr("opacity", 0.7) .attr("font-family", "sans-serif") .text( `[${countryCodesToEmoji[this.data.neighbor.country]}${ this.data.neighbor.feature }, ${this.data.neighbor.pattern}] ${ relationStatement[this.data.relation] } [${countryCodesToEmoji[this.data.reference.country]}${ this.data.reference.feature }, ${this.data.reference.pattern}]` ); } drawIntervals(sel) { sel .append("g") .selectAll("rect") .data([this.data.reference, this.data.neighbor]) .join("rect") .attr("x", (d) => this.sx(d.start)) .attr("width", (d) => this.sx(d.end) - this.sx(d.start)) .attr("y", (d, i) => this.sy(i)) .attr("height", 10) .attr("opacity", 0.7) .attr("fill", (d) => this.scPattern(d.pattern)); } drawLabels(sel) { sel .append("g") .selectAll("text") .data(["reference", "neighbor"]) .join("text") .attr("x", (d) => this.margin.left) .attr("y", (d, i) => this.sy(i)) .attr("dy", 12) .attr("font-family", "sans-serif") .attr("font-size", 12) .text((d) => d); } drawOverlap(sel) { this.fillPattern(); sel .append("g") .append("rect") .datum(this.data.overlap["extent"]) .style("fill", "url(#hash4_4_relation)") .attr("x", (d) => this.sx(d.start)) .attr("width", (d) => this.sx(d.end) - this.sx(d.start)) .attr("y", (d) => this.sy(0) + 10) .attr("height", this.sy(1) - this.sy(0) - 10); const marginStart = d3.max([ this.data.reference.start, this.data.neighbor.start ]); // const j = [this.data.reference.start, this.data.neighbor.start].indexOf( // marginStart // ); const j = getIntervalLength(this.data.reference) > getIntervalLength(this.data.neighbor) ? 0 : 1; sel .append("g") .append("rect") .datum(this.data) .style("fill", "url(#hash4_4_margin)") .attr("x", this.sx(marginStart)) // .attr("k", (d) => console.log(marginStart, d.overlapMargin)) .attr( "width", (d) => this.sx(marginStart + d.overlapMargin) - this.sx(marginStart) ) .attr("y", this.sy(j)) .attr("height", 10); } draw() { this.svg.style("cursor", "crosshair"); this.svg.call(this.paintBG, "#fff"); this.svg.call(this.drawAxes.bind(this)); this.svg.call(this.drawTitle.bind(this)); this.svg.call(this.drawIntervals.bind(this)); this.svg.call(this.drawOverlap.bind(this)); this.svg.call(this.drawLabels.bind(this)); } }35:Tfc5,class NeighborsComparaisonChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.feature = config["feature"]; this.neighborNames = config["neighborNames"]; this.left = this.editData(this.data[0], this.feature); this.right = this.editData(this.data[1], this.feature); this.xMax = config["xMax"] || 3000; this.setAxes(); } editData(data, feature) { data = data .filter((d) => d.reference.feature === feature) .sort((a, b) => d3.descending(a.relation, b.relation)); const rollup = this.getRollup(data); const names = rollup.map((d) => d[0]); return this.getStackData(rollup, names); } getRollup(data) { return Array.from( d3.rollup( data, (v) => v.length, (d) => d.relation ) ); } getStackData(rollup, names) { const res = []; for (let i = 0; i < names.length; ++i) { const name = names[i]; const cumsum = d3.cumsum(rollup, (d) => d[1]); const start = i !== 0 ? cumsum[i - 1] + 1 : 0; const end = cumsum[i]; res.push({ name: name, start: start, end: end }); } return res; } setAxes() { this.sc = d3 .scaleOrdinal() .domain(["after", "before", "overlap"]) .range(["red", "blue", "#888"]); this.sxRight = d3 .scaleLinear() .domain([0, this.xMax]) .range([this.width / 2, this.width - this.margin.right]); this.sxLeft = d3 .scaleLinear() .domain([0, this.xMax]) .range([this.width / 2, this.margin.left]); } drawZeroLine() { this.svg .append("g") .append("line") .attr("x1", this.width / 2) .attr("x2", this.width / 2) .attr("y1", this.margin.top) .attr("y2", this.height - this.margin.bottom) .attr("stroke", "black") .attr("stroke-dasharray", "4 4"); } drawTitle() { this.svg .append("g") .append("text") .attr("x", this.margin.left) .attr("y", this.margin.top) .attr("font-size", 15) .attr("font-family", "sans-serif") .text(this.feature); } drawStackWithZeroCenter(data, sx, nearAxis, farAxis) { this.drawZeroLine(sx); const xaxis = d3.axisBottom(sx).ticks(5); this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .call(xaxis); this.svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => sx(d[nearAxis])) .attr("y", (d) => this.margin.top) .attr("width", (d) => sx(d[farAxis]) - sx(d[nearAxis])) .attr("height", (d) => this.height - this.margin.top - this.margin.bottom) .attr("opacity", 0.5) .attr("fill", (d) => this.sc(d.name)); } drawStackWithSameDirection(data, j) { const sx = d3 .scaleLinear() .domain([0, this.xMax]) .range([this.margin.left, this.width - this.margin.right]); const sy = d3 .scaleBand() .domain([0, 1]) .range([this.margin.top, this.height - this.margin.bottom]); const xaxis = d3.axisBottom(sx).ticks(5); this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .call(xaxis); this.svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => sx(d.start)) .attr("y", sy(j) + 3) .attr("width", (d) => sx(d.end) - sx(d.start)) .attr("height", (d) => sy.bandwidth() - 3) .attr("opacity", 0.5) .attr("fill", (d) => this.sc(d.name)); this.svg .append("g") .append("text") .datum(this.neighborNames[j]) .attr("x", this.margin.left) .attr("y", sy(j) + sy.bandwidth()) .attr("dy", -3) .attr("font-size", 12) .attr("font-family", "sans-serif") .text((d) => d); } draw() { this.drawStackWithSameDirection(this.left, 0); this.drawStackWithSameDirection(this.right, 1); this.drawTitle(); } }36:T15d0,class HighlightedTimeSeriesChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.feature = config["feature"]; this.jointExtent = d3.extent(data, (d) => d.frame); this.xAxis = this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .attr("class", `${this.feature}-xaxis`); this.yAxis = this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .attr("class", `${this.feature}-yaxis`); this.neighbors = config["neighbors"]; this.extent = config["extent"]; } getExtentFromNeighbors(neighbors) { const referenceMin = d3.min(neighbors, (d) => d.reference.start); const neighborMin = d3.min(neighbors, (d) => d.neighbor.start); const referenceMax = d3.max(neighbors, (d) => d.reference.end); const neighborMax = d3.max(neighbors, (d) => d.neighbor.end); return [ d3.min([referenceMin, neighborMin]), d3.max([referenceMax, neighborMax]) ]; } setAxes(data) { this.sx = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.frame)) // .domain(d3.extent(this.data, (d) => d.frame)) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain(d3.extent(data, (d) => d[this.feature])) // .domain(d3.extent(this.data, (d) => d[this.feature])) // .domain([-200, 200]) .range([this.height - this.margin.bottom, this.margin.top]); } drawAxes(data) { this.setAxes(data); const xaxis = d3 .axisBottom(this.sx) .ticks(4) .tickFormat((d) => getDateFromDayCount(d, "2020-02-15")); this.svg.select(`.${this.feature}-xaxis`).call(xaxis); const yaxis = d3.axisLeft(this.sy).ticks(3); this.svg.select(`.${this.feature}-yaxis`).call(yaxis); } drawTimeSeries(data) { let extent; if (this.neighbors != null) { extent = this.getExtentFromNeighbors(this.neighbors); const filtered = this.data.filter( (d) => d.frame >= extent[0] && d.frame <= extent[1] ); if (filtered.length === 0) this.drawAxes(this.data); else this.drawAxes(filtered); } else { extent = d3.extent(data, (d) => d.frame); } // const extent = this.extent || d3.extent(this.data, (d) => d.frame); const countries = d3.union(this.data.map((d) => d.country)); const colors = ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0"]; for (let i = 0; i < Array.from(countries).length; ++i) { const country = Array.from(countries)[i]; const color = colors[i]; this.svg .append("g") .append("path") .datum( data.filter( (d) => d.frame >= extent[0] && d.frame <= extent[1] && d.country === country ) ) .attr( "d", d3 .line() .x((d) => this.sx(d.frame)) .y((d) => this.sy(d[this.feature])) ) .attr("stroke", color) .attr("fill", "none"); } } filterByFrame(data, start, end) { return data.filter((d) => d.frame >= start && d.frame <= end); } drawPlaceholderForReferences() { this.svg.append("g").attr("class", `${this.feature}-references`); } drawPlaceholderForNeighbors() { this.svg.append("g").attr("class", `${this.feature}-neighbors`); } highlight(neighbors, feature) { const extent = this.getExtentFromNeighbors(neighbors); // const extent = d3.extent(this.data, (d) => d.frame); const data = this.data.filter( (d) => d.frame >= extent[0] && d.frame <= extent[1] ); if (data.length === 0) this.drawAxes(this.data); else this.drawAxes(data); this.highlightReferences(neighbors, `.${feature}-references`); this.highlightNeighbors(neighbors, `.${feature}-neighbors`); } highlightReferences(neighbors, selector) { this.svg .select(selector) .selectAll("rect") .data(neighbors.filter((d) => d.reference.feature === this.feature)) .join("rect") .attr("x", (d) => this.sx(d.reference.start)) // .attr("width", 0) .attr("y", this.margin.top) .attr("height", this.height - this.margin.top - this.margin.bottom) .attr("fill", "#aaba00") .attr("opacity", 0.6) // .transition() .attr( "width", (d) => this.sx(d.reference.end) - this.sx(d.reference.start) ); } highlightNeighbors(neighbors, selector) { this.svg .select(selector) .selectAll("rect") .data(neighbors.filter((d) => d.neighbor.feature === this.feature)) .join("rect") .attr("x", (d) => this.sx(d.neighbor.start)) // .attr("width", 0) .attr("y", this.margin.top) .attr("height", this.height - this.margin.top - this.margin.bottom) .attr("fill", "#00aaba") .attr("opacity", 0.6) // .transition() .attr( "width", (d) => this.sx(d.neighbor.end) - this.sx(d.neighbor.start) ); } drawTitle() { this.svg .append("g") .append("text") .attr("x", this.margin.left) .attr("dx", 2) .attr("y", this.margin.top + 10) .attr("font-size", 10) .attr("text-anchor", "start") .text(this.feature); } draw() { this.svg.style("cursor", "crosshair"); this.drawAxes(this.data); this.drawTimeSeries(this.data); this.drawPlaceholderForReferences(); this.drawPlaceholderForNeighbors(); this.drawTitle(); } }37:T1852,class DensityChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.referenceFeature = config["referenceFeature"]; this.referencePattern = config["referencePattern"]; this.neighborFeature = config["neighborFeature"]; this.neighborPattern = config["neighborPattern"]; this.relations = config["relations"]; this.nThreshold = config["nThreshold"] || 30; this.features = config["features"]; this.patterns = config["patterns"]; this.timeseries = config["timeseries"]; this.maxAbsX = config["maxAbsX"] || 300; this.maxY = config["maxY"] || 0.02; this.strokeWidth = config["stroke-width"] || 3; this.filteredData = d3.sort( data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern && d.neighbor.feature == this.neighborFeature && d.neighbor.pattern == this.neighborPattern ), (a, b) => d3.ascending(a.relativeCenter, b.relativeCenter) ); this.binList = this.getBins(this.filteredData, this.nThreshold); this.rootSelector = this.selector.split(" ")[0]; } getBinThreshold(data, nThreshold) { const extent = d3.extent(this.data, (d) => d.relativeCenter); const width = (extent[1] - extent[0]) / nThreshold; return d3.range(extent[0], extent[1] + width, width); } getBins(data, nThreshold) { const res = []; const binThreshold = this.getBinThreshold(data, nThreshold); for (const relation of this.relations) { res.push({ data: getBins( data.filter((d) => d.relation === relation), binThreshold ), relation: relation }); } return res; } getMaxCountBin(bins) { return d3.max( bins.map((obj) => obj.data).map((bins) => bins.map((d) => d.length)), (d) => d3.max(d) ); } drawAxes() { const maxAbsX = this.maxAbsX; this.sx = d3 .scaleLinear() .domain([-maxAbsX, maxAbsX]) .range([this.margin.left, this.width - this.margin.right]); if (this.neighborFeature !== this.features.slice(-1)[0]) { } else { const xaxis = d3.axisBottom(this.sx).ticks(3); this.svg .append("g") .attr("transform", `translate(0, ${this.height - this.margin.bottom})`) .call(xaxis); } this.sy = d3 .scaleLinear() .domain([0, this.maxY]) .range([this.height - this.margin.bottom, this.margin.top]); if (this.neighborPattern !== this.patterns[0]) { } else { const yaxis = d3.axisLeft(this.sy).ticks(2); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis); } this.sc = d3 .scaleOrdinal() .domain(this.relations) .range(["blue", "grey", "red"]); } drawBinExistence() { const sy = d3 .scaleBand() .domain(this.binList.map((d) => d.relation)) .range([3, this.margin.bottom]); for (const bins of this.binList) { this.svg .append("g") .selectAll("line") .data(bins["data"].filter((d) => d.length !== 0)) .join("line") .attr("class", bins.relation) .attr("x1", (d) => this.sx(d["x0"])) .attr("x2", (d) => this.sx(d["x1"])) .attr("y1", (d) => this.height - this.margin.bottom + sy(bins.relation)) .attr("y2", (d) => this.height - this.margin.bottom + sy(bins.relation)) .attr("stroke", this.sc(bins.relation)) .attr("stroke-width", 4) .attr("opacity", 0.4) .on("mouseover", _.partial(this.mouseoverExistence, this)); } } drawTitle() { if (this.neighborFeature === this.features[0]) { const nPattern = this.data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern && d.neighbor.pattern == this.neighborPattern ).length; this.svg .append("g") .append("text") .attr("x", this.margin.left) .attr("y", this.margin.top) .attr("dy", 5) .attr("font-family", "sans-serif") .attr("font-size", 13) .style("font-weight", "bold") .text(`${this.neighborPattern} (${nPattern})`); } } getBagkgroundColor() { if (this.referenceFeature === this.neighborFeature) return "#ccc"; return "#fff1cf"; } drawDensity() { for (const relation of this.relations) { const data = this.filteredData.filter((d) => d.relation === relation); if (data.length === 0) continue; const kde = kernelDensityEstimator( kernelEpanechnikov(7), this.sx.ticks(15) ); const refLength = this.data.filter( (d) => d.reference.feature == this.referenceFeature && d.reference.pattern == this.referencePattern ).length; this.svg .append("g") .append("path") .datum(kde(data.map((d) => d.relativeCenter))) .attr("fill", "none") .attr("stroke", this.sc(relation)) .attr("stroke-width", this.strokeWidth) .attr( "d", d3 .line() .curve(d3.curveBasis) .x((d) => this.sx(d[0])) .y((d) => this.sy((d[1] * this.filteredData.length) / refLength)) ); } this.svg .append("line") .attr("x1", this.sx(0)) .attr("x2", this.sx(0)) .attr("y1", this.sy.range()[0]) .attr("y2", this.sy.range()[1]) .attr("stroke", "#888") .attr("stroke-dasharray", "4 4"); } draw() { this.svg.style("cursor", "crosshair"); this.svg.call(this.paintBG, this.getBagkgroundColor()); this.svg.call(this.drawAxes.bind(this)); this.drawBinExistence(); this.drawTitle(); this.drawDensity(); this.svg.on("mouseleave", _.partial(this.mouseleaveWhole, this)); } mouseleaveWhole(thisClass, event, d) { for (const relation of thisClass.relations) { thisClass.svg.selectAll(`.${relation}`).attr("opacity", 0.7); } } mouseoverExistence(thisClass, event, d) {} mouseleaveExistence(thisClass, event, d) {} }38:T759,function drawDensityTable( neighbors, referenceFeature, referencePattern, features, patterns, relations, timeseries, rootSelector, chartConfig, maxAbsX, maxY ) { d3.select(`${rootSelector} .plot`).selectAll("div").remove(); const density = d3.select(`${rootSelector} .plot`); for (const feature of features) { const row = density .append("div") .attr("class", feature) .style("display", "flex"); const label = row .append("div") .attr("class", "label") .style("text-align", "left") .style("font-size", "20px") .style("transform", `rotate(270deg) translate(${-30}px, 65px)`) .attr("class", "label") .html(feature.split("_")[0]); for (const pattern of patterns) { row.append("div").attr("class", pattern).style("display", "flex"); } } for (const pattern of patterns) { for (const feature of features) { { let marginTop; if (feature === features[0]) marginTop = 15; else marginTop = 5; new DensityChart( neighbors, `${rootSelector} .plot .${feature} .${pattern}`, { margin: { top: marginTop, bottom: chartConfig.margin.bottom, left: chartConfig.margin.left, right: chartConfig.margin.right }, height: chartConfig["height"], width: chartConfig["width"], relations: relations, referenceFeature: referenceFeature, referencePattern: referencePattern, neighborFeature: feature, neighborPattern: pattern, nThreshold: 50, features: features, patterns: patterns, timeseries: timeseries, maxAbsX: maxAbsX, maxY: maxY } ).draw(); } } } }39:T491,function createNormalizedMatix(neighborsDict, features, patterns, relation) { const res = []; for (const featureReference of features) { for (const featureNeighbor of features) { // if (featureReference == featureNeighbor) continue; for (const patternReference of patterns) { for (const patternNeighbor of patterns) { const data = neighborsDict.data .filter((d) => d.relation == relation) .filter((d) => HasSamePairOfReferenceAndNeighbor( d, featureReference, patternReference, featureNeighbor, patternNeighbor ) ); res.push({ value: data.length / neighborsDict.data.filter((d) => d.relation == relation).length, reference: { pattern: patternReference, feature: featureReference }, neighbor: { pattern: patternNeighbor, feature: featureNeighbor } }); } } } } return { ...neighborsDict, data: res }; }3a:T471,function calculateMean( neighbors, refPattern, refFeature, neighborPattern, neighborFeature ) { let sum = 0; let count = 0; // Iterate over categories for (const neighbor of neighbors) { // Iterate over objects in each category for (const obj of neighbor) { // Check if the object matches the filter criteria if (obj.value == 0) continue; if ( obj.reference.pattern === refPattern && obj.reference.feature === refFeature && obj.neighbor.pattern === neighborPattern && obj.neighbor.feature === neighborFeature ) { sum += obj.value; count++; } } } if (count === 0) { return { mean: 0, count: count, reference: { pattern: refPattern, feature: refFeature }, neighbor: { pattern: neighborPattern, feature: neighborFeature } }; } return { mean: sum / count, count: count, reference: { pattern: refPattern, feature: refFeature }, neighbor: { pattern: neighborPattern, feature: neighborFeature } }; }3b:T66f,function calculateDifferenceFromAverage( neighborsList, features, patterns, relation ) { const normalized = getNormalizedMatrices( neighborsList, features, patterns, relation ); const averageMatrix = getAverageForNeighborsList( normalized, features, patterns ); const res = []; for (let i = 0; i < normalized.length; ++i) { const matrix = normalized[i]; const dict = { country: matrix.country, data: [] }; for (const featureReference of features) { for (const patternReference of patterns) { for (const featureNeighbor of features) { for (const patternNeighbor of patterns) { const original = matrix.data.find((d) => HasSamePairOfReferenceAndNeighbor( d, featureReference, patternReference, featureNeighbor, patternNeighbor ) ); const average = averageMatrix.find((d) => HasSamePairOfReferenceAndNeighbor( d, featureReference, patternReference, featureNeighbor, patternNeighbor ) ); dict["data"].push({ value: original.value == 0 ? null : original.value - average.mean, reference: { feature: featureReference, pattern: patternReference }, neighbor: { feature: featureNeighbor, pattern: patternNeighbor } }); } } } } res.push(dict); } return res; }3c:T8e8,class DivergenceLegend extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.name = config["name"] || "Occurrence"; this.scRange = config["scRange"]; this.colorScale = config["colorScale"]; this.reverseColorScale = config["reverseColorScale"]; this.labelFormat = config["labelFormat"] || d3.format(""); this.setAxes(); } setAxes() { this.sx = d3 .scaleLinear() .domain(d3.extent(this.scRange)) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain([0, 1]) .range([this.margin.top, this.height - this.margin.bottom]); const range = getColorRange( this.scRange, this.colorScale, this.reverseColorScale ); this.sc = d3.scaleLinear().domain(this.scRange).range(range).clamp(true); } drawAxes() { this.svg .append("g") .selectAll("text") .data(this.scRange) .join("text") .attr("x", (d) => this.sx(d)) .attr("y", this.sy(1)) .attr("font-family", "sans-serif") .attr("text-anchor", (d, i) => { switch (this.scRange.length) { case 2: return i === 0 ? "start" : "end"; case 3: if (i === 0) { return "start"; } else if (i === 1) { return "middle"; } else if (i === 2) { return "end"; } break; default: return "start"; } }) .text((d) => this.labelFormat(d)); } drawLabel() { this.svg .append("g") .append("text") .attr("x", this.sx(d3.mean(this.scRange))) .attr("y", this.sy(0)) .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .text(this.name); } drawHeatmap() { this.svg .append("g") .selectAll("rect") .data(this.sx.ticks(50)) .join("rect") .attr("x", (d) => this.sx(d)) .attr("width", this.width / 25) .attr("y", this.sy(0)) .attr("height", this.sy(1) - this.sy(0)) .attr("fill", (d) => this.sc(d)); } draw() { this.drawHeatmap(); this.drawAxes(); this.drawLabel(); } }3d:T1c83,class OccurrenceMatrixChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.maxOccurrence = config["maxOccurrence"] || 40; this.patterns = config["patterns"]; this.features = config["features"]; this.colorScale = config["colorScale"]; this.relation = config["relation"]; this.overview = config["overview"]; this.setAxes(); } te; setAxes() { this.sx = d3 .scaleBand() .domain(this.patterns) .range([this.margin.left, this.width - this.margin.right]); this.sxFeature = d3 .scaleBand() .domain(this.features) .range([0, this.sx.bandwidth()]); this.sy = d3 .scaleBand() .domain(this.patterns) .range([this.margin.top, this.height - this.margin.bottom]); this.syFeature = d3 .scaleBand() .domain(this.features) .range([0, this.sy.bandwidth()]); this.sc = d3 .scaleLinear() // .domain([0, d3.max(this.data, (d) => d.occurrence) + 1]); .domain([0, this.maxOccurrence]) .range([this.colorScale(0), this.colorScale(0.5)]) .clamp(true); } drawAxes() { const xaxis = d3.axisTop(this.sx).tickSize(0); const x = this.svg .append("g") .attr("transform", `translate(0,${this.margin.top})`) .call(xaxis); const yaxis = d3.axisLeft(this.sy).tickSize(0); const y = this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis); if (this.overview) { x.selectAll("text").attr("font-size", 0); y.selectAll("text").attr("font-size", 0); } else { x.selectAll("text") .attr("font-size", 17) .attr("dy", this.height - this.margin.bottom - this.margin.top + 20); y.selectAll("text") .attr("transform", "rotate(-90)") .attr("font-size", 17) .attr("dy", this.width - this.margin.left - this.margin.right + 20 - 5) .attr("text-anchor", "middle"); } } drawAuxiliaryLines() { this.svg .append("g") .selectAll("line") .data(this.patterns) .join("line") .attr("x1", d3.min(this.sx.range())) .attr("x2", d3.max(this.sx.range())) .attr("y1", (d) => this.sy(d) + this.sy.bandwidth()) .attr("y2", (d) => this.sy(d) + this.sy.bandwidth()) .attr("stroke", "black") .attr("stroke-dasharray", (d) => (d == this.patterns[2] ? "" : "4 4")); this.svg .append("g") .selectAll("line") .data(this.patterns) .join("line") .attr("x1", (d) => this.sx(d) + this.sx.bandwidth()) .attr("x2", (d) => this.sx(d) + this.sx.bandwidth()) .attr("y1", d3.min(this.sy.range())) .attr("y2", d3.max(this.sy.range())) .attr("stroke", "black") .attr("stroke-dasharray", (d) => (d == this.patterns[2] ? "" : "4 4")); } drawAuxiliaryLines() { this.svg .append("g") .selectAll("line") .data(this.patterns) .join("line") .attr("x1", d3.min(this.sx.range())) .attr("x2", d3.max(this.sx.range())) .attr("y1", (d) => this.sy(d) + this.sy.bandwidth()) .attr("y2", (d) => this.sy(d) + this.sy.bandwidth()) .attr("stroke", "black") .attr("stroke-dasharray", (d) => (d == this.patterns[2] ? "" : "4 4")); this.svg .append("g") .selectAll("line") .data(this.patterns) .join("line") .attr("x1", (d) => this.sx(d) + this.sx.bandwidth()) .attr("x2", (d) => this.sx(d) + this.sx.bandwidth()) .attr("y1", d3.min(this.sy.range())) .attr("y2", d3.max(this.sy.range())) .attr("stroke", "black") .attr("stroke-dasharray", (d) => (d == this.patterns[2] ? "" : "4 4")); } drawAuxiliaryTicks() { const fontSize = 10; const halfFontSize = fontSize / 2; for (const pattern of this.patterns) { this.svg .append("g") .selectAll("text") .data(this.features) .join("text") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", fontSize) .attr("x", d3.max(this.sx.range()) + 20) .attr("dx", halfFontSize) .attr("y", (d) => this.sy(pattern) + this.syFeature(d) + fontSize) .text((d) => d); this.svg .append("g") .selectAll("text") .data(this.features) .join("text") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", fontSize) .attr("transform", "rotate(-90)") .attr("x", (d) => this.sx(pattern) + this.sxFeature(d) + fontSize) .attr("dx", -25) .attr("dy", -halfFontSize) .attr("y", d3.max(this.sy.range())) .text((d) => d) .attr("transform", (d) => { const x = this.sx(pattern) + this.sxFeature(d) + fontSize; const y = d3.max(this.sy.range()); return `rotate(-90, ${x + halfFontSize}, ${y - halfFontSize})`; }); } } drawData() { this.svg .append("g") .selectAll("rect") .data(this.data) .join("rect") .attr( "x", (d) => this.sx(d.neighbor.pattern) + this.sxFeature(d.neighbor.feature) ) .attr( "y", (d) => this.sy(d.reference.pattern) + this.syFeature(d.reference.feature) ) .attr("width", this.sxFeature.bandwidth()) .attr("height", this.syFeature.bandwidth()) .attr("fill", (d) => this.sc(d.occurrence)) .attr("opacity", 0.8) .attr("stroke-width", 2) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)); } mouseover(thisClass, event, d) { d3.select(this).attr("stroke", "black"); d3.select(".occurrence_matrix").html( `[Neighbor] (${thisClass.relation}) [Reference] # = ${d.occurrence}` ); d3.select(".om_reference").text( `reference (${d.reference.pattern}, ${d.reference.feature})` ); d3.select(".om_neighbor").html( `neighbor (${d.neighbor.pattern}, ${d.neighbor.feature})` ); } mousemove(thisClass, event, d) {} mouseleave(thisClass, event, d) { d3.select(this).attr("stroke", "none"); } drawLabels() { this.svg .append("g") .append("text") .attr("font-family", "sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .attr("x", this.margin.left) .attr("dx", 40) .attr("y", this.height / 2) .attr("dy", -30) .text("Reference") .attr("transform", (d) => { const x = this.margin.left; const y = this.height / 2; return `rotate(-90, ${x + 10}, ${y - 10})`; }); this.svg .append("g") .append("text") .attr("font-family", "sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .attr("x", (this.width + this.margin.left - this.margin.right) / 2) .attr("y", this.margin.top) .attr("dy", -10) .text("Neighbor"); } draw() { this.drawData(); this.drawAuxiliaryLines(); this.drawAxes(); if (this.overview) { } else { this.drawAuxiliaryTicks(); this.drawLabels(); } } }3e:T41c,function countOccurrences(list, relation) { const occurrencesMap = {}; list.forEach((item) => { if (item.relation != relation) return; const refKey = `${item.reference.feature}-${item.reference.pattern}`; const neighKey = `${item.neighbor.feature}-${item.neighbor.pattern}`; if (!occurrencesMap[refKey]) { occurrencesMap[refKey] = {}; } if (!occurrencesMap[refKey][neighKey]) { occurrencesMap[refKey][neighKey] = 0; } occurrencesMap[refKey][neighKey]++; }); const output = []; for (const refKey in occurrencesMap) { for (const neighKey in occurrencesMap[refKey]) { const [refFeature, refPattern] = refKey.split("-"); const [neighFeature, neighPattern] = neighKey.split("-"); output.push({ reference: { feature: refFeature, pattern: refPattern }, neighbor: { feature: neighFeature, pattern: neighPattern }, occurrence: occurrencesMap[refKey][neighKey] }); } } return output.sort((a, b) => d3.descending(a.occurrence, b.occurrence)); }3f:T1aab,class DifferenceMatrixChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.headline = config["headline"]; this.patterns = config["patterns"]; this.features = config["features"]; this.colorScale = config["colorScale"]; this.relation = config["relation"]; this.overview = config["overview"]; this.scRange = config["scRange"]; this.reverseColorScale = config["reverseColorScale"]; this.setAxes(); } setAxes() { this.sx = d3 .scaleBand() .domain(this.patterns) .range([this.margin.left, this.width - this.margin.right]); this.sxFeature = d3 .scaleBand() .domain(this.features) .range([0, this.sx.bandwidth()]); this.sy = d3 .scaleBand() .domain(this.patterns) .range([this.margin.top, this.height - this.margin.bottom]); this.syFeature = d3 .scaleBand() .domain(this.features) .range([0, this.sy.bandwidth()]); const colorRange = this.reverseColorScale ? [this.colorScale(0.8), this.colorScale(0.5), this.colorScale(0.2)] : [this.colorScale(0.2), this.colorScale(0.5), this.colorScale(0.8)]; this.sc = d3 .scaleLinear() .domain(this.scRange) .range(colorRange) .unknown("#ccc") .clamp(true); } drawAxes() { const xaxis = d3.axisTop(this.sx).tickSize(0); const x = this.svg .append("g") .attr("transform", `translate(0,${this.margin.top})`) .call(xaxis); const yaxis = d3.axisLeft(this.sy).tickSize(0); const y = this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis); if (this.overview) { x.selectAll("text").attr("font-size", 0); y.selectAll("text").attr("font-size", 0); } else { x.selectAll("text") .attr("font-size", 17) .attr("dy", this.height - this.margin.bottom - this.margin.top + 20); y.selectAll("text") .attr("transform", "rotate(-90)") .attr("font-size", 17) .attr("dy", this.width - this.margin.left - this.margin.right + 20 - 5) .attr("text-anchor", "middle"); } } drawAuxiliaryLines() { this.svg .append("g") .selectAll("line") .data(this.patterns) .join("line") .attr("x1", d3.min(this.sx.range())) .attr("x2", d3.max(this.sx.range())) .attr("y1", (d) => this.sy(d) + this.sy.bandwidth()) .attr("y2", (d) => this.sy(d) + this.sy.bandwidth()) .attr("stroke", "black") .attr("stroke-dasharray", (d) => (d == this.patterns[2] ? "" : "4 4")); this.svg .append("g") .selectAll("line") .data(this.patterns) .join("line") .attr("x1", (d) => this.sx(d) + this.sx.bandwidth()) .attr("x2", (d) => this.sx(d) + this.sx.bandwidth()) .attr("y1", d3.min(this.sy.range())) .attr("y2", d3.max(this.sy.range())) .attr("stroke", "black") .attr("stroke-dasharray", (d) => (d == this.patterns[2] ? "" : "4 4")); } drawAuxiliaryTicks() { const fontSize = 10; const halfFontSize = fontSize / 2; for (const pattern of this.patterns) { this.svg .append("g") .selectAll("text") .data(this.features) .join("text") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", fontSize) .attr("x", d3.max(this.sx.range()) + 20) .attr("dx", halfFontSize) .attr("y", (d) => this.sy(pattern) + this.syFeature(d) + fontSize) .text((d) => d); this.svg .append("g") .selectAll("text") .data(this.features) .join("text") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", fontSize) .attr("transform", "rotate(-90)") .attr("x", (d) => this.sx(pattern) + this.sxFeature(d) + fontSize) .attr("dx", -25) .attr("dy", -halfFontSize) .attr("y", d3.max(this.sy.range())) .text((d) => d) .attr("transform", (d) => { const x = this.sx(pattern) + this.sxFeature(d) + fontSize; const y = d3.max(this.sy.range()); return `rotate(-90, ${x + halfFontSize}, ${y - halfFontSize})`; }); } } drawData() { this.svg .append("g") .selectAll("rect") .data(this.data) .join("rect") .attr( "x", (d) => this.sx(d.neighbor.pattern) + this.sxFeature(d.neighbor.feature) ) .attr( "y", (d) => this.sy(d.reference.pattern) + this.syFeature(d.reference.feature) ) .attr("width", this.sxFeature.bandwidth()) .attr("height", this.syFeature.bandwidth()) .attr("fill", (d) => this.sc(d.value)) .attr("opacity", 0.8) .attr("stroke-width", 2) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)); } mouseover(thisClass, event, d) { const fp = d3.format(".3%"); d3.select(this).attr("stroke", "black"); d3.select( `${getRootSelector(thisClass.selector)} .detail .occurrence` ).html( `${thisClass.headline} [Neighbor] (${ thisClass.relation }) [Reference]: value = ${fp(d.value)}` ); d3.select(`${getRootSelector(thisClass.selector)} .detail .reference`).text( `reference (${d.reference.pattern}, ${d.reference.feature})` ); d3.select(`${getRootSelector(thisClass.selector)} .detail .neighbor`).html( `neighbor (${d.neighbor.pattern}, ${d.neighbor.feature})` ); } mousemove(thisClass, event, d) {} mouseleave(thisClass, event, d) { d3.select(this).attr("stroke", "none"); } drawLabels() { this.svg .append("g") .append("text") .attr("font-family", "sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .attr("x", this.margin.left) .attr("dx", 40) .attr("y", this.height / 2) .attr("dy", -30) .text("Reference") .attr("transform", (d) => { const x = this.margin.left; const y = this.height / 2; return `rotate(-90, ${x + 10}, ${y - 10})`; }); this.svg .append("g") .append("text") .attr("font-family", "sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .attr("x", (this.width + this.margin.left - this.margin.right) / 2) .attr("y", this.margin.top) .attr("dy", -10) .text("Neighbor"); } draw() { this.drawData(); this.drawAuxiliaryLines(); this.drawAxes(); if (this.overview) { } else { this.drawAuxiliaryTicks(); this.drawLabels(); } } }40:Ta19,class ProjectionChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.textFunc = config['textFunc'] this.title = config["title"]; this.setAxes(); } setAxes() { this.sx = d3 .scaleLinear() .domain(d3.extent(this.data, (d) => d[0])) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain(d3.extent(this.data, (d) => d[1])) .range([this.height - this.margin.bottom, this.margin.top]); } drawAxes() { const xaxis = d3.axisBottom(this.sx); this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .call(xaxis) .selectAll("text") .attr("font-size", 0); const yaxis = d3.axisLeft(this.sy); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis) .selectAll("text") .attr("font-size", 0); } drawZeroLines() { this.svg .append("g") .append("line") .attr("x1", d3.min(this.sx.range())) .attr("x2", d3.max(this.sx.range())) .attr("y1", this.sy(0)) .attr("y2", this.sy(0)) .attr("stroke-dasharray", "4 4") .attr("stroke", "#ccc"); this.svg .append("g") .append("line") .attr("x1", this.sx(0)) .attr("x2", this.sx(0)) .attr("y1", d3.min(this.sy.range())) .attr("y2", d3.max(this.sy.range())) .attr("stroke-dasharray", "4 4") .attr("stroke", "#ccc"); } drawData() { this.svg .append("g") .selectAll("circle") .data(this.data) .join("circle") .attr("cx", (d) => this.sx(d[0])) .attr("cy", (d) => this.sy(d[1])) .attr("r", 2) .attr("fill", "#888") .attr("stroke", "#000") .attr("opacity", 0.7); this.svg .append("g") .selectAll("text") .data(this.data) .join("text") .attr("x", (d) => this.sx(d[0])) .attr("y", (d) => this.sy(d[1])) .attr("dy", (d) => 10) .attr("text-anchor", "middle") .attr("font-size", 15) .text((d, i) => this.textFunc(d, i)); } drawTitle() { this.svg .append("g") .append("text") .attr("x", this.margin.left) .attr("y", this.margin.top) .attr("font-size", 20) .attr("font-weight", "bold") .text(this.title); } draw() { this.svg.call(this.paintBG.bind(this), "#fff1cf"); this.drawAxes(); this.drawZeroLines(); this.drawData(); this.drawTitle(); } }41:T6ae,function calculateMDS(distanceMatrix, dimensions=2) { // Number of points const numPoints = distanceMatrix.length; // Compute squared distances const squaredDistances = distanceMatrix.map((row) => row.map((d) => Math.pow(d, 2)) ); // Compute double centering matrix const doubleCenteringMatrix = []; for (let i = 0; i < numPoints; i++) { const row = []; for (let j = 0; j < numPoints; j++) { const sumRow = squaredDistances[i].reduce((acc, val) => acc + val, 0); const sumCol = squaredDistances .map((r) => r[j]) .reduce((acc, val) => acc + val, 0); const sumTotal = squaredDistances.reduce( (acc, row) => acc + row.reduce((a, b) => a + b, 0), 0 ); const entry = -0.5 * (squaredDistances[i][j] - sumRow / numPoints - sumCol / numPoints + sumTotal / Math.pow(numPoints, 2)); row.push(entry); } doubleCenteringMatrix.push(row); } // Perform eigendecomposition const eigenDecomposition = numeric.eig(doubleCenteringMatrix); const eigenValues = eigenDecomposition.lambda.x; const eigenVectors = eigenDecomposition.E.x; // Sort eigenvalues in descending order const sortedEigenIndices = eigenValues .map((value, index) => [value, index]) .sort((a, b) => b[0] - a[0]) .map((pair) => pair[1]); // Extract the top k eigenvectors const kEigenVectors = sortedEigenIndices .slice(0, dimensions) .map((index) => eigenVectors[index]); // Construct the MDS coordinates const mdsCoordinates = kEigenVectors[0].map((_, i) => kEigenVectors.map((row) => row[i]) ); // Return the MDS coordinates return mdsCoordinates; }42:[{"id":"422a6daf8cd2563eda8a305abf952ed81adf81637fa3e9fcfa2a6ed04c751d9c3f1228530348b68d3d98b7013934c91bc936cb48bef57842910cd0f9e7e48626","href":"https://static.observableusercontent.com/files/422a6daf8cd2563eda8a305abf952ed81adf81637fa3e9fcfa2a6ed04c751d9c3f1228530348b68d3d98b7013934c91bc936cb48bef57842910cd0f9e7e48626","name":"eu-reshaped.csv","type":"text/csv","lastModified":1693511034778.026,"size":797830},{"id":"d8092240a7814bc0503f33bff413968b036aadaf03dbc4e1296e9a0d9fb247b0e30022e6cfe2696db3e6c348b0a58bb9d1920beee861e99289ddd8f5bd66c205","href":"https://static.observableusercontent.com/files/d8092240a7814bc0503f33bff413968b036aadaf03dbc4e1296e9a0d9fb247b0e30022e6cfe2696db3e6c348b0a58bb9d1920beee861e99289ddd8f5bd66c205","name":"intervals-tolerance5@2.0-reshaped-countries-around-europe.csv","type":"text/csv","lastModified":1693511034778.026,"size":2815076},{"id":"6f08140ab95f9eb69ad9e91fa23e863fa1ed59d06092758bd326b3a925649bff5369859be0a171f1706fda3245f4caf8887080198b7ea421b81ee02485b135cf","href":"https://static.observableusercontent.com/files/6f08140ab95f9eb69ad9e91fa23e863fa1ed59d06092758bd326b3a925649bff5369859be0a171f1706fda3245f4caf8887080198b7ea421b81ee02485b135cf","name":"ne_110m_admin_0_countries.json","type":"application/json","lastModified":1693511034778.026,"size":412680},{"id":"2cbee82bf04ac00f8625c444f50ffe58dc7a23a0fa186215b569ca92ab21d833f400c8829942a0f78283f7f415931efbeabed2659f4ddc7f58f95489a0d0117b","href":"https://static.observableusercontent.com/files/2cbee82bf04ac00f8625c444f50ffe58dc7a23a0fa186215b569ca92ab21d833f400c8829942a0f78283f7f415931efbeabed2659f4ddc7f58f95489a0d0117b","name":"ne_50m_admin_0_countries.json","type":"application/json","lastModified":1693511034778.026,"size":4458004}] 2f:{"title":"🚗 Exploring and visualizing temporal relations in multivariate time series","cells":[{"id":0,"value":"# 🚗 Exploring and visualizing temporal relations in multivariate time series","pinned":false,"hidden":false,"mode":"md"},{"id":4997,"value":"## Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":4923,"value":"viewof pattern4density = Inputs.radio(patterns, {\n label: \"Pattern\",\n value: \"increasing\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4920,"value":"viewof feature4density = Inputs.radio(getMobilityFeatures(), {\n label: \"Feature\",\n value: \"residential\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4820,"value":"## Density chart","pinned":false,"hidden":false,"mode":"md"},{"id":4831,"value":"viewof country = Inputs.radio(getCountryList(intervals), {\n label: \"Select Country\",\n value: \"IT\",\n format: (d) => getFeatureWithCountryEmoji(d) + d\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5079,"value":"viewof relation = Inputs.radio(temporalRelations, {\n label: \"Relation\",\n value: \"before\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5083,"value":"viewof periodNeighbors = Inputs.radio([neighborsBefore, neighborsAfter], {\n label: \"Select period\",\n format: (d, i) => [\"before\", \"after\"][i],\n value: neighborsBefore\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5171,"value":"viewof button = Inputs.button(\"Reflect parameter changes\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4824,"value":"

${feature4density}, ${pattern4density}, ${getFeatureWithCountryEmoji(country) + country} (before ${beginning})

${feature4density}, ${pattern4density}, ${getFeatureWithCountryEmoji(country) + country} (After ${ending})

\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":5000,"value":"## Another representation of the distribution of temporal relationships","pinned":false,"hidden":false,"mode":"md"},{"id":4941,"value":"### ${getFeatureWithCountryEmoji(country) + country} [period: before 2021-06-15]","pinned":false,"hidden":false,"mode":"md"},{"id":5185,"value":"#### `(${getMobilityFeatures()[0]}, increasing) x (${getMobilityFeatures()[4]}, increasing)`","pinned":false,"hidden":false,"mode":"md"},{"id":4803,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":5003,"value":"## Occurrence matrix","pinned":false,"hidden":false,"mode":"md"},{"id":4834,"value":"### ${getFeatureWithCountryEmoji(country) + country} (relation: ${relation}) [period: ${['before', 'after'][[neighborsBefore, neighborsAfter].indexOf(periodNeighbors)]} ${[beginning, ending][[neighborsBefore, neighborsAfter].indexOf(periodNeighbors)]} ]","pinned":false,"hidden":false,"mode":"md"},{"id":5088,"value":"viewof maxOccurrence = Inputs.range([0, 60], {\n label: \"Max Occurrence\",\n step: 1,\n value: 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5148,"value":"

[Neighbor] (relation) [Reference] # =

","pinned":false,"hidden":false,"mode":"html"},{"id":4837,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":5005,"value":"## Comparison of matrices","pinned":false,"hidden":false,"mode":"md"},{"id":4843,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":5007,"value":"## Difference from average","pinned":false,"hidden":false,"mode":"md"},{"id":4854,"value":"

${countryCodesToEmoji[country] + country} (relation: ${relation}) [period: ${['before', 'after'][[neighborsBefore, neighborsAfter].indexOf(periodNeighbors)]} ${[beginning, ending][[neighborsBefore, neighborsAfter].indexOf(periodNeighbors)]} ]

${countryCodesToEmoji[country] + country}

reference

neighbor

","pinned":false,"hidden":false,"mode":"html"},{"id":5155,"value":"## Comparison of occurrence matrices","pinned":false,"hidden":false,"mode":"md"},{"id":4848,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":4818,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4993,"value":"## 2D mapping","pinned":false,"hidden":false,"mode":"md"},{"id":4856,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":4978,"value":"## Thresholds\n>> Two intervals are considered temporal neighbors if they either overlap or if the temporal distance between the end of the earlier interval and the start of the later interval does not exceed a predefined threshold, denoted as **δ**.\nIf the neighboring interval overlaps with the reference interval by more than a specified value of the threshold **ω**, the relation is labeled as _overlap_.\nOtherwise, if the neighbor starts earlier, the relation is labeled as _before_, and if the neighbor starts later, the relation is labeled as _after_.\nAnalysts have the flexibility to adjust the parameters δ and ω based on their specific requirements.","pinned":false,"hidden":false,"mode":"md"},{"id":4778,"value":"viewof overlapMarginPercentage = Inputs.range([0, 1], {\n label: \"Overlap Margin Percentage (ω)\",\n step: 0.05,\n value: 0.2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4769,"value":"viewof searchMargin = Inputs.range([1, 10], {\n label: \"search margin (δ)\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4991,"value":"## Interval data","pinned":false,"hidden":false,"mode":"md"},{"id":4280,"value":"mobility5_0 = await FileAttachment(\"intervals-tolerance5@2.0-reshaped-countries-around-europe.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":4890,"value":"function variation(interval) {\n return Math.abs(interval.vend - interval.vstart);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4888,"value":"function variationRatio(interval) {\n return variation(interval) / (interval.end - interval.start);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"function determinePattern(interval, threshold = 0.01) {\n if (variationRatio(interval) < threshold) return constancy().name;\n if (interval.vstart < interval.vend) return increasing().name;\n if (interval.vstart > interval.vend) return decreasing().name;\n return \"unknown\";\n console.warn(\n `invalid interval: extent: ${interval.extent}, values: ${interval.values}, returned \"unknown\"`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"function addKeyToIntervals(intervals, constancyThreshold) {\n const res = [];\n for (const interval of intervals) {\n const obj = { ...interval };\n obj[\"pattern\"] = determinePattern(interval, constancyThreshold);\n obj[\"country\"] = interval[\"feature\"].split(\"_\").slice(-1)[0];\n obj[\"feature\"] = interval[\"feature\"].split(\"_\").slice(0, -1).join(\"_\");\n res.push(obj);\n }\n\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function prepareLeanIntervals(intervals, constancyThreshold = 0.01) {\n intervals = addKeyToIntervals(intervals, constancyThreshold);\n return intervals.filter((d) => d.separated == false);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"intervals = prepareLeanIntervals(mobility5_0, 0.25).filter(\n (d) => d.pattern !== \"unknown\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"function filterByWindow(data, window) {\n return data.filter((d) => d.end >= window[0] && d.start <= window[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"function temporalRelation(ref, other, overlapMargin) {\n function before(ref, other) {\n return ref.end < other.start + overlapMargin;\n }\n function after(ref, other) {\n return before(other, ref);\n }\n if (before(ref, other)) return \"before\";\n if (after(ref, other)) return \"after\";\n return \"overlap\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"function getRelativeCenter(ref, other) {\n const refCenter = parseInt((ref.start + ref.end) / 2)\n const otherCenter = parseInt((other.start + other.end) / 2)\n return refCenter - otherCenter\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"function getIntervalLength(interval){\n return interval.end - interval.start\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"function overlappingTimeInterval(interval1, interval2) {\n // Ensure that interval1 starts before interval2\n if (interval1.start > interval2.start) {\n [interval1, interval2] = [interval2, interval1];\n }\n\n // Determine the start and end times of the overlap\n const overlapStart = Math.max(interval1.start, interval2.start);\n const overlapEnd = Math.min(interval1.end, interval2.end);\n\n // Check if there is actually an overlap\n if (overlapStart >= overlapEnd) {\n return [];\n }\n\n // Return the overlap interval\n return { start: overlapStart, end: overlapEnd };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2614,"value":"function createHashTable(candidateIntervals) {\n const hashTable = {};\n for (const interval of candidateIntervals) {\n for (let i = interval.start; i <= interval.end; i++) {\n if (!hashTable[i]) hashTable[i] = [];\n hashTable[i].push(interval);\n }\n }\n return hashTable;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"### Iterate for each pattern and feature","pinned":false,"hidden":false,"mode":"md"},{"id":2542,"value":"import { getMobilityFeatures } from \"ed44bdf13614ad3a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"function getWholeNeighbors(\n intervals,\n patterns,\n features,\n searchMargin,\n overlapMarginPercentage\n) {\n const neighbors = [];\n for (const value of neighborsGenerator(\n intervals,\n patterns,\n features,\n searchMargin,\n overlapMarginPercentage\n )) {\n neighbors.push(...value);\n }\n return neighbors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2607,"value":"function* neighborsGenerator(\n intervals,\n patterns,\n features,\n searchMargin,\n overlapMarginPercentage\n) {\n for (const pattern of patterns) {\n for (const feature of features) {\n yield getNeighbors(\n intervals,\n pattern,\n feature,\n searchMargin,\n overlapMarginPercentage\n );\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"function getCountryList(intervals) {\n return Array.from(d3.union(intervals.map((d) => d.country)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"### Bins","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"function getBins(neighbors, thresholds) {\n const centers = neighbors.map((d) => d.relativeCenter);\n \n return d3.bin().thresholds(thresholds).domain(d3.extent(thresholds))(centers);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2717,"value":"{\n new IntervalCompare(neighbors[20], \"#intervalCompareTest\", {\n margin: { top: 5, bottom: 20, left: 5, right: 5 },\n height: 200,\n width: 600\n }).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"{\n new BinChart(neighborsBefore, \"#test .bins\", {\n margin: { top: 20, bottom: 20, left: 40, right: 40 },\n height: 500,\n width: 900,\n relations: temporalRelations,\n referenceFeature: getMobilityFeatures()[0],\n referencePattern: \"increasing\",\n neighborFeature: getMobilityFeatures()[4],\n neighborPattern: \"increasing\",\n features: getMobilityFeatures()\n }).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":470,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"function frame2mmss(frame) {\n function frame2second(frame, fps = 25) {\n return frame / fps;\n }\n function second2mmss(second) {\n const format02 = d3.format(\"02\");\n const mm = parseInt(second / 60);\n const ss = second - parseInt(second / 60) * 60;\n return `${format02(mm)}:${format02(ss)}`;\n }\n return second2mmss(frame2second(frame));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"function getPatterns() {\n return [increasing(), constancy(), decreasing()];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4901,"value":"function increasing() {\n return { color: \"#99d594\", name: \"increasing\" };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4903,"value":"function decreasing() {\n return {color: \"#fc8d59\", name: 'decreasing'}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4905,"value":"function constancy() {\n return { color: \"#888888\", name: \"constancy\" };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1969,"value":"function getDateFromDayCount(nDay, startDate) {\n const ONE_DAY_IN_MS = 86400000; // number of milliseconds in a day\n const startTimestamp = new Date(startDate).getTime(); // convert start date to timestamp\n const targetTimestamp = startTimestamp + nDay * ONE_DAY_IN_MS; // calculate timestamp for target date\n const targetDate = new Date(targetTimestamp).toISOString().slice(0, 10); // convert timestamp to date string in YYYY-MM-DD format\n return targetDate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2806,"value":"function filterByBeforeOrAfterDate(\n d,\n date,\n beforeOrAfter,\n baseDate = \"2020-02-15\"\n) {\n if (beforeOrAfter === \"before\")\n return (\n new Date(getDateFromDayCount(d.reference.start, baseDate)) <\n new Date(date)\n );\n if (beforeOrAfter === \"after\")\n return (\n new Date(getDateFromDayCount(d.reference.start, baseDate)) >\n new Date(date)\n );\n throw Error(beforeOrAfter + \" is invalid input for beforeOrAfter\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"groups = [\n [\"FR\", \"ES\", \"IT\"],\n [\"DE\", \"AT\"],\n [\"PL\", \"RO\"],\n [\"SE\"],\n [\"DK\", \"FI\"],\n [\"MT\"],\n [\"MT\", \"SE\"],\n //\n [\"FR\"],\n [\"ES\"],\n [\"IT\"],\n [\"DE\"],\n [\"AT\"],\n [\"PL\"],\n [\"RO\"],\n [\"DK\"],\n [\"FI\"],\n [\"UK\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3062,"value":"## Compare the number of bins","pinned":false,"hidden":false,"mode":"md"},{"id":3064,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2855,"value":"## Highlight","pinned":false,"hidden":false,"mode":"md"},{"id":2857,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2859,"value":"function drawHighlightedTimeSeriesChart(data, selector, config) {\n const chart = new HighlightedTimeSeriesChart(data, selector, config);\n chart.draw();\n if (config[\"neighbors\"] != null) {\n chart.highlight(config[\"neighbors\"], config.feature);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2861,"value":"{\n for (const feature of getMobilityFeatures()) {\n const marginTop = feature === getMobilityFeatures()[0] ? 15 : 5;\n drawHighlightedTimeSeriesChart(\n timeseries.filter((d) => country == d.country),\n `#interaction .highlightedTimeSeries .${feature}`,\n {\n height: 93,\n width: 450,\n margin: { top: marginTop, bottom: 16, left: 25, right: 10 },\n feature: feature\n }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2867,"value":"euReshaped = await FileAttachment(\"eu-reshaped.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2868,"value":"function reshapeData(data) {\n const res = [];\n const dates = data.map((d) => d.date);\n const countries = d3.union(\n Object.keys(data[0])\n .slice(1)\n .map((d) => d.split(\"_\").slice(-1)[0])\n );\n let frame = 0;\n for (const date of dates) {\n for (const country of countries) {\n const dataByCountry = {};\n const entries = Object.entries(data.find((d) => d.date === date)).filter(\n (d) => d[0].split(\"_\").slice(-1)[0] === country\n );\n for (const [k, v] of entries) {\n dataByCountry[k.split(\"_\").slice(0, -1).join(\"_\")] = v;\n }\n dataByCountry[\"date\"] = date;\n dataByCountry[\"frame\"] = frame;\n dataByCountry[\"country\"] = country;\n res.push(dataByCountry);\n }\n frame++;\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2870,"value":"timeseries = reshapeData(euReshaped)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3206,"value":"## Density Plot","pinned":false,"hidden":false,"mode":"md"},{"id":4916,"value":"/**\n * Epanechnikov kernel function for use in kernel density estimation.\n * @param {number} k - The kernel's bandwidth parameter.\n * @returns {function} A function that takes a value v and returns the Epanechnikov kernel value at v.\n * @see {@link https://d3-graph-gallery.com/graph/density_basic.html}\n */\nfunction kernelEpanechnikov(k) {\n return function (v) {\n return Math.abs((v /= k)) <= 1 ? (0.75 * (1 - v * v)) / k : 0;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4914,"value":"/**\n * Create a Kernel Density Estimator using the specified kernel and data points.\n * @param {function} kernel - A kernel function, e.g., Epanechnikov kernel.\n * @param {Array} X - An array of data points for the estimation.\n * @returns {function} A function that takes an array V and returns the kernel density estimate at each point in V.\n * @see {@link https://d3-graph-gallery.com/graph/density_basic.html}\n */\nfunction kernelDensityEstimator(kernel, X) {\n return function (V) {\n return X.map(function (x) {\n return [\n x,\n d3.mean(V, function (v) {\n return kernel(x - v);\n })\n ];\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4909,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4911,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3217,"value":"function compareDensityGrids(\n data,\n height,\n width,\n margin,\n feature,\n pattern,\n selectors,\n maxAbsX,\n maxY,\n strokeWidth\n) {\n if (selectors.length != 2) throw Error(\"length of selectors should be 2\");\n\n drawDensityTable(\n data[0],\n feature,\n pattern,\n getMobilityFeatures(),\n patterns,\n temporalRelations,\n timeseries,\n selectors[0],\n {\n height: height,\n width: width,\n margin: margin\n },\n maxAbsX,\n maxY,\n strokeWidth\n );\n\n drawDensityTable(\n data[1],\n feature,\n pattern,\n getMobilityFeatures(),\n patterns,\n temporalRelations,\n timeseries,\n selectors[1],\n {\n height: height,\n width: width,\n margin: margin\n },\n maxAbsX,\n maxY,\n strokeWidth\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3242,"value":"compareDensityGrids(\n [\n neighborsBefore.filter((d) => d.relation !== \"overlap\"),\n neighborsAfter.filter((d) => d.relation !== \"overlap\")\n ],\n 150,\n 150,\n { top: 5, bottom: 16, left: 30, right: 5 },\n feature4density,\n pattern4density,\n [\"#before-density\", \"#after-density\"],\n 50,\n 0.03,\n 5\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5176,"value":"function drawCompareDensityGrids(\n feature,\n pattern,\n neighborsBefore,\n neighborsAfter\n) {\n button;\n compareDensityGrids(\n [\n neighborsBefore.filter((d) => d.relation !== \"overlap\"),\n neighborsAfter.filter((d) => d.relation !== \"overlap\")\n ],\n 150,\n 150,\n { top: 5, bottom: 16, left: 30, right: 5 },\n feature,\n pattern,\n [\"#before-density\", \"#after-density\"],\n 50,\n 0.03,\n 5\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5178,"value":"drawCompareDensityGrids(\n feature4density,\n pattern4density,\n neighborsBefore,\n neighborsAfter\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3306,"value":"## Occurrence Matrix","pinned":false,"hidden":false,"mode":"md"},{"id":3418,"value":"// beginning = \"2020-08-15\"\nbeginning = \"2021-06-15\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3420,"value":"neighborsBefore = neighbors.filter((d) =>\n filterByBeforeOrAfterDate(d, beginning, \"before\")\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3426,"value":"// ending = \"2022-04-15\"\nending = \"2021-06-15\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3422,"value":"neighborsAfter = neighbors.filter((d) =>\n filterByBeforeOrAfterDate(d, ending, \"after\")\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3318,"value":"function drawOccurrenceMatrixChart(data, selector, config) {\n new OccurrenceMatrixChart(data, selector, config).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3377,"value":"neighbors = getWholeNeighbors(\n intervals.filter((d) => country === d.country),\n [\"increasing\", \"decreasing\", \"constancy\"],\n getMobilityFeatures(),\n searchMargin,\n overlapMarginPercentage\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3316,"value":"drawOccurrenceMatrixChart(\n countOccurrences(periodNeighbors, relation),\n \"#occurrenceMatrixChart .chart\",\n {\n height: 650,\n width: 650,\n margin: { top: 30, bottom: 130, left: 30, right: 130 },\n relation: relation,\n patterns: patterns,\n features: getMobilityFeatures(),\n colorScale: d3.interpolateGreens,\n maxOccurrence: maxOccurrence\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3388,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":3340,"value":"function drawDivergenceLegend(data, selector, config) {\n new DivergenceLegend(data, selector, config).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3342,"value":"drawDivergenceLegend(\n countOccurrences(periodNeighbors, relation),\n \"#occurrenceMatrixChart .legend\",\n {\n height: 50,\n width: 600,\n margin: { top: 10, bottom: 20, left: 20, right: 10 },\n colorScale: d3.interpolateGreens,\n scRange: [0, maxOccurrence]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3471,"value":"## Compare matrices","pinned":false,"hidden":false,"mode":"md"},{"id":3490,"value":"function getNeighborsList(\n intervals,\n countries,\n features,\n patterns,\n filterConfig,\n searchConfig\n) {\n const res = [];\n for (const country of countries) {\n res.push({\n data: getWholeNeighbors(\n intervals.filter((d) => country === d.country),\n patterns,\n features,\n searchConfig[\"searchMargin\"],\n searchConfig[\"overlapMarginPercentage\"]\n ).filter(\n (d) =>\n filterByBeforeOrAfterDate(\n d,\n filterConfig[\"date\"],\n filterConfig[\"beforeOrAfter\"]\n ) && d.relation !== \"overlap\"\n ),\n country: country,\n filterConfig: filterConfig,\n searchConfig: searchConfig\n });\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3487,"value":"neighborsList = getNeighborsList(\n intervals,\n getCountryList(intervals),\n getMobilityFeatures(),\n patterns,\n {\n date: beginning,\n beforeOrAfter: \"before\"\n },\n {\n searchMargin: searchMargin,\n overlapMarginPercentage: overlapMarginPercentage\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3506,"value":"class Grid {\n constructor(selector, config) {\n d3.select(selector).selectAll(\"div\").remove();\n this.root = d3.select(selector);\n this.dimension = config[\"dimension\"];\n this.margin = config[\"margin\"];\n this.countries = config[\"countries\"];\n }\n\n draw() {\n let count = 0;\n for (let i = 0; i < this.dimension.nRows; ++i) {\n const row = this.root\n .append(\"div\")\n .attr(\"class\", \"row\")\n .style(\"display\", \"flex\");\n for (let j = 0; j < this.dimension.nColumns; ++j) {\n const country = this.countries[count];\n const column = row\n .append(\"div\")\n .attr(\"class\", country)\n .style(\"height\", this.dimension.height)\n .style(\"width\", this.dimension.width);\n\n const title = column.append(\"h3\").attr(\"class\", country);\n\n const titleText =\n country == null ? \"\" : countryCodesToEmoji[country] + country;\n title.text(titleText);\n count++;\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3508,"value":"function setDivGrid(selector, config) {\n new Grid(selector, config).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3510,"value":"setDivGrid(\"#matricesComparison .charts\", {\n dimension: {\n height: 200,\n width: 200,\n nRows: 4,\n nColumns: 8\n },\n margin: { top: 10, bottom: 10, left: 10, right: 10 },\n countries: getCountryList(intervals)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4012,"value":"drawDivergenceLegend(\n countOccurrences(periodNeighbors, relation),\n \"#matricesComparison .legend\",\n {\n height: 50,\n width: 950,\n margin: { top: 10, bottom: 20, left: 20, right: 10 },\n colorScale: d3.interpolateGreens,\n name: \"Occurrence\",\n scRange: [0, maxOccurrence]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3546,"value":"function drawMatricesForCountries(neighborsList) {\n for (const country of neighborsList.map((d) => d.country)) {\n drawOccurrenceMatrixChart(\n countOccurrences(\n neighborsList.find((d) => d.country === country).data,\n relation\n ),\n `#matricesComparison .charts .${country}`,\n {\n height: 120,\n width: 120,\n margin: { top: 0, bottom: 10, left: 10, right: 10 },\n relation: relation,\n patterns: patterns,\n features: getMobilityFeatures(),\n colorScale: d3.interpolateGreens,\n maxOccurrence: maxOccurrence,\n overview: true\n }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3552,"value":"drawMatricesForCountries(neighborsList)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3628,"value":"## Normalize Matrices","pinned":false,"hidden":false,"mode":"md"},{"id":3644,"value":"function HasSamePairOfReferenceAndNeighbor(\n data,\n featureRef,\n patternRef,\n featureNei,\n patternNei\n) {\n\n return (\n data.reference.feature === featureRef &&\n data.reference.pattern === patternRef &&\n data.neighbor.feature === featureNei &&\n data.neighbor.pattern === patternNei\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3633,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3826,"value":"{\n const originalObj = {\n data: \"originalData\",\n key1: \"value1\",\n key2: \"value2\",\n key3: \"value3\"\n };\n const newObj = { ...originalObj, data: \"res\" };\n return newObj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3673,"value":"## Get average of matrices","pinned":false,"hidden":false,"mode":"md"},{"id":3849,"value":"function getNormalizedMatrices(neighborsList, features, patterns, relation) {\n const res = [];\n for (const neighborsDict of neighborsList) {\n res.push({\n ...createNormalizedMatix(neighborsDict, features, patterns, relation)\n });\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4632,"value":"function calculateSum(\n neighbors,\n refPattern,\n refFeature,\n neighborPattern,\n neighborFeature\n) {\n let sum = 0;\n let count = 0;\n\n // Iterate over categories\n for (const neighbor of neighbors) {\n // Iterate over objects in each category\n for (const obj of neighbor) {\n // Check if the object matches the filter criteria\n if (\n obj.reference.pattern === refPattern &&\n obj.reference.feature === refFeature &&\n obj.neighbor.pattern === neighborPattern &&\n obj.neighbor.feature === neighborFeature\n ) {\n count++;\n if (obj.value == 0) continue;\n sum += obj.value;\n }\n }\n }\n return {\n sum: sum,\n count: count,\n reference: {\n pattern: refPattern,\n feature: refFeature\n },\n neighbor: {\n pattern: neighborPattern,\n feature: neighborFeature\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3739,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3741,"value":"function getAverageForNeighborsList(neighborsList, features, patterns) {\n const res = [];\n for (const featureReference of features) {\n for (const patternReference of patterns) {\n for (const featureNeighbor of features) {\n for (const patternNeighbor of patterns) {\n // Calculate the mean value\n const dict = calculateSum(\n neighborsList.map((d) => d.data),\n patternReference,\n featureReference,\n patternNeighbor,\n featureNeighbor\n );\n dict[\"mean\"] = dict[\"sum\"] / dict[\"count\"];\n res.push(dict);\n }\n }\n }\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3844,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3853,"value":"differenceFromAvgMatrices = calculateDifferenceFromAverage(\n neighborsList,\n getMobilityFeatures(),\n patterns,\n relation\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3874,"value":"### Visualize","pinned":false,"hidden":false,"mode":"md"},{"id":4952,"value":"function getColorRange(scRange, colorScale, reverse = false) {\n const _range =\n scRange.length === 2\n ? [colorScale(0), colorScale(0.5)]\n : [colorScale(0.2), colorScale(0.5), colorScale(0.8)];\n if (reverse) return _range.reverse();\n return _range;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4031,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":4949,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":4946,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3882,"value":"setDivGrid(\"#differenceMatricesComparison .charts\", {\n dimension: {\n height: 200,\n width: 200,\n nRows: 4,\n nColumns: 8\n },\n margin: { top: 10, bottom: 10, left: 10, right: 10 },\n countries: getCountryList(intervals)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4024,"value":"drawDivergenceLegend(null, \"#differenceMatricesComparison .legend\", {\n height: 50,\n width: 950,\n margin: { top: 10, bottom: 20, left: 20, right: 10 },\n name: \"Difference in Occurrence Ratio\",\n colorScale: d3.interpolateRdYlBu,\n reverseColorScale: true,\n scRange: [-0.005, 0, 0.005],\n labelFormat: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3903,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4046,"value":"function getRootSelector(selector) {\n return selector.split(\" \")[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3951,"value":"function drawDifferenceFromAvgMatrixChart(data, selector, config) {\n new DifferenceMatrixChart(data, selector, config).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3930,"value":"function drawDifferenceFromAvgMatricesForCountries(diffMatrices, relation) {\n for (const country of diffMatrices.map((d) => d.country)) {\n drawDifferenceFromAvgMatrixChart(\n diffMatrices.find((d) => d.country === country).data,\n `#differenceMatricesComparison .charts .${country}`,\n {\n height: 120,\n width: 120,\n margin: { top: 0, bottom: 10, left: 10, right: 10 },\n relation: relation,\n patterns: patterns,\n features: getMobilityFeatures(),\n colorScale: d3.interpolateRdYlBu,\n reverseColorScale: true,\n scRange: [-0.005, 0, 0.005],\n overview: true,\n headline: countryCodesToEmoji[country] + country\n }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3892,"value":"drawDifferenceFromAvgMatricesForCountries(differenceFromAvgMatrices, relation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4970,"value":"differenceFromAvgMatrices.find((d) => d.country === country).data","pinned":false,"hidden":false,"mode":"ojs"},{"id":4572,"value":"{\n button;\n drawDifferenceFromAvgMatrixChart(\n differenceFromAvgMatrices.find((d) => d.country === country).data,\n `#differenceSelected .chart`,\n {\n height: 650,\n width: 650,\n margin: { top: 30, bottom: 130, left: 30, right: 130 },\n relation: relation,\n patterns: patterns,\n features: getMobilityFeatures(),\n colorScale: d3.interpolateRdYlBu,\n reverseColorScale: true,\n scRange: [-0.005, 0, 0.005],\n overview: false,\n headline: countryCodesToEmoji[country] + country\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4570,"value":"drawDivergenceLegend(null, \"#differenceSelected .legend\", {\n height: 50,\n width: 600,\n margin: { top: 10, bottom: 20, left: 20, right: 10 },\n name: \"Difference in Occurrence Ratio\",\n colorScale: d3.interpolateRdYlBu,\n reverseColorScale: true,\n scRange: [-0.001, 0, 0.001],\n labelFormat: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4086,"value":"## Difference between matrices","pinned":false,"hidden":false,"mode":"md"},{"id":4088,"value":"function similarityBetweenMatrices(\n neighborsList,\n features,\n patterns,\n relation,\n type = \"similarity\"\n) {\n const normalized = getNormalizedMatrices(\n neighborsList,\n features,\n patterns,\n relation\n );\n\n const res = [];\n\n for (const c1 of normalized.map((d) => d.country)) {\n const data = [];\n for (const c2 of normalized.map((d) => d.country)) {\n if (c1 === c2) {\n if (type === \"similarity\") {\n data.push(1);\n } else {\n data.push(0);\n }\n continue;\n }\n const d1 = normalized.find((d) => d.country === c1);\n const d2 = normalized.find((d) => d.country === c2);\n\n let dist = 0;\n for (const elem of d1.data) {\n dist += getDistanceBetweenTwoData(elem, d1, d2);\n }\n // data.push({ country1: c1, country2: c2, similarity: 1 - dist });\n if (type === \"similarity\") {\n data.push(1 - dist);\n } else {\n data.push(dist);\n }\n }\n\n res.push(data);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4122,"value":"function getDistanceBetweenTwoData(elem, d1, d2) {\n const v1 = d1.data.find(\n (d) =>\n d.neighbor.feature == elem.neighbor.feature &&\n d.neighbor.pattern == elem.neighbor.pattern &&\n d.reference.feature == elem.reference.feature &&\n d.reference.pattern == elem.reference.pattern\n );\n const v2 = d2.data.find(\n (d) =>\n d.neighbor.feature == elem.neighbor.feature &&\n d.neighbor.pattern == elem.neighbor.pattern &&\n d.reference.feature == elem.reference.feature &&\n d.reference.pattern == elem.reference.pattern\n );\n return Math.abs(v1.value - v2.value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4094,"value":"similarities = similarityBetweenMatrices(\n neighborsList,\n getMobilityFeatures(),\n patterns,\n relation\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4142,"value":"## 2D projection","pinned":false,"hidden":false,"mode":"md"},{"id":4188,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":4190,"value":"function drawProjectionChart(data, selector, config) {\n new ProjectionChart(data, selector, config).draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4361,"value":"distances = similarityBetweenMatrices(\n neighborsList,\n getMobilityFeatures(),\n patterns,\n relation,\n \"distance\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4403,"value":"numeric = require(\"https://unpkg.com/numeric@1.2.6/numeric-1.2.6.js\").catch(\n () => window.numeric\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4446,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":4465,"value":"{\n drawProjectionChart(calculateMDS(distances, 2), `#MDSChart .chart`, {\n height: 650,\n width: 650,\n margin: { top: 20, bottom: 20, left: 20, right: 20 },\n countries: neighborsList.map((d) => d.country),\n title: `MDS (Multidimensional Scaling)`,\n textFunc: (_, i) =>\n countryCodesToEmoji[neighborsList.map((d) => d.country)[i]]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"## Others","pinned":false,"hidden":false,"mode":"md"},{"id":2246,"value":"function getFeatureWithCountryEmoji(feature) {\n const split = feature.split(\"_\");\n const emoji = countryCodesToEmoji[split.slice(-1)[0]];\n const name = split.slice(0, -1).join(\"_\");\n return name + emoji;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"f1 = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2238,"value":"countryCodesToEmoji = {\n return {\n AT: \"🇦🇹\",\n BE: \"🇧🇪\",\n BG: \"🇧🇬\",\n CZ: \"🇨🇿\",\n DE: \"🇩🇪\",\n DK: \"🇩🇰\",\n EE: \"🇪🇪\",\n ES: \"🇪🇸\",\n FI: \"🇫🇮\",\n FR: \"🇫🇷\",\n GR: \"🇬🇷\",\n HR: \"🇭🇷\",\n HU: \"🇭🇺\",\n IE: \"🇮🇪\",\n IT: \"🇮🇹\",\n LT: \"🇱🇹\",\n LU: \"🇱🇺\",\n LV: \"🇱🇻\",\n MT: \"🇲🇹\",\n NL: \"🇳🇱\",\n PL: \"🇵🇱\",\n PT: \"🇵🇹\",\n RO: \"🇷🇴\",\n SE: \"🇸🇪\",\n SI: \"🇸🇮\",\n SK: \"🇸🇰\",\n\n GB: \"🇬🇧\",\n CH: \"🇨🇭\",\n NO: \"🇳🇴\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { Tooltip, GeneralChart } from \"@gshirato/chart-class\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"patterns = ['increasing', 'constancy', 'decreasing']","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"temporalRelations = [\"before\", \"overlap\", \"after\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"import {Pack} from \"@d3/pack\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W42","stdlib":"1","titling":"auto"}