2f:T6ec,viewof date = { let scrubber = Scrubber(joiningDates, { format: (value) => value.toLocaleDateString(), initial: joiningDates.length - ~~(365 / 7), delay: 150, autoplay: false, loop: true, loopDelay: null, alternate: false }); // let yearDataDim = facts.dimension((d) => d.yearData); // const idYearData = yearDataDim.id(); // invalidation && // invalidation.then(() => { // yearDataDim.filterAll().dispose(); // facts.dispatch.on("redraw.view" + idYearData, null); // facts.dispatch.on("reset.view" + idYearData, null); // facts.dispatch.call("redraw"); // }); let dateJoinDim = facts.dimension((d) => [d.joinDate, d.leaveDate]); const idDataJoin = dateJoinDim.id(); invalidation && invalidation.then(() => { dateJoinDim.filterAll().dispose(); facts.dispatch.on("redraw.view" + idDataJoin, null); facts.dispatch.on("reset.view" + idDataJoin, null); facts.dispatch.call("redraw"); }); let prevYear = scrubber.value.getFullYear(); const resetDataJoin = () => { if (scrubber.b.textContent == "Play") { dateJoinDim.filterAll(); facts.dispatch.call("redraw"); } }; scrubber.i.addEventListener("input", (e) => { let year = scrubber.value.getFullYear(); if (year != prevYear) { prevYear = year; facts.remove((yearData) => true); facts.add(data.filter(({ yearData }) => yearData === year)); } dateJoinDim .filterAll() .filter( ([joinDate, leaveDate]) => joinDate <= scrubber.value && leaveDate >= scrubber.value ); resetDataJoin(); facts.dispatch.call("redraw"); }); scrubber.b.addEventListener("click", resetDataJoin); facts; return scrubber; }30:T466,countOfSelected = { const id = "reset"; const counter = html`

`; d3.select(counter).on("click", (e) => { e.preventDefault(); console.warn("reset all"); facts.dispatch.call("reset"); facts.dispatch.call("redraw"); }); function redraw() { const template = { some: `%filter-count selected out of %total-count items of year %year | Reset All`, all: `All items selected (%total-count) of year %year | Reset All` }; const totalCount = facts.all().length, filterCount = facts.allFiltered().length; d3.select(counter).html( (filterCount < totalCount ? template.some : template.all) .replace("%filter-count", filterCount) .replace("%total-count", totalCount) .replace("%year", date.getFullYear()) ); } facts.dispatch.on("redraw.view" + id, redraw); redraw(); invalidation.then(() => { facts.dispatch.on("redraw.view" + id, null); }); return counter; }31:T70a,viewof monthBirth = vegaSync({ facts, dims: (d) => [ d.born ? new Date(d.born.getFullYear(), Math.floor(d.born.getMonth() / 3) * 3) : null ], interactivity: "brush", filter: (name, value) => { if (value && Object.values(value).length > 0) return RangedMultiDimensionalFilter( Object.values(value).map((a) => a.map((v) => new Date(v))) ); else return null; }, reduce: reductio() .exception((d) => d.name) .exceptionCount(true), valueGetter: (d) => d.value.exceptionCount, counts: true, spec: { // title: "Birth month of athletes : filter example", width: w, layer: [ { mark: "bar", data: { name: "counts" }, encoding: { x: { field: "key", type: "temporal", title: "Birthdate" // timeUnit: "month", title: "Month" }, y: { field: "value", type: "quantitative", title: "Number of people" }, color: { value: "#aaa" } } }, { mark: "bar", data: { name: "counts" }, selection: { brush: { name: "brush", type: "interval", encodings: ["x"] } }, encoding: { x: { field: "key", type: "temporal" // timeUnit: "month" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "brush", value: colorVega }, value: "#bbb" } } } ] }, // specifique observable invalidation, visibility })32:T57c,viewof gender = vegaSync({ facts, dims: (d) => [d.gender], interactivity: "selection", counts: true, normalized: true, reduce: reductio() .exception((d) => d.name) .exceptionCount(true), valueGetter: (d) => d.value.exceptionCount, spec: { // title: "People by gender", width: w, data: { name: "counts" }, layer: [ { mark: "bar", encoding: { x: { field: "key", type: "ordinal", title: null, // sort: "-filtered", axis: { labelAngle: 0 } }, y: { field: "value", type: "quantitative", title: "Percentage of people", scale: { domain: [0, 1] } } } }, { mark: "bar", selection: { selection: { type: "multi", toggle: "!event.shiftKey", fields: ["key"] } }, encoding: { x: { field: "key", type: "ordinal", sort: "-y" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "selection", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })33:T5a4,viewof timeContract = vegaSync({ facts, dims: (d) => [d.TX], interactivity: "brush", counts: true, normalized: true, // group: (d) => [Math.floor(d[0])], // valueGetter: (d) => d.value.exceptionCount, spec: { width: w, layer: [ { mark: "line", data: { name: "counts" }, encoding: { x: { field: "key", type: "quantitative", title: "Time contracts at ENAC in %" }, y: { field: "value", type: "quantitative", title: "Proportion of people", scale: { domain: [0, 1] } }, color: { value: "#aaa" } } }, { mark: "bar", data: { name: "counts" }, selection: { brush: { name: "brush", type: "interval", encodings: ["x"] } }, encoding: { x: { field: "key", type: "quantitative", bin: "true" }, y: { field: "filtered", type: "quantitative", scale: { domain: [0, 1] } }, color: { condition: { selection: "brush", value: colorVega }, value: "#bbb" } } } ] }, // specifique observable invalidation, visibility })34:T5a4,viewof totalJob = vegaSync({ facts, dims: (d) => [d.TXT], interactivity: "brush", counts: true, normalized: true, // group: (d) => [Math.floor(d[0])], // valueGetter: (d) => d.value.exceptionCount, spec: { width: w, layer: [ { mark: "line", data: { name: "counts" }, encoding: { x: { field: "key", type: "quantitative", title: "Total job time occupation in %" }, y: { field: "value", type: "quantitative", title: "Proportion of people", scale: { domain: [0, 1] } }, color: { value: "#aaa" } } }, { mark: "bar", data: { name: "counts" }, selection: { brush: { name: "brush", type: "interval", encodings: ["x"] } }, encoding: { x: { field: "key", type: "quantitative", bin: "true" }, y: { field: "filtered", type: "quantitative", scale: { domain: [0, 1] } }, color: { condition: { selection: "brush", value: colorVega }, value: "#bbb" } } } ] }, // specifique observable invalidation, visibility })35:T5b2,viewof job = vegaSync({ facts, dims: (d) => [d.job], interactivity: "selection", counts: true, normalized: true, reduce: reductio() .exception((d) => d.name) .exceptionCount(true), valueGetter: (d) => d.value.exceptionCount, spec: { // title: "People by job type", width: w, data: { name: "counts" }, layer: [ { mark: "bar", encoding: { x: { field: "key", type: "ordinal", title: null, // sort: "-filtered", axis: { labelAngle: 0 } }, y: { field: "value", type: "quantitative", title: "Percentage of people", scale: { domain: [0, 1] } }, color: { value: "#ddd" } } }, { mark: "bar", selection: { selection: { type: "multi", toggle: "!event.shiftKey", fields: ["key"] } }, encoding: { x: { field: "key", type: "ordinal", sort: "-y" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "selection", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })36:T17cc,viewof chartSimulation = { const context = DOM.context2d(w, height); let transformCached = d3.zoomIdentity; const dim = facts.dimension((d) => [d.gender, d.lab, d.institut]), id = dim.id(); const simulation = d3 .forceSimulation(facts.allFiltered()) .alphaTarget(0.2) // stay hot .velocityDecay(0.4) // low friction .force( "collide", d3 .forceCollide() .radius((d) => d.r + 2) .strength(0.4) .iterations(2) ) .force( "cluster-gender", forceCluster(0.6, (d) => d.gender + d.lab) ) .force( "cluster-lab", forceCluster(0.8, (d) => d.lab) ) .force( "cluster-institut", forceCluster(0.07, (d) => d.institut) ) .force("charge", d3.forceManyBody().strength(-13)) .force("x", d3.forceX().strength(0.075)) .force("y", d3.forceY().strength(0.075)) .tick(5) .on("tick", () => draw(transformCached)); d3.select(context.canvas).call( d3 .zoom() .scaleExtent([0.1, 8]) .on("zoom", ({ transform }) => draw(transform)) ); d3.select(context.canvas) .on("touchmove", (event) => event.preventDefault()) .on("pointermove", pointed); const returnValue = Object.assign(context.canvas, { value: { simulation, nodeSelected: undefined, draw } }); var instituts = [], labs = [], males = [], females = [], heads = []; function draw(transform = transformCached) { let options = viewof simulationOptions.value; let nodes = simulation.nodes(); // let hiddenNodes = simulation // .nodes() // .filter((d) => !options.filter.includes(d.job)), // visibleNodes = simulation // .nodes() // .filter((d) => options.filter.includes(d.job)); transformCached = transform; context.clearRect(0, 0, w, height); context.save(); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); context.translate(w / 2, height / 2); if (options.show.includes("Institut hull")) { instituts = instituts.map((d) => Object.assign(d, findHull(d.nodes, 30 + Math.sqrt(d.nodes.length))) ); for (const { name, hull } of instituts) { if (!hull) break; context.beginPath(); context.strokeStyle = colorScheme(name); context.lineWidth = 15; context.stroke(hull); } } if (options.show.includes("Unit hull")) { labs = labs.map((d) => Object.assign(d, findHull(d.nodes, 10 + Math.sqrt(d.nodes.length))) ); for (const { name, hull, paddedPolygon, unitHead } of labs) { // console.log(name,hull,labs.find(([n,d]) => n == name)) context.beginPath(); context.strokeStyle = unitHead && unitHead.gender === "female" ? genderColor(0.35) : genderColor(0.65); context.lineWidth = 5; if (hull) context.stroke(hull); } } context.beginPath(); for (const d of males) { context.moveTo(d.x + d.r, d.y); context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); } context.fillStyle = maleColor; context.fill(); context.beginPath(); for (const d of females) { context.moveTo(d.x + d.r, d.y); context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); } context.fillStyle = femaleColor; context.fill(); // context.beginPath(); // for (const d of hiddenNodes) { // context.moveTo(d.x + d.r, d.y); // context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); // } // context.lineWidth = 2; // context.fillStyle = "rgba(0,0,0,0.1)"; // context.fill(); context.beginPath(); for (const d of heads) { context.moveTo(d.x + d.r, d.y); context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); } context.lineWidth = 2; context.strokeStyle = "grey"; context.stroke(); if (returnValue.value.nodeSelected) { context.beginPath(); const d = returnValue.value.nodeSelected; context.moveTo(d.x + d.r, d.y); context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); context.fillStyle = "rgba(0,0,0,0.5)"; context.fill(); } context.restore(); } if (!viewof simulationOptions.value.run) simulation.stop(); function pointed(event) { if (event.buttons !== 0) return; const [x, y] = d3.pointer(event); let node = simulation.find( transformCached.invertX(x) - w / 2, transformCached.invertY(y) - height / 2, 30 ); if (node) { if ( !returnValue.value.nodeSelected || returnValue.value.nodeSelected.id !== node.id ) { returnValue.value.nodeSelected = node; returnValue.dispatchEvent(new Event("input")); draw(); } } else if (returnValue.value.nodeSelected) { returnValue.value.nodeSelected = undefined; returnValue.dispatchEvent(new Event("input")); draw(); } } const update = () => { console.log( "UPDATE", simulation.nodes().length, facts.allFiltered().length ); let nodes = updateNodes(simulation.nodes(), facts.allFiltered()); simulation.nodes(nodes); returnValue.value.nodeSelected = undefined; instituts = d3 .groups(nodes, (d) => d.institut) .map(([name, nodes]) => ({ name, nodes })); labs = d3 .groups(nodes, (d) => d.lab) .map(([name, nodes]) => ({ name, nodes, unitHead: nodes.find((n) => n.isUnitHead) })); males = nodes.filter((d) => d.gender == "male"); females = nodes.filter((d) => d.gender == "female"); heads = nodes.filter((d) => d.isUnitHead); draw(); }; facts.dispatch .on("redraw.view" + id, debounce(update, 100)) .on("reset.view" + id, update); invalidation && invalidation.then(() => { dim.filterAll().dispose(); // group.dispose(); facts.dispatch.on("redraw.view" + id, null).on("reset.view" + id, null); simulation.stop(); }); update(); returnValue.value.update = update; return returnValue; }37:Tc49,mapEurope = { // We're going to draw the map on the following SVG. let svg = d3 .create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .attr("style", "width: 100%; height: auto; h: intrinsic;"); let maxRadius = 40; const dim = facts.dimension((d) => (d.nat ? regionNames.of(d.nat) : null)), // dimCountries = facts.dimension(identifyCountries, MULTIVALUED), id = dim.id(); const group = dim.group().reduceCount(); let country_group = svg.append("g"); // Compute default domains. let domain = [0, d3.max(group.all().map((d) => d.value))]; // Construct scales. let radius = d3.scaleSqrt(domain, [0, maxRadius]); // Draw the countries country_group .selectAll("path") .data(countries.features) .join("path") .attr("d", pathEurope) .attr("fill", "#eee") .attr("stroke", "black") .attr("stroke-width", 0.2); let bubble_group = svg.append("g"), bubbles = null; let legendX = w - maxRadius - 10, legendY = h - 10; const legend = svg .append("g") .attr("fill", "#777") .attr("transform", `translate(${legendX},${legendY})`) .attr("text-anchor", "middle") .style("font", "10px sans-serif"); const legends = legend .selectAll("g") .data(radius.ticks(4).slice(1)) .join("g"); legends .append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("cy", (d) => -radius(d)) .attr("r", radius); legends .append("text") .attr("y", (d) => -2 * radius(d)) .attr("dy", "1.3em") .text(radius.tickFormat(4, "s")); svg.call( d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([1 / 4, 8]) .on("zoom", zoomed) ); function updateMap() { const mapValues = new Map( group.all().map(({ key, value }) => [key, value]) ); // Draw the bubbles. let max_pop = d3.max(group.all().map((d) => d.value)); bubbles = bubble_group .selectAll("circle") .data(correctedCountriesFeatures) .join("circle") .attr("title", (d) => d.properties.name) .attr("cx", (d) => d.properties.centroid[0]) .attr("cy", (d) => d.properties.centroid[1]) .attr("r", (d) => radius(mapValues.get(d.properties.name))) .attr("fill", colorVega) .attr("fill-opacity", 0.5) .attr("stroke-width", 0.5) .attr("stroke", "black"); bubbles.append("title").text((d) => d.properties.name); } // svg // .append("path") // .attr("d", path(d3.geoGraticule10())) // .attr("fill", "none") // .attr("stroke", "#333") // .attr("stroke-width", 0.4); function zoomed({ transform }) { bubbles.attr("transform", (d) => transform); legend.attr("transform", `translate(${legendX},${legendY})`); country_group.attr("transform", (d) => transform); } invalidation && invalidation.then(() => { group.dispose(); facts.dispatch.on("redraw.view" + id, null).on("reset.view" + id, null); }); facts.dispatch.on("redraw.view" + id, debounce(updateMap, 10)); updateMap(); return svg.node(); }38:T94d,europeanCountries = [ { name: "Andorra", code: "AD" }, { name: "Albania", code: "AL" }, { name: "Austria", code: "AT" }, { name: "Åland Islands", code: "AX" }, { name: "Bosnia and Herzegovina", code: "BA" }, { name: "Belgium", code: "BE" }, { name: "Bulgaria", code: "BG" }, { name: "Belarus", code: "BY" }, { name: "Switzerland", code: "CH" }, { name: "Cyprus", code: "CY" }, { name: "Czech Republic", code: "CZ" }, { name: "Germany", code: "DE" }, { name: "Denmark", code: "DK" }, { name: "Estonia", code: "EE" }, { name: "Spain", code: "ES" }, { name: "Finland", code: "FI" }, { name: "Faroe Islands", code: "FO" }, { name: "France", code: "FR" }, { name: "United Kingdom", code: "GB" }, { name: "Guernsey", code: "GG" }, { name: "Greece", code: "GR" }, { name: "Croatia", code: "HR" }, { name: "Hungary", code: "HU" }, { name: "Ireland", code: "IE" }, { name: "Isle of Man", code: "IM" }, { name: "Iceland", code: "IC" }, { name: "Italy", code: "IT" }, { name: "Jersey", code: "JE" }, { name: "Liechtenstein", code: "LI" }, { name: "Lithuania", code: "LT" }, { name: "Luxembourg", code: "LU" }, { name: "Latvia", code: "LV" }, { name: "Monaco", code: "MC" }, { name: "Moldova, Republic of", code: "MD" }, { name: "Macedonia, The Former Yugoslav Republic of", code: "MK" }, { name: "Malta", code: "MT" }, { name: "Netherlands", code: "NL" }, { name: "Norway", code: "NO" }, { name: "Poland", code: "PL" }, { name: "Portugal", code: "PT" }, { name: "Romania", code: "RO" }, { name: "Russian Federation", code: "RU" }, { name: "Sweden", code: "SE" }, { name: "Slovenia", code: "SI" }, { name: "Svalbard and Jan Mayen", code: "SJ" }, { name: "Slovakia", code: "SK" }, { name: "San Marino", code: "SM" }, { name: "Ukraine", code: "UA" }, { name: "Holy See (Vatican City State)", code: "VA" } ]39:T406,eventHandler = { const handleRun = (e, i) => { const options = viewof simulationOptions.value; if (options.run) { viewof chartSimulation.value.simulation.restart(); } else viewof chartSimulation.value.simulation.stop(); viewof chartSimulation.value.draw(); }; const updateOptions = (e, i) => { viewof chartSimulation.value.draw(); }; // const handleScrubber = (e) => // chartSimulation.update( // nodes // .filter((d) => d.yearData === date.getFullYear()) // .filter((d) => d.joinDate < date && d.leaveDate > date) // ); // viewof date.addEventListener("input", handleScrubber); viewof simulationOptions.addEventListener("input", updateOptions); viewof simulationOptions.addEventListener("input", handleRun); invalidation.then(() => { // viewof date.removeEventListener("input", handleScrubber); viewof simulationOptions.removeEventListener("input", handleRun); viewof simulationOptions.removeEventListener("input", updateOptions); }); }3a:T4de,findHull = (nodesToFormat, padding) => { let options = viewof simulationOptions.value; let nodes = nodesToFormat.map((d) => [d.x, d.y]); let centroid = nodes.reduce(reduceCentroid, [0, 0]); let distances = nodes.map((d) => dist(d, centroid)); let avgDist = d3.mean(distances); let maxDist = d3.max(distances); const circleHull = () => { let path = new Path2D(); path.moveTo( centroid[0] + maxDist + (0.5 * padding * options.hullPadding) / 100, centroid[1] ); path.arc( centroid[0], centroid[1], maxDist + (0.5 * padding * options.hullPadding) / 100, 0, 2 * Math.PI ); return { polygon: null, centroid, paddedPolygon: null, hull: path }; }; if (nodes.length < 5) return circleHull(); // let filteredNodes = nodes.filter( // (node) => dist(node, centroid) < avgDist * options.maxDistanceHull // ); let poly = d3.polygonHull(nodes), paddedPolygon = null, hull = null; if (poly.length < 3) return circleHull(); if (poly) { paddedPolygon = padHull(poly, (padding * options.hullPadding) / 100); hull = new Path2D(d3.line().curve(d3.curveBasisClosed)(paddedPolygon)); } return { polygon: poly, centroid, paddedPolygon, hull }; }3b:T449,function padHull(hull, padding = 30) { // from https://observablehq.com/@fil/hull-padding // <3 @Fil const h = hull; const n = h.length; // if (padding > 0) { // return h.map((p, i1) => { // const i0 = (i1 + n - 1) % n, // i2 = (i1 + 1) % n; // const [x0, y0] = h[i0], // [x1, y1] = h[i1], // [x2, y2] = h[i2]; // let dx1 = x1 - x0, // dy1 = y1 - y0, // dx2 = x2 - x1, // dy2 = y2 - y1, // r1 = 1 / Math.hypot(dx1, dy1), // r2 = 1 / Math.hypot(dx2, dy2); // (dx1 *= r1), (dy1 *= r1); // unit vectors // (dx2 *= r2), (dy2 *= r2); // const r = padding / (1 + dx1 * dx2 + dy1 * dy2); // return [x1 - (dy1 + dy2) * r, y1 + (dx1 + dx2) * r]; // }); // } // if (padding < 0) { const centroid = d3.polygonCentroid(h); return d3.polygonHull( h.map((p) => d3.interpolate( p, centroid )( Math.min( 1, -padding / Math.hypot(centroid[0] - p[0], centroid[1] - p[1]) ) ) ) ); // } // return h; }3c:T614,dict_reclassify_fonctions_interne = ({'Professeur associé':'Prof', 'Professeur assistant tenure-track':'Prof', 'Professeur ordinaire':'Prof', 'Assistant scientifique / projets':'Researcher', 'Assistant-doctorant':'Researcher', 'Collaborateur scientifique':'Researcher', 'Collaborateur scientifique-fct.dirigeant' :'Researcher', 'Collaborateur scientifique senior':'Researcher', 'Collaborateur scientifique / post-doc':'Researcher', 'Spécialiste / état-major':'Researcher', 'Scientifique/Stagiaire (salaire fixe)':'Researcher', 'Collaborateur administratif':'Researcher', 'Support informatique':"Support", 'Spécialiste système':"Support", 'Apprenti-e stagiaire':"Support", 'Chef de service' : "Support", 'Spécialiste technique':"Support", 'Apprenti-e':"Support", 'Collaborateur technique':"Support", 'Cadre supérieur (conduite et conseil)':"Support", 'Spécialiste administratif':'Admin' })3d:T17b1,async function vegaSync({ facts = null, dims = [], multivalued = false, actions = false, renderer = "canvas", valueGetter = (d) => d.value, spec = {}, sample = 1000, interactivity = false, filter = null, counts = false, debug = false, normalized = false, scrollbar = false, group = null, reduce = null, top = Infinity, invalidation, visibility }) { if (!facts) return vegalite(spec); await visibility(); const dimension = typeof dims === "function" ? dims : dims instanceof Array ? (d) => dims.map((key) => d[key]) : (d) => [dims].map((key) => d[key]); if (reduce !== null || group !== null) counts = true; // our dimension, with filter const xy = facts.dimension(dimension, multivalued); // same dimension unfiltered const xyUnfiltered = counts && facts.unfiltered.dimension(dimension, multivalued); //groups filtered/unfiltered const groupUnfiltered = counts && (group !== null ? xyUnfiltered.group(group) : xyUnfiltered.group()); const groupFiltered = counts && (group !== null ? xy.group(group) : xy.group()); //reduce options const reduceUnfiltered = counts && (reduce !== null ? reduce(groupUnfiltered) : groupUnfiltered.reduceCount()); const reduceFiltered = counts && (reduce !== null ? reduce(groupFiltered) : groupFiltered.reduceCount()); //counts function let getCounts = function () { const resultFiltered = top === Infinity ? reduceFiltered.all() : reduceFiltered.top(top), resultUnfiltered = top === Infinity ? reduceUnfiltered.all() : reduceUnfiltered.top(top); if (debug) console.log({ resultFiltered, resultUnfiltered }); const getKey = (d) => (Array.isArray(d.key) ? d.key.join(",") : d.key); const lookup = new Map( resultFiltered.map((d) => [getKey(d), valueGetter(d)]) ); if (debug) console.log(lookup); const unfilteredSize = normalized ? facts.size() : 1, filteredSize = normalized ? resultFiltered.reduce((acc, d) => acc + valueGetter(d), 0) : 1; const result = resultUnfiltered.map((d) => { let o = { key: getKey(d), value: normalized ? valueGetter(d) / unfilteredSize : valueGetter(d), filtered: normalized ? lookup.get(getKey(d)) / filteredSize : lookup.get(getKey(d)) }; return o; }); if (debug) console.log(result); return result; }; // feed the spec with initials values if (!spec.datasets) spec.datasets = {}; if (!counts && !spec.datasets.all) spec.datasets.all = sampleArray(facts.all(), sample); if (!counts && !spec.datasets.filtered) spec.datasets.filtered = sampleArray(facts.allFiltered([xy]), sample); if (counts && !spec.datasets.counts) spec.datasets.counts = getCounts(); const view = await vegalite(spec, { actions, renderer }), e = view.value, resetButton = d3 .select(view) .append("a") .attr("href", "#void") .attr("class", "reset") .style("font-size", "small") .style("font-align", "middle") .style("top", "0.3em") .style("left", `${w}px`) .style("position", "absolute") .on("click", reset); //remove scroll bars if (!scrollbar) d3.select(view).attr("style", "overflow : hidden"); const id = xy.id(); invalidation && invalidation.then(() => { xy.filterAll().dispose(); xyUnfiltered && xyUnfiltered.dispose(); reduceUnfiltered && reduceUnfiltered.dispose(); reduceFiltered && reduceFiltered.dispose(); e.finalize(); facts.dispatch.on("redraw.view" + id, null); facts.dispatch.on("reset.view" + id, null); facts.dispatch.call("redraw"); }); if (interactivity) { e.addSignalListener(interactivity, function (name, value) { let chartFilter = null; //default interactions behaviors if (debug) console.log({ name, value, interactivity }); if (filter === null) { switch (interactivity) { case "brush": if (value && Object.values(value).length > 0) chartFilter = RangedMultiDimensionalFilter(Object.values(value)); else chartFilter = null; break; case "selection": const f = "key" in value ? value.key : value[dims[0]]; if (f && f.length > 0) chartFilter = (d) => f.includes(d[0]); else chartFilter = null; break; } } else chartFilter = filter(name, value); xy.filter(chartFilter); facts.dispatch.call("redraw", undefined, { sourceId: id }); resetButton.html(chartFilter ? "Reset" : ""); }); } // redraw: add filtered data let drawn = 0; async function redraw(args = {}) { const selfCalled = args !== undefined && args.sourceId !== undefined && id === args.sourceId; if (selfCalled) return; if (drawn++) return; await (visibility ? visibility() : Promises.delay(800)); if (debug) console.log(spec.title, args, selfCalled, id); const viewData = e._runtime.data; let run = false; // if dataset has changed update "all" if (!counts && args.updateAll && viewData.hasOwnProperty("data")) { e.data("all", sampleArray(facts.all(), sample)); run = true; } if (!counts && viewData.hasOwnProperty("filtered")) { e.data("filtered", sampleArray(facts.allFiltered([xy]), sample)); run = true; } if (counts && viewData.hasOwnProperty("counts")) { e.data("counts", getCounts()); run = true; } run && (await e.runAsync()); drawn = 0; } function reset() { const { signals } = e.getState(); if (signals["brush_x"]) e.signal("brush_x", []); if (signals["brush_y"]) e.signal("brush_y", []); if (interactivity === "selection") e.signal("selection_tuple", []); e.runAsync(); } // redraw when notified facts.dispatch.on("redraw.view" + id, redraw); facts.dispatch.on("reset.view" + id, reset); redraw(); drawn = 0; return view; }3e:T134a,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/pack function Pack( data, { // data is either tabular (array of objects) or hierarchy (nested objects) path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes id = Array.isArray(data) ? (d) => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(data) ? (d) => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier children, // if hierarchical data, given a d in data, returns its children value, // given a node d, returns a quantitative value (for area encoding; null for count) sort = (a, b) => d3.descending(a.value, b.value), // how to sort nodes prior to layout label, // given a leaf node d, returns the display name title, // given a node d, returns its hover text link, // given a node d, its link (if any) linkTarget = "_blank", // the target attribute for links, if any width = 640, // outer width, in pixels height = 400, // outer height, in pixels margin = 1, // shorthand for margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels padding = 3, // separation between circles fill = "#ddd", // fill for leaf circles fillOpacity, // fill opacity for leaf circles stroke = "#bbb", // stroke for internal circles strokeWidth, // stroke width for internal circles strokeOpacity // stroke opacity for internal circles } = {} ) { // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Compute the values of internal nodes by aggregating from the leaves. value == null ? root.count() : root.sum((d) => Math.max(0, value(d))); // Compute labels and titles. const descendants = root.descendants(); const leaves = descendants.filter((d) => !d.children); leaves.forEach((d, i) => (d.index = i)); const L = label == null ? null : leaves.map((d) => label(d.data, d)); const T = title == null ? null : descendants.map((d) => title(d.data, d)); // Sort the leaves (typically by descending value for a pleasing layout). if (sort != null) root.sort(sort); // Compute the layout. d3 .pack() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .padding(padding)(root); const svg = d3 .create("svg") .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle"); const node = svg .selectAll("a") .data(descendants) .join("a") .attr("xlink:href", link == null ? null : (d, i) => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", (d) => `translate(${d.x},${d.y})`); node .append("circle") .attr("fill", (d) => d.children ? "#fff" : fill instanceof Function ? fill(d) : fill ) .attr("fill-opacity", (d) => d.children ? null : fillOpacity instanceof Function ? fillOpacity(d) : fillOpacity ) .attr("stroke", (d) => (d.children ? stroke : null)) .attr("stroke-width", (d) => (d.children ? strokeWidth : null)) .attr("stroke-opacity", (d) => (d.children ? strokeOpacity : null)) .attr("r", (d) => d.r); if (T) node.append("title").text((d, i) => T[i]); if (L) { // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const leaf = node.filter( (d) => !d.children && d.r > 10 && L[d.index] != null ); leaf .append("clipPath") .attr("id", (d) => `${uid}-clip-${d.index}`) .append("circle") .attr("r", (d) => d.r); leaf .append("text") .attr( "clip-path", (d) => `url(${new URL(`#${uid}-clip-${d.index}`, location)})` ) .selectAll("tspan") .data((d) => `${L[d.index]}`.split(/\n/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, D) => `${i - D.length / 2 + 0.85}em`) .attr("fill-opacity", (d, i, D) => (i === D.length - 1 ? 0.7 : null)) .text((d) => d); } return svg.node(); }3f:[] 2d:{"title":"ENAC - Diversity Office","cells":[{"id":0,"value":"# ENAC - Diversity Office","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"viewof dataFile = Inputs.file({ label: \"Fichier excel\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"viewof packOptions = Inputs.form({\n useFTE: Inputs.toggle({ value: true, label: \"Express ressources in FTE\" })\n // filter\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"pack = Pack(hierarchy, {\n value: (d) => (d.value ? d.value.size : d.value), // size of each node (file); null for internal nodes (folders)\n fill: ({ data }) => genderColor(data.value.parity),\n fillOpacity: 0.5,\n label: (d, n) => {\n return d.name\n ? [...d.name.split(\"-\"), `${d.value.females} / ${d.value.size}`].join(\n \"\\n\"\n )\n : \"\";\n },\n title: (d, n) =>\n `${n\n .ancestors()\n .reverse()\n .map(({ data: d }) => d.name)\n .join(\" \")}\\n${n.value.toLocaleString(\"en\")} \\n `,\n height: 800,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"Legend(\n d3.scaleSequential([0, 1], (d) => genderColor((1 - d) * 0.5 + 0.25)),\n {\n title: \"Parité (pourcentage femmes)\",\n tickFormat: (d) => `${d * 100}%`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"packData = data.filter((d) => d.yearData == date.getFullYear())","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"hierarchy = ({\n name: \"ENAC\",\n children: d3\n .rollups(\n packData,\n (v) => {\n if (packOptions.useFTE) {\n const getFTE = (prev, cur) => prev + cur.TX / 100,\n sizeFTE = v.reduce(getFTE, 0),\n femalesFTE = v\n .filter((d) => d.gender == \"female\")\n .reduce(getFTE, 0);\n return {\n size: Math.floor(sizeFTE),\n females: Math.round(femalesFTE),\n parity: 1 - femalesFTE / sizeFTE\n };\n } else {\n const females = v.filter((d) => d.gender == \"female\").length;\n\n return {\n size: v.length,\n females,\n parity: 1 - females / v.length\n };\n }\n },\n (d) => d.institut,\n (d) => d.lab\n )\n .map((d) => ({\n name: d[0],\n children: d[1].map((p) => ({ name: p[0], value: p[1] }))\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"## Dashboard ","pinned":false,"hidden":false,"mode":"md"},{"id":2662,"value":"FULLSCREEN = fullscreen({\n breakLayoutAtCell: 16,\n hideAfter: 20,\n hideBefore: 8,\n left: 51,\n right: 46,\n button: html`