25:["$","title",null,{"children":"World University Rankings | Haowei | Observable"}] 49:T4fa,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }4a:Tad8,zoomChart = (allData, yy) => { const dataOfYear = allData.get(yy).sort((a, b) => b.value - a.value); const data = dataOfYear.filter((d) => d.value > 0); const margin = { top: 10, right: 10, bottom: 80, left: 70 }; function zoom(svg) { const extent = [ [margin.left, margin.top], [width - margin.right, height - margin.top] ]; svg.call( d3 .zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed) ); function zoomed(event) { x.range( [margin.left, width - margin.right].map((d) => event.transform.applyX(d) ) ); svg .selectAll(".bars rect") .attr("x", (d) => x(d.country)) .attr("width", x.bandwidth()); svg.selectAll(".x-axis").call(xAxis); svg.selectAll(".labeltext").attr("x", (d) => x(d.country)); } } const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .call(zoom); const g = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const x = d3 .scaleBand() .domain(data.map((d) => d.country)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll("text") .attr("transform", "translate(10,10)rotate(60)") .style("text-anchor", "start") .style("fill", (d) => countryColor(d)) .style("font-size", 15); svg.append("g").attr("class", "x-axis").call(xAxis); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .selectAll("text") .attr("class", "xclass") .style("text-anchor", "end") .text((d) => d3.format(".0%")(d)); svg.append("g").attr("class", "y-axis").call(yAxis); svg .append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => x(d.country)) .attr("y", (d) => y(d.value)) .attr("height", (d) => y(0) - y(d.value)) .attr("width", x.bandwidth()) .attr("fill", (d) => countryColor(d.country)); svg .selectAll("myLabel") .data(data) .enter() .append("g") .append("text") .attr("class", "labeltext") .attr("x", (d) => x(d.country)) .attr("y", (d) => y(d.value) - 5) .text((d) => d3.format(".1%")(d.value)) .style("font-size", 14); return svg.node(); }4b:T1c01,geo_map = (w = 1000, h = 1000, column = "count", g) => { replayMap; const svg = g || d3 .create("svg") .attr("class", "svg-map") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h); // Filter data by year const filtered_data_by_year = dataset.filter(function (d) { return d["year"] == selectedYear; }); // Retrieve available countries in the dataset const available_countries = Object.keys( Object.fromEntries(d3.group(filtered_data_by_year, (d) => d.country)) ); // Function to retrieve country value for the given year : function get_country_value(c) { let result; if (available_countries.indexOf(c) >= 0) { result = filtered_data_by_year.filter(function (e) { return e["country"] == c; })[0][column]; } else { result = -1; } return result; } // Define margin : let margin = { top: 10, right: 10, bottom: 10, left: 10 }; //Define colors for the legend let colors = ["grey", "#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"]; //Convert value to color let color_convertor = d3 .scaleThreshold() .domain([0,3,6,9,12,15,18]) .range(colors); //Define width and height let width = w - margin.left - margin.right, height = h - margin.top - margin.bottom; let projection = d3geo .geoKavrayskiy7() .fitSize([width * 1.2, ((width * 2) / 3) * 1.2], countriesjson) .translate([width * 0.46, ((width * 2) / 3) * 0.6]); let path = d3.geoPath(projection); // Function to create tooltip const tip = d3tip() .attr("class", "d3-tip") .style("border", "solid 3px black") .style("background-color", "white") .style("border-radius", "10px") .style("float", "left") .style("font-family", "Tahoma") .html(function (event, d) { let base_str = `

${countries_hash.get(d.id)}
`; let add_str; let val = get_country_value(countries_hash.get(d.id)); if (val != -1) { add_str = ` ${get_country_value(countries_hash.get(d.id))}%

`; } else { add_str = ""; } //Reduce the opacity of all countries ... d3.selectAll(".country-scored").style("opacity", 0.15); // ... except for the hovered country d3.select(this) .style("opacity", 1) .attr("fill", function (d) { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke-width", "1"); //We also add a stroke return base_str + add_str; }); // Define tooltip position (with special rules for some countries) tip.offset(function (event, d) { let result; // Tooltip for US : if (d.id == "840") { result = [height / 10, -width / 3]; } // Tooltip for Russia : else if (d.id == "643") { result = [height / 12, width / 4]; } // Tooltip for Canada : else if (d.id == "124") { result = [height / 15, 0]; } // Tooltip for the rest : else { result = [0, 0]; } return result; }); // world map let gx = svg.append("g"); // Add country shapes + fill + behaviors on events gx.selectAll("path") .data(countriesjson.features) .enter() .append("path") .attr("d", path) .attr("class", "country-scored") .attr("fill", (d) => { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke", "black") .attr("stroke-width", "0.2") .on("click", function (d) { //This part is to make the connection with the scatterplot //from https://observablehq.com/@onaly/goals-scatterplot var id = d.srcElement.__data__.id; var team = countries_hash.get(id); d3.selectAll(".scatter-label-text") .attr("opacity", 0) .style("display", "none"); d3.selectAll(".scatter-flag") .attr("opacity", 0.1) .style("outline", "None"); d3.select(`#scatter-flag-${flag_data[team]}`) .attr("opacity", 1) .style("outline", "1px solid black"); d3.select(`#scatter-label-${flag_data[team]}`) .transition(1000) .attr("opacity", 1) .style("display", "unset"); }) .on("mouseover", tip.show) .on("mouseout", function (d) { tip.hide(d); //Hide the tooltip //Restore the opacity of all countries : d3.selectAll(".country-scored") .style("opacity", 1) .attr("fill", function (d) { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke-width", "0.2"); }); // Labels for legend : let labels = color_convertor.domain().reverse(); let arrLength = labels.push(-1); // Add legend shapes : gx.selectAll("rect") .data(labels) .enter() .append("rect") .attr("x", width - 0.99 * width) .attr("y", function (d, i) { let result; if (d != -1) { result = 0.6 * height + i * (0.045 * height); } else { result = 0.62 * height + i * (0.045 * height); } return result; }) .attr("width", 0.045 * height) .attr("height", 0.045 * height) .attr("stroke", "black") .attr("stroke-width", "0.5") .style("fill", color_convertor); // Add legend text : gx.selectAll("text") .data(labels) .enter() .append("text") .attr("x", 0.037 * width + width - 0.99 * width) .attr("y", function (d, i) { let result; if (d != -1) { result = 0.649 * height + i * (0.045 * height); } else { result = 0.648 * height + i * (0.045 * height); } return result; }) .attr("font-size", 0.02 * height) .text((d) => { let result; if (d != -1) { result = Math.round(d); } else { result = "No data"; } return result; }); //----------------------------------------------------------------------------------- //Chart title in the upper corner svg .append("text") .attr("text-anchor", "end") .attr("x", 0.995 * w) .attr("y", 0.135 * h) .attr("fill", "#0a4a90") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .attr("font-size", 0.057 * h); svg .append("text") .attr("text-anchor", "end") .text(selectedYear) .attr("x", w) .attr("y", 0.077 * h) .attr("fill", "#0a4a90") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .attr("font-size", 0.077 * h); //------------------------------------------------------------------------------------------------ // Function for zoom : function zoomed({ transform }) { gx.attr("transform", transform); } //To activate the tooltips: svg.call(tip); //To activate the zoom : svg.call( d3 .zoom() .extent([ [0, 0], [width, 100] ]) .scaleExtent([1, 8]) .on("zoom", zoomed) ); return svg.node(); }4c:T149c,function GroupedBarChart( data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = (d) => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 200, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10 // array of colors } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3 .range(X.length) .filter((i) => xDomain.has(X[i]) && zDomain.has(Z[i])); const dataReady = data.filter(function (d) { return d.allData.world_rank >= startNumber && d.allData.world_rank < startNumber + nomUniv; }); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).domain(d3.map(dataReady,d=>d.univname)).paddingInner(xPadding); const xzScale = d3 .scaleBand(zDomain, [0, xScale.bandwidth()]) .padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = (i) => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); const bar = svg .append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", (i) => xScale(X[i]) + xzScale(Z[i])) .attr("y", (i) => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", (i) => yScale(0) - yScale(Y[i])) .attr("fill", (i) => zScale(Z[i])); if (title) bar.append("title").text(title); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .selectAll("text") .attr("transform", "translate(-40,10)rotate(45)") .style("text-anchor", "start") .style("fill", (d) => countryColor( data.find(function (item) { return item.univname === d; }).allData.country ) ) .style("font-size", 15) .on("mousemove", function (event, d) { // tooltip toolTip .style("left", (event.pageX + 18 + toolTip.node().offsetWidth > window.innerWidth) ? (event.pageX - 18 - toolTip.node().offsetWidth) + "px" : (event.pageX + 18) + "px") .style("top", (event.pageY - toolTip.node().offsetHeight > 0) ? (event.pageY - toolTip.node().offsetHeight) + "px" : (event.pageY + 18) + "px") .style("display", "block").html(` University : ${ data.find(function (item) { return item.univname === d; }).allData.university_name }
Country : ${ data.find(function (item) { return item.univname === d; }).allData.country }
Rank : ${ data.find(function (item) { return item.univname === d; }).allData.world_rank } `); }) .on("mouseout", function (d, i) { // tooltip end toolTip.style("display", "none"); }); return Object.assign(svg.node(), { scales: { color: zScale } }); }4d:T16c7,lineChart = (w, h) => { var margin = { top: 30, right: 30, bottom: 10, left: 60 }, width = w, height = h; function zoom(svg) { const extent = [ [margin.left, margin.top], [width - margin.right, height - margin.top] ]; svg.call( d3 .zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed) ); function zoomed(event) { x.range( [margin.left, width - margin.right].map((d) => event.transform.applyX(d) ) ); svg.selectAll(".x-axis").call(xAxis); svg.selectAll("circle").attr("cx", (d) => x(d.rank)); svg.selectAll(".line").attr("d", (d) => line(d.values)); svg.selectAll(".endLineLabel").attr("transform", function (d) { return "translate(" + x(d.value.rank) + "," + y(d.value.value) + ")"; }); } } const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .call(zoom); const g = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var allGroup = checkboxLineChart; var dataReady = allGroup.map(function (grpName) { // .map allows to do something for each element of the list return { name: grpName, values: yearData100 .map(function (d) { return { rank: d.world_rank, value: +d[grpName], allValue: d }; }) .filter((d) => d.value > 0) }; }); var myColor = d3.scaleOrdinal().domain(scoreNames).range(d3.schemeSet2); const x = d3 .scaleLinear() .domain([0, 105]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 110]) .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g").attr("class", "x-axis").call(xAxis); const yAxis = (g) => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)); svg.append("g").attr("class", "y-axis").call(yAxis); // Score+Rank label svg .append("text") .attr("text-anchor", "end") .attr("x", width) .attr("y", height + 40) .text("Rank"); svg .append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("x", -15) .attr("y", 20) .text("Score"); var line = d3 .line() .x((d) => x(+d.rank)) .y((d) => y(+d.value)); svg .selectAll("myLines") .attr("class", "lines") .data(dataReady) .enter() .append("path") .attr("class", (d) => d.name) .attr("class", "line") .attr("d", (d) => line(d.values)) .attr("stroke", (d) => myColor(d.name)) .style("stroke-width", 4) .style("fill", "none"); // Add the points svg .selectAll("myDots") .data(dataReady) .enter() .append("g") .style("fill", (d) => myColor(d.name)) .attr("class", (d) => d.name) // Second we need to enter in the 'values' part of this group .selectAll("myPoints") .data((d) => d.values) .enter() .append("circle") .attr("cx", (d) => x(d.rank)) .attr("cy", (d) => y(d.value)) .attr("r", 5) .attr("stroke", "white") .on("mouseover", function (d, i) { // highlight start d3.select(this).attr("r", "9"); var parentNodeclass = d3.select(this.parentNode).attr("class"); svg.selectAll(".line").style("opacity", 0.2); d3.selectAll("circle").style("opacity", 0.2); d3.selectAll("." + parentNodeclass + " circle").style("opacity", 1); }) .on("mousemove", function (event, d) { // tooltip var left = event.pageX + 18; var top = event.pageY + 18; if (event.pageX + toolTip.node().offsetWidth + 18 > window.innerWidth) { left = event.pageX - 18 - toolTip.node().offsetWidth; } if (event.pageY + toolTip.node().offsetHeight + 18 > window.innerHeight) { top = event.pageY - 18 - toolTip.node().offsetHeight; } toolTip .style("left", left + "px") .style("top", top + "px") .style("display", "block").html(` Rank : ${d.rank}
University : ${d.allValue.university_name}
Country : ${d.allValue.country}
Score : ${d.value} `); }) .on("mouseout", function (d, i) { // highlight end d3.select(this).attr("r", "5"); var parentNodeclass = d3.select(this.parentNode).attr("class"); d3.selectAll(".line").style("opacity", 1); d3.selectAll("circle").style("opacity", 1); // tooltip end toolTip.style("display", "none"); }); // Add a label at the end of each line svg .selectAll("myLabels") .data(dataReady) .enter() .append("g") .append("text") .attr("class", (d) => d.name) .datum(function (d) { return { name: d.name, value: d.values[d.values.length - 1] }; }) .attr("class", "endLineLabel") .attr("transform", function (d) { return "translate(" + x(d.value.rank) + "," + y(d.value.value) + ")"; }) .attr("x", 12) .text((d) => d.name) .style("fill", (d) => myColor(d.name)) .style("font-size", 15); // Add a legend (interactive) svg .selectAll("myLegend") .data(dataReady) .enter() .append("g") .append("text") .attr("class", (d) => d.name) .attr("x", function (d, i) { return 200 + i * 100 - String(d.name).length * 3; }) .attr("y", 30) .text((d) => d.name) .style("fill", (d) => myColor(d.name)) .style("font-size", 15); return svg.node(); }4e:T176b,scatterplot = (w, h) => { var margin = { top: 30, right: 30, bottom: 10, left: 60 }, width = w, height = h; function zoom(svg) { const extent = [ [margin.left, margin.top], [width - margin.right, height - margin.top] ]; svg.call( d3 .zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed) ); function zoomed(event) { x.range( [margin.left, width - margin.right].map((d) => event.transform.applyX(d) ) ); svg.selectAll(".x-axis").call(xAxis); svg.selectAll("circle").attr("cx", (d) => x(d.total)); svg.selectAll(".regress").attr("d", (d) => lineGenerator(d.regress)); svg.selectAll(".endLineLabel").attr("transform", function (d) { return "translate(" + x(d.value.total) + "," + y(d.value.value) + ")"; }); } } const display = viewScatterplot; const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .call(zoom); const g = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var allGroup = checkboxScatterplot; var dataReady = allGroup.map(function (grpName) { // .map allows to do something for each element of the list return { name: grpName, values: scatterplotValueOfYear .map(function (d) { return { total: d.total_score, value: +d[grpName], allValue: d }; }) .filter((d) => d.total > 0 && d.value > 0) }; }); var dataRegress = dataReady.map(function (d) { return { name: d.name, regress: regressionGenerator(d.values) }; }); var myColor = d3.scaleOrdinal().domain(scoreNames).range(d3.schemeSet2); const x = d3 .scaleLinear() .domain([40, 105]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 110]) .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g").attr("class", "x-axis").call(xAxis); const yAxis = (g) => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)); svg.append("g").attr("class", "y-axis").call(yAxis); // Score+Rank label svg .append("text") .attr("text-anchor", "end") .attr("x", width) .attr("y", height + 40) .text("Total score"); svg .append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("x", -15) .attr("y", 20) .text("Score"); var lineGenerator = d3 .line() .x((d) => x(+d[0])) .y((d) => y(+d[1])); svg .selectAll("myLines") .attr("class", "lines") .data(dataRegress) .enter() .append("path") .attr("class", (d) => d.name) .attr("class", "regress") .attr("d", (d) => lineGenerator(d.regress)) .attr("stroke", (d) => myColor(d.name)) .style("stroke-width", 4) .style("fill", "none"); // Add the points svg .selectAll("myDots") .data(dataReady) .enter() .append("g") .style("fill", (d) => myColor(d.name)) .attr("class", (d) => d.name) // Second we need to enter in the 'values' part of this group .selectAll("myPoints") .data((d) => d.values) .enter() .append("circle") .attr("cx", (d) => x(d.total)) .attr("cy", (d) => y(d.value)) .attr("r", 5) .attr("stroke", "white") .on("mouseover", function (d, i) { // highlight start d3.select(this).attr("r", "9"); var parentNodeclass = d3.select(this.parentNode).attr("class"); svg.selectAll(".regress").style("opacity", 0.2); d3.selectAll("circle").style("opacity", 0.2); d3.selectAll("." + parentNodeclass + " circle").style("opacity", 1); }) .on("mousemove", function (event, d) { // tooltip var left = event.pageX + 18; var top = event.pageY + 18; if (event.pageX + toolTip.node().offsetWidth + 18 > window.innerWidth) { left = event.pageX - 18 - toolTip.node().offsetWidth; } if (event.pageY + toolTip.node().offsetHeight + 18 > window.innerHeight) { top = event.pageY - 18 - toolTip.node().offsetHeight; } toolTip .style("left", left + "px") .style("top", top + "px") .style("display", "block").html(` University : ${d.allValue.university_name}
Country : ${d.allValue.country}
Score(${d3 .select(this.parentNode) .attr("class")}) : ${d.value}
Total score : ${d.total}
Rank : ${d.allValue.world_rank} `); }) .on("mouseout", function (d, i) { // highlight end d3.select(this).attr("r", "5"); var parentNodeclass = d3.select(this.parentNode).attr("class"); d3.selectAll(".regress").style("opacity", 1); d3.selectAll("circle").style("opacity", 1); // tooltip end toolTip.style("display", "none"); }); // Add a legend (interactive) svg .selectAll("myLegend") .data(dataReady) .enter() .append("g") .append("text") .attr("class", (d) => d.name) .attr("x", function (d, i) { return 200 + i * 100 - String(d.name).length * 3; }) .attr("y", 30) .text((d) => d.name) .style("fill", (d) => myColor(d.name)) .style("font-size", 15); var hasScatterplot = display.some(function (d) { return d === "Scatter plot"; }); var hasLoss = display.some(function (d) { return d === "Regression function"; }); if (!hasScatterplot) { svg.selectAll("circle").remove(); } if (!hasLoss) { svg.selectAll(".regress").remove(); } return svg.node(); }4f:T120f,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }50:[{"id":"301538639d24072cdf48317e75b2260620f22ed0470ed27198380eaf84759284743b2bb170d0fd8ee16775c5678cd115c1059ca44953bb29abca363ab5283cab","href":"https://static.observableusercontent.com/files/301538639d24072cdf48317e75b2260620f22ed0470ed27198380eaf84759284743b2bb170d0fd8ee16775c5678cd115c1059ca44953bb29abca363ab5283cab","name":"timesData.csv","type":"text/csv","lastModified":1672712921808.037,"size":268231},{"id":"63244dc775facc34f21d11a0443009d6b64d7eca2e5959aef5a17c11e1c3b8de41bbefc55e24c6e8386ca30f5025f2288c47c8979942aa1908a25a1398bb7254","href":"https://static.observableusercontent.com/files/63244dc775facc34f21d11a0443009d6b64d7eca2e5959aef5a17c11e1c3b8de41bbefc55e24c6e8386ca30f5025f2288c47c8979942aa1908a25a1398bb7254","name":"timesDataModified.csv","type":"text/csv","lastModified":1673751558737.225,"size":265704},{"id":"0d249ca68a15fc4d1fbb1f774c57f45df6e8e54dcb3a8daa4068a71a7d348ca9bc127142496c3a4a9d96dddba8ca7f04776bf9352737e2040582ea94c56809fb","href":"https://static.observableusercontent.com/files/0d249ca68a15fc4d1fbb1f774c57f45df6e8e54dcb3a8daa4068a71a7d348ca9bc127142496c3a4a9d96dddba8ca7f04776bf9352737e2040582ea94c56809fb","name":"flags_dataset_flagcdn@3.csv","type":"text/csv","lastModified":1673765257417.765,"size":4354},{"id":"5ed0dfdc85b6bc6c3bd0e55ea304855c04f0d5972102ad05ae8f5c6c3b3dcbc332497f5b95a0b664821d805a81c2a8ae05ef68f02925e90c0dfd77b57fa2fa60","href":"https://static.observableusercontent.com/files/5ed0dfdc85b6bc6c3bd0e55ea304855c04f0d5972102ad05ae8f5c6c3b3dcbc332497f5b95a0b664821d805a81c2a8ae05ef68f02925e90c0dfd77b57fa2fa60","name":"countries_codes_with_uk_subcountries.csv","type":"text/csv","lastModified":1681206534103.222,"size":5025}] 29:{"id":"22884479aa7fc595","slug":null,"title":"World University Rankings","thumbnail":"8c88cbca4228501cd439b900a1c27dc6de1c4be3de362ad202ec2687b6178172","access_level":"public","create_time":"$D2023-01-03T02:27:07.288Z","update_time":"$D2023-07-31T20:28:44.713Z","view_time":null,"first_public_time":"$D2023-01-03T02:27:07.288Z","has_unpublished_edits":null,"fork":{"id":"3ff9fa2c6593d814","slug":"bar-chart-race","title":"Bar Chart Race","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2b5c258eb83e46e4","login":"haowei98","name":"Haowei","avatar_url":"https://avatars-next.observableusercontent.com/96e43cba7941e7cab83ccb2ab776d96597ce7514114a1162353b0d02aafb7ca4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":6628,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ae0b55da90ab5c4","login":"haowei98","name":"Haowei","avatar_url":"https://avatars-next.observableusercontent.com/96e43cba7941e7cab83ccb2ab776d96597ce7514114a1162353b0d02aafb7ca4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7ae0b55da90ab5c4","login":"haowei98","name":"Haowei","avatar_url":"https://avatars-next.observableusercontent.com/96e43cba7941e7cab83ccb2ab776d96597ce7514114a1162353b0d02aafb7ca4","tier":null,"role":"editor"},{"type":"individual","id":"6a0f446553b64561","login":"yiyao-zhai","name":"Alps","avatar_url":"https://avatars-next.observableusercontent.com/56502cd4707326a0e7dfa7f96b907baac377fb9ee95da8e4018948ecbd7f9980","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"World University Rankings","cells":[{"id":239,"value":"# World University Rankings\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3499,"value":"## Membres du groupe:\n- WANG Haowei\n- ZHAI Yiyao","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6591,"value":"## Objectif\nOn s'intéresse dans un premier temps à visualiser globalement les données, avec un classification par pays et années, ensuite nous allons concentrer sur des informations précises pour chaque université.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3510,"value":"## Données\n**Times Higher Education World University Ranking** : Le classement mondial des universités du Times Higher Education est largement considéré comme l'une des mesures universitaires les plus influentes et les plus observées.\n\ncwurData.csv (2603 lignes, 14 colonnes) \nSource: https://www.kaggle.com/datasets/mylesoneill/world-university-rankings \n\n**Description des données** : Le dataset se compose des attributs suivants :\nworld_rank: classement mondiale \nuniversity_name: nom de l'université \ncountry: pays et régions \nteaching: score de l'Enseignement Recherche \ninternational: score de l'internationalité \nresearch: socre de Recherche \ncitations: score de citations \nincome: score du revenu \ntotal_score: score totale \nnum_students: nombre des étudiants \nstudent_staff_ratio: ratio entre les étudaitns et les personnels \ninternational_students: pourcentages des étudiants étrangers \nfemale_male_ratio: ratio femme homme \nyear: année ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3506,"value":"timesdata = await FileAttachment(\"timesData.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"timesdata","database":"$undefined"},{"id":3402,"value":"## Bar Chart Race\nOn visualise dynamiquement les nombre d'universités en pourcentage pour chaque pays par année.\nLe bouton Replay permet de recommencer la visualisation.\n\n\nOn peut voir ici le classement ne change pas beaucoup entre le temps, USA est toujours le premier avec le plus nombre des universités classé dans la liste, donc on s'intéresse ensuite la raison, pourquoi et dans quels critères sont classées les universités?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":982,"value":"viewof replay = html`