32:T446,

┻ Number of countries participating in the final (last position in the ranking)

Spanish final result

■ Male performers ■ Female performers ■ Mixed groups

Mouse over the stars to see information about that year

33:T704,

┻ Number of countries participating in the final (last position in the ranking)

Singers that participated composing the music or the lyrics. Singers, only voice.

● Composers or lyricists

■ Male performers ■ Female performers or groups ■ Mixed groups

👆 Click on the stars to see information about that year.

34:Td8e,css = html``35:T818,class Composers_en extends Composers_chart { constructor(item) { // call parent constructor super(item); this.add_interaction(); } add_interaction() { this.participation .selectAll(".stars") .on("mouseover", (d) => this.mouseover_performers(d, "singer")) .on("click", (d) => this.mouseover_performers(d, "singer")) .on("mouseleave", (d) => this.mouseleave(d)); this.comp .selectAll(".composers_year") .selectAll(".composer") .on("click", (d) => this.mouseover_composers(d, "comp")) .on("mouseover", (d) => this.mouseover_composers(d, "comp")) .on("mouseleave", (d) => this.mouseleave(d, "comp")); } mouseover_performers(item, type) { this.participation .selectAll(`#${item.target.id}`) .classed("highlighted", true); const year = +item.target.id.split("_")[1]; this.comp.selectAll(`.c_${year}`).classed("highlighted", true); const entry = this.data.filter((d) => d.year === year); const entry_comp = this.composers.filter((d) => d.year === year); composers_tooltip.update_text_c(entry[0], this, entry_comp); } mouseleave(item, type) { if (type === "comp") { const year = +item.target.classList[1].split("_")[1]; this.participation .selectAll(`#singer_${year}`) .classed("highlighted", false); } else { this.participation .selectAll(`#${item.target.id}`) .classed("highlighted", false); } this.comp.selectAll(".composer").classed("highlighted", false); composers_tooltip.hide(); } mouseover_composers(item) { const year = +item.target.classList[1].split("_")[1]; this.participation .selectAll(`#singer_${year}`) .classed("highlighted", true); this.comp .selectAll(`.${item.target.classList[1]}`) .classed("highlighted", true); const entry = this.data.filter((d) => d.year === year); const entry_comp = this.composers.filter((d) => d.year === year); composers_tooltip.update_text_c(entry[0], this, entry_comp); } }36:T34b1,class Singers_only_chart { constructor(item) { this.item = item; this.data = item.data; this.id = item.id; this.colors = item.colors; this.sorting = item.sorting; this.date_extent = d3.extent(this.data, (d) => d.year); this.language = item.language; this.type = item.type; this.div = d3.select(`#${this.id}`); this.plot; this.tickFormat = d3.format(".0f"); this.x_ticks_values = [1961, 1970, 1980, 1990, 2000, 2010, 2021]; this.transition_l = d3.transition().duration(1000); this.lg = item.language; this.ref_w = 500; this.anotation = [ { lg: "en", id: "plot_singers", label: "Massiel and Salome are the only Spanish performers to have won in Eurovision", year: 1968.5 }, { lg: "es", id: "plot_singers", label: "Massiel y Salomé son las únicas artistas españoles que han ganado Eurovisión", year: 1968.5 } ]; this.scale_delay = d3 .scaleLinear() .domain(this.date_extent) .range([0, 2000]); this.init(); this.createSVG(); this.check_type(); this.createSVG(); this.build_singers(); } init() { this.margin = { l: 60, l_y: 50, t: 75, r: 30, b: 65 }; this.width = document.getElementById(this.id).clientWidth - this.margin.r - this.margin.l; this.height = document.getElementById(this.id).clientHeight - this.margin.t - this.margin.b; this.orientation = this.width >= this.ref_w ? "landscape" : "portrait"; this.star = { h: 12, path: "M6.077.417l-1.53,3.1-3.424.5A.75.75,0,0,0,.708,5.3L3.185,7.713,2.6,11.123a.75.75,0,0,0,1.088.79L6.75,10.3l3.063,1.61a.75.75,0,0,0,1.087-.79l-.586-3.41L12.792,5.3a.75.75,0,0,0-.415-1.28l-3.424-.5L7.423.417a.751.751,0,0,0-1.345,0Z" }; } createSVG() { if (this.div.selectAll("svg").empty()) { this.plot = this.div.append("svg"); this.axis_y = this.plot.append("g").attr("class", "axis axis-y"); this.axis_x = this.plot.append("g").attr("class", "axis axis-x"); this.plot_chart = this.plot.append("g").attr("class", "chart"); this.participation = this.plot_chart .append("g") .attr("class", "participation"); this.performer = this.plot_chart.append("g").attr("class", "performer"); this.tooltip = this.plot_chart.append("g").attr("class", "tooltip"); } else { this.plot = this.div.select("svg"); this.axis_y = this.plot.select(".axis-y"); this.axis_x = this.plot.select(".axis-x"); this.plot_chart = this.plot.select(".chart"); this.participation = this.plot_chart.select(".participation"); this.performer = this.plot_chart.select(".performer"); } this.plot = this.div .select("svg") .attr("width", this.width + this.margin.r + this.margin.l) .attr("height", this.height + this.margin.b + this.margin.t); this.axis_y.attr( "transform", `translate(${this.margin.l_y}, ${this.margin.t})` ); this.plot_chart.attr( "transform", `translate(${this.margin.l}, ${this.margin.t})` ); this.axis_x.attr( "transform", `translate(${this.margin.l}, ${this.height + this.margin.t})` ); } check_type() { this.y_extent = [1, d3.max(this.data, (d) => d.total)]; this.vars = this.orientation === "landscape" ? { x: "year", x0: "year", y: "place_final", y0: "total" } : { x: "place_final", x0: "total", y: "year", y0: "year" }; } build_scales() { if (this.orientation === "landscape") { this.scale_x = d3 .scaleLinear() .domain(this.date_extent) .range([0, this.width]); this.scale_y = d3 .scaleLinear() .domain(this.y_extent) .range([0, this.height]); } else { this.scale_x = d3 .scaleLinear() .domain(this.y_extent) .range([this.width, 0]); this.scale_y = d3 .scaleLinear() .domain(this.date_extent) .range([0, this.height]); } this.scale_colors = d3 .scaleOrdinal() .domain(["Mixed", "Male", "Female"]) .range([this.colors.mixed, this.colors.male, this.colors.female]); } add_axis() { this.build_scales(); if (this.orientation === "landscape") { this.add_axis_landscape(); } else { this.add_axis_portrait(); } this.plot.attr("class", this.orientation); } // builds landscape axis add_axis_landscape() { // axis const axis_x = d3 .axisBottom(this.scale_x) .tickPadding(8) .tickFormat(this.tickFormat) .tickValues(this.x_ticks_values); const axis_y = d3 .axisLeft() .scale(this.scale_y) .tickPadding(5) .tickSize(-this.width - (this.margin.l - this.margin.l_y) * 2) .tickValues([ 1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, this.y_extent[1] ]); this.axis_x.call(axis_x); this.axis_x .selectAll(".title-axis") .data([{ en: "Year", es: "Año" }]) .join("text") .text((d) => (this.language === "en" ? d.en : d.es)) .attr("class", "title-axis") .attr("transform", `translate(-15, 50)`); this.axis_y.call(axis_y); this.axis_y.selectAll(".tick").attr("class", (d, i) => `tick line_${d}`); this.axis_y .selectAll(".title-axis") .data([this.sorting]) .join("text") .text((d) => d) .attr("class", "title-axis") .attr("transform", `translate(-30, ${-this.star.h - 5})`); this.axis_y .selectAll(".line_1") .selectAll(".star") .data([this.star]) .join("path") .attr("d", this.star.path) .attr("class", "star") .attr( "transform", `translate(${-this.star.h * 2.5}, ${-this.star.h / 2})` ); } add_axis_portrait() { this.axis_x.attr( "transform", `translate(${this.margin.l}, ${this.margin.t - 10})` ); // axis vertical const axis_x = d3 .axisTop(this.scale_x) .tickPadding(5) .tickSize(-this.height) .tickValues([1, 5, 10, 15, 20, 25, this.y_extent[1]]); const axis_y = d3 .axisLeft() .scale(this.scale_y) .tickPadding(8) .tickFormat(this.tickFormat) .tickValues(this.x_ticks_values); this.axis_x.call(axis_x); this.axis_y.call(axis_y); this.axis_y .selectAll(".title-axis") .data(["Year"]) .join("text") .text((d) => d) .attr("class", "title-axis") .style("text-anchor", "end") .attr("transform", `translate(-10, -15)`); this.axis_x.selectAll(".tick").attr("class", (d, i) => `tick line_${d}`); this.axis_x .selectAll(".title-axis") .data([this.sorting]) .join("text") .text((d) => d) .attr("class", "title-axis") .attr("transform", `translate(${this.scale_x(2)}, ${-this.star.h * 2})`); this.axis_x .selectAll(".line_1") .selectAll(".star") .data([this.star]) .join("path") .attr("d", this.star.path) .attr("class", "star") .attr( "transform", `translate(${-this.star.h / 2}, ${-this.star.h * 2 - 10})` ); } // builds chart build_singers() { this.add_axis(); this.participation .selectAll(".annotation") .data(this.anotation.filter((d) => d.id === this.id && this.lg === d.lg)) .join("text") .attr("class", "annotation") .text((d) => (this.orientation === "landscape" ? d.label : "")) .attr("transform", (d) => `translate(${this.scale_x(d.year)}, 0)`) .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("dy", 0.25) .call(wrap, 200, 4); // participation --- lines this.participation .selectAll(".part") .data(this.data) .join( (enter) => enter .append("line") .attr("class", "part") .attr("x1", (d) => this.scale_x(d[this.vars.x0])) .attr("x2", (d) => this.scale_x(d[this.vars.x0])) .attr("y1", (d) => this.scale_y(d[this.vars.y0])) .attr("y2", (d) => this.scale_y(d[this.vars.y0])) .style("stroke", (d) => this.scale_colors(d.performer_gender)) .call((enter) => { enter .transition(this.transition_l) .delay((d, i) => this.scale_delay(d.year)) .attr("x2", (d) => this.scale_x(d[this.vars.x])) .attr("y2", (d) => this.scale_y(d[this.vars.y])); }), (update) => update.call((update) => { update .attr("x1", (d) => this.scale_x(d[this.vars.x0])) .attr("x2", (d) => this.scale_x(d[this.vars.x])) .attr("y1", (d) => this.scale_y(d[this.vars.y0])) .attr("y2", (d) => this.scale_y(d[this.vars.y])); }) ); // horizontal lines this.participation .selectAll(".part-h") .data(this.data) .join( (enter) => enter .append("line") .attr("class", "part-h") .style("stroke", (d) => this.scale_colors(d.performer_gender)) .attr("x1", (d) => this.scale_x(d[this.vars.x0])) .attr("x2", (d) => this.scale_x(d[this.vars.x0])) .attr("y1", (d) => this.scale_y(d[this.vars.y0])) .attr("y2", (d) => this.scale_y(d[this.vars.y0])) .call((enter) => { enter .transition(this.transition_l) .delay((d, i) => this.scale_delay(d.year)) .attr("x1", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) - 5 : this.scale_x(d[this.vars.x0]) ) .attr("x2", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) + 5 : this.scale_x(d[this.vars.x0]) ) .attr("y1", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) - 5 ) .attr("y2", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) + 5 ); }), (update) => update .attr("x1", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) - 5 : this.scale_x(d[this.vars.x0]) ) .attr("x2", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) + 5 : this.scale_x(d[this.vars.x0]) ) .attr("y1", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) - 5 ) .attr("y2", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) + 5 ) ); // star this.participation .selectAll(".stars") .data(this.data) .join( (enter) => enter .append("path") .attr("id", (d) => `singer_${d.year}`) .attr("class", "stars") .attr("transform", (d) => this.orientation === "landscape" ? `translate(${this.scale_x(d.year) - this.star.h / 2}, ${ this.scale_y(d.total) - this.star.h / 2 })` : `translate(${this.scale_x(d.total) - this.star.h / 2}, ${ this.scale_y(d.year) - this.star.h / 2 })` ) .attr("d", this.star.path) .style("stroke", this.colors.bkg) .style("stroke-weight", 2) .style("fill", (d) => this.scale_colors(d.performer_gender)) .style("opacity", 0) .call((enter) => { enter .transition(this.transition_l) .delay((d, i) => this.scale_delay(d.year)) .attr( "transform", (d) => `translate(${ this.scale_x(d[this.vars.x]) - this.star.h / 2 }, ${this.scale_y(d[this.vars.y]) - this.star.h / 2})` ) .style("opacity", 1); }), (update) => update.attr( "transform", (d) => `translate(${this.scale_x(d[this.vars.x]) - this.star.h / 2}, ${ this.scale_y(d[this.vars.y]) - this.star.h / 2 })` ) ); } resize() { this.init(); // svg this.plot .attr("width", this.width + this.margin.r + this.margin.l) .attr("height", this.height + this.margin.t + this.margin.b); this.axis_x.attr( "transform", `translate(${this.margin.l}, ${this.height + this.margin.t})` ); this.check_type(); this.build_singers(); } }37:T540f,class Composers_chart { constructor(item) { this.item = item; this.data = item.data; this.composers = item.composers; this.id = item.id; this.colors = item.colors; this.sorting = item.sorting; this.date_extent = d3.extent(this.data, (d) => d.year); this.type = item.type; this.language = item.language; this.select = d3.select(`#${this.id}`); this.tooltip = item.tooltip; this.align = item.align_toggle; this.radios = item.view; this.view = this.radios; this.tickFormat = d3.format(".0f"); this.x_ticks_values = [1961, 1970, 1980, 1990, 2000, 2010, 2021]; this.transition_l = d3.transition().duration(1000); this.transition_s = d3.transition().duration(100); this.lg = item.language; this.ref_w = 500; this.r = 3; this.scale_delay = d3 .scaleLinear() .domain(this.date_extent) .range([0, 2000]); this.star = { h: 12, path: "M6.077.417l-1.53,3.1-3.424.5A.75.75,0,0,0,.708,5.3L3.185,7.713,2.6,11.123a.75.75,0,0,0,1.088.79L6.75,10.3l3.063,1.61a.75.75,0,0,0,1.087-.79l-.586-3.41L12.792,5.3a.75.75,0,0,0-.415-1.28l-3.424-.5L7.423.417a.751.751,0,0,0-1.345,0Z" }; this.init(); this.control_radios(); this.check_type(); this.createSVG(); this.build_singers(); this.build_composers(); } control_radios() { if (this.language === "es") { this.view = this.radios === "Compositores" ? "Composers" : "Lyricists"; } } init() { this.margin = { l: 60, l_y: 50, t: 75, r: 30, b: 65 }; this.width = document.getElementById(this.id).clientWidth - this.margin.r - this.margin.l; this.orientation = this.width >= this.ref_w ? "landscape" : "portrait"; const height = document.getElementById(this.id).clientHeight - this.margin.t - this.margin.b; this.height = this.align && this.orientation === "landscape" ? height / 2 : height; } check_type() { // if toggle_align true --- // dots should align to bottom and orientation to sort this.y_extent = [1, d3.max(this.data, (d) => d.total)]; this.y_extent_comp = [d3.max(this.composers, (d) => d.y_order), -0.5]; this.vars = this.orientation === "landscape" ? { x: "year", x0: "year", y: "place_final", y0: "total" } : { x: "place_final", x0: "total", y: "year", y0: "year" }; if (this.language === "en") { this.sorting = this.align ? "N Composers / Lyricists" : "Ranking"; } else { this.sorting = this.align ? "N Compositores / Letristas" : "Ranking"; } } createSVG() { if (this.select.selectAll("svg").empty()) { this.plot = this.select.append("svg"); this.axis_y = this.plot.append("g").attr("class", "axis axis-y"); this.axis_x = this.plot.append("g").attr("class", "axis axis-x"); this.plot_chart = this.plot.append("g").attr("class", "chart"); this.participation = this.plot_chart .append("g") .attr("class", "participation"); this.performer = this.plot_chart.append("g").attr("class", "performer"); this.comp = this.plot_chart.append("g").attr("class", "composers"); this.tooltip = this.plot_chart.append("g").attr("class", "tooltip"); } else { this.plot = this.select.select("svg"); this.axis_y = this.plot.select(".axis-y"); this.axis_x = this.plot.select(".axis-x"); this.plot_chart = this.plot.select(".chart"); this.participation = this.plot_chart.select(".participation"); this.performer = this.plot_chart.select(".performer"); this.comp = this.plot_chart.select(".composers"); } this.plot = this.select .select("svg") .attr("width", this.width + this.margin.r + this.margin.l) .attr("height", this.height + this.margin.b + this.margin.t); this.axis_y.attr( "transform", `translate(${this.margin.l_y}, ${this.margin.t})` ); this.plot_chart.attr( "transform", `translate(${this.margin.l}, ${this.margin.t})` ); this.axis_x.attr( "transform", `translate(${this.margin.l}, ${this.height + this.margin.t})` ); } build_scales() { this.scale_comp = this.orientation === "landscape" ? d3.scaleLinear().domain(this.y_extent_comp).range([0, this.height]) : d3.scaleLinear().domain(this.y_extent_comp).range([this.width, 0]); if (this.align) { if (this.orientation === "landscape") { this.scale_x = d3 .scaleLinear() .domain(this.date_extent) .range([0, this.width]); this.scale_y = this.scale_comp; } else { this.scale_x = this.scale_comp; this.scale_y = d3 .scaleLinear() .domain(this.date_extent) .range([0, this.height]); } } else { if (this.orientation === "landscape") { this.scale_x = d3 .scaleLinear() .domain(this.date_extent) .range([0, this.width]); this.scale_y = d3 .scaleLinear() .domain(this.y_extent) .range([0, this.height]); } else { this.scale_x = d3 .scaleLinear() .domain(this.y_extent) .range([this.width, 0]); this.scale_y = d3 .scaleLinear() .domain(this.date_extent) .range([0, this.height]); } } this.scale_colors = d3 .scaleOrdinal() .domain(["Mixed", "Male", "Female"]) .range([this.colors.mixed, this.colors.male, this.colors.female]); } add_axis() { this.build_scales(); if (this.orientation === "landscape") { this.add_axis_landscape(); } else { this.add_axis_portrait(); } this.plot.attr("class", this.orientation); } // builds landscape axis add_axis_landscape() { // axis const axis_x = d3 .axisBottom(this.scale_x) .tickPadding(8) .tickFormat(this.tickFormat) .tickValues(this.x_ticks_values); const tickValues = this.align ? [0, 5, 10, this.y_extent_comp[0]] : [1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, this.y_extent[1]]; const axis_y = d3 .axisLeft() .scale(this.scale_y) .tickPadding(5) .tickSize(-this.width - (this.margin.l - this.margin.l_y) * 2) .tickValues(tickValues); this.axis_x.call(axis_x); this.axis_x .selectAll(".title-axis") .data([{ en: "Year", es: "Año" }]) .join("text") .text((d) => (this.language === "en" ? d.en : d.es)) .attr("class", "title-axis") .attr("transform", `translate(-15, 50)`); this.axis_y.call(axis_y); this.axis_y.selectAll(".tick").attr("class", (d, i) => `tick line_${d}`); if (this.align) { this.axis_y.selectAll(".line_1").selectAll(".star").remove(); this.axis_y.selectAll(".line_1").attr("class", "line-1"); } else { this.axis_y .selectAll(".line_1") .selectAll(".star") .data([this.star]) .join("path") .attr("d", this.star.path) .attr("class", "star") .attr( "transform", `translate(${-this.star.h * 2.5}, ${-this.star.h / 2})` ); } this.axis_y .selectAll(".title-axis") .data([this.sorting]) .join("text") .text((d) => d) .attr("class", "title-axis") .attr("transform", `translate(-30, ${-this.star.h - 5})`); } add_axis_portrait() { const tickValues = this.align ? [0, 5, 10] : [1, 5, 10, 15, 20, 25, this.y_extent[1]]; this.axis_x.attr( "transform", `translate(${this.margin.l}, ${this.margin.t - 10})` ); // axis vertical const axis_x = d3 .axisTop(this.scale_x) .tickPadding(5) .tickSize(-this.height) .tickValues([1, 5, 10, 15, 20, 25, this.y_extent[1]]); const axis_y = d3 .axisLeft() .scale(this.scale_y) .tickPadding(8) .tickFormat(this.tickFormat) .tickValues(this.x_ticks_values); this.axis_x.call(axis_x); this.axis_y.call(axis_y); this.axis_y .selectAll(".title-axis") .data(["Year"]) .join("text") .text((d) => d) .attr("class", "title-axis") .attr("text-anchor", "end") .attr("transform", `translate(-10, -15)`); this.axis_x.selectAll(".tick").attr("class", (d, i) => `tick line_${d}`); if (this.align) { this.axis_x.selectAll(".line_1").selectAll(".star").remove(); this.axis_x.selectAll(".line_1").remove(); } else { this.axis_x .selectAll(".line_1") .selectAll(".star") .data([this.star]) .join("path") .attr("d", this.star.path) .attr("class", "star") .attr( "transform", `translate(${-this.star.h / 2}, ${-this.star.h * 2 - 10})` ); } this.axis_x .selectAll(".title-axis") .data([this.sorting]) .join("text") .text((d) => d) .attr("class", "title-axis") .attr( "transform", this.align ? `translate(${this.scale_x(10.2)}, ${-this.star.h * 2})` : `translate(${this.scale_x(2)}, ${-this.star.h * 2})` ); } check_xy_star(d) { let xy; if (this.align) { xy = this.orientation === "landscape" ? `translate(${ this.scale_x(d.year) - this.star.h / 2 }, ${this.scale_y(0.5)})` : `translate(${this.scale_x(0)}, ${ this.scale_y(d.year) - this.star.h / 2 })`; } else { xy = this.orientation === "landscape" ? (xy = `translate(${this.scale_x(d.year) - this.star.h / 2}, ${ this.scale_y(d.place_final) - this.star.h / 2 })`) : `translate(${this.scale_x(d.place_final) - this.star.h / 2}, ${ this.scale_y(d.year) - this.star.h / 2 })`; } return xy; } // builds chart build_singers() { this.add_axis(); if (this.align) { this.participation.selectAll(".part-h").remove(); this.participation.selectAll(".part").remove(); } else { this.build_lines(); } // star this.participation .selectAll(".stars") .data(this.data) .join( (enter) => enter .append("path") .attr("id", (d) => `singer_${d.year}`) .attr("class", (d) => `stars ${d.year}`) .attr("transform", (d) => this.check_xy_star(d)) .style("opacity", 0) .call((enter) => { enter .transition(this.transition_l) .delay((d, i) => this.scale_delay(d.year)) .attr("transform", (d) => this.check_xy_star(d)) .style("opacity", 1); }), (update) => update.call((update) => { update .transition(this.transition_s) .delay((d) => this.scale_delay(d.year)) .attr("transform", (d) => this.check_xy_star(d)) .style("opacity", 1); }) ) .attr("d", this.star.path) .style("stroke", (d) => this.scale_colors(d.performer_gender)) .style("stroke-weight", 2) .style("stroke-opacity", (d) => { const comp = d.composers_list.filter((e) => d.performer === e.name); return comp.length !== 0 ? 1 : 0.5; }) .style("fill", (d) => { const comp = d.composers_list.filter((e) => d.performer === e.name); return comp.length !== 0 ? this.scale_colors(d.performer_gender) : this.colors.bkg; }); } translate_comp(d) { let translate = "translate(0, 0)"; if (this.align === false && this.orientation === "landscape") { translate = `translate(${this.star.h / 1.2}, ${ this.scale_y(d[1][0].place_contest) - ((this.r * 2 + 1) * d[1].length) / 2 })`; } else if (this.align === false && this.orientation === "portrait") { translate = `translate(${ this.scale_x(d[1][0].place_contest) - ((this.r * 2 + 1) * d[1].length) / 2 }, ${this.star.h / 1.2})`; } return translate; } cy_comp(d) { let cy = this.scale_comp(d.y_order); if (this.align === false && this.orientation === "landscape") { cy = (this.r * 2 + 1) * d.y_order; } else if (this.align && this.orientation === "portrait") { cy = this.scale_y(d.year); } else if (this.align === false && this.orientation === "portrait") { cy = this.scale_y(d[this.vars.y0]); } return cy; } cx_comp(d) { let cx = this.scale_x(d[this.vars.x0]); if (this.align === false && this.orientation === "portrait") { cx = (this.r * 2 + 1) * d.y_order; } else if (this.align && this.orientation === "portrait") { cx = this.scale_comp(d.y_order); } return cx; } build_composers() { const years = d3.groups( this.composers.filter((d) => d.type === this.view), (d) => d.year ); const this_g = this.comp .selectAll(".composers_year") .data(years, (d) => d[0]) .join("g") .attr("class", "composers_year") .attr("id", (d) => `comp_${d[0]}`) .attr("transform", (d) => this.translate_comp(d)); this_g .selectAll(".composer") .data( (d) => d[1], (e) => e.name ) .join( (enter) => enter .append("circle") .attr("cx", (d) => this.cx_comp(d)) .attr("cy", (d) => this.cy_comp(d)) .style("opacity", 0) .transition(this.transition_l) .delay((d, i) => this.scale_delay(d.year)) .style("opacity", 1) .attr("cx", (d) => this.cx_comp(d)) .attr("cy", (d) => this.cy_comp(d)), (update) => update.call((update) => { update .transition(this.transition_s) .delay((d, i) => this.scale_delay(d.year)) .style("opacity", 1) .attr("cx", (d) => this.cx_comp(d)) .attr("cy", (d) => this.cy_comp(d)); }) ) .attr("class", (d) => `composer c_${d.year}`) .attr("r", this.r) .style("stroke", this.colors.bkg) .style("stroke-weight", 2) .style("fill", (d) => this.scale_colors(d.gender)); } // participation --- lines lines_x(d, p) { let x = p === "x1" ? this.scale_x(d[this.vars.x0]) : this.scale_x(d[this.vars.x]); if (this.orientation === "portrait" && p === "x2") { x = x - this.star.h / 2; } return x; } lines_y(d, p) { let y = p === "y1" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y]); if (this.orientation === "landscape" && p === "y2") { y = y + this.star.h / 2; } return y; } build_lines() { this.participation .selectAll(".part") .data(this.data) .join( (enter) => enter .append("line") .attr("class", "part") .attr("x1", (d) => this.lines_x(d, "x1")) .attr("x2", (d) => this.lines_x(d, "x1")) .attr("y1", (d) => this.lines_y(d, "y1")) .attr("y2", (d) => this.lines_y(d, "y1")) .call((enter) => { enter .transition(this.transition_l) .delay((d, i) => this.scale_delay(d.year)) .attr("x2", (d) => this.lines_x(d, "x2")) .attr("y2", (d) => this.lines_y(d, "y2")); }), (update) => update.call((update) => { update .transition(this.transition_s) .attr("x1", (d) => this.lines_x(d, "x1")) .attr("x2", (d) => this.lines_x(d, "x2")) .attr("y1", (d) => this.lines_y(d, "y1")) .attr("y2", (d) => this.lines_y(d, "y2")); }) ) .style("opacity", 0.5) .style("stroke", "var(--text-axis-y)"); // horizontal lines this.participation .selectAll(".part-h") .data(this.data) .join( (enter) => enter .append("line") .attr("class", "part-h") .attr("x1", (d) => this.scale_x(d[this.vars.x0])) .attr("x2", (d) => this.scale_x(d[this.vars.x0])) .attr("y1", (d) => this.scale_y(d[this.vars.y0])) .attr("y2", (d) => this.scale_y(d[this.vars.y0])) .call((enter) => { enter .attr("x1", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) - 5 : this.scale_x(d[this.vars.x0]) ) .attr("x2", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) + 5 : this.scale_x(d[this.vars.x0]) ) .attr("y1", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) - 5 ) .attr("y2", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) + 5 ); }), (update) => update .attr("x1", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) - 5 : this.scale_x(d[this.vars.x0]) ) .attr("x2", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) + 5 : this.scale_x(d[this.vars.x0]) ) .attr("y1", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) - 5 ) .attr("y2", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) + 5 ) ) .style("opacity", 0.5) .style("stroke", "var(--text-axis-y)"); } mouseover_performers(item, type) { this.participation .selectAll(`#${item.target.id}`) .classed("highlighted", true); const year = +item.target.id.split("_")[1]; this.comp.selectAll(`.c_${year}`).classed("highlighted", true); const entry = this.data.filter((d) => d.year === year); const entry_comp = this.composers.filter((d) => d.year === year); this.tooltip.update_text_c(entry[0], this, entry_comp); } mouseleave(item, type) { if (type === "comp") { const year = +item.target.classList[1].split("_")[1]; this.participation .selectAll(`#singer_${year}`) .classed("highlighted", false); } else { this.participation .selectAll(`#${item.target.id}`) .classed("highlighted", false); } this.comp.selectAll(".composer").classed("highlighted", false); this.tooltip.hide(); } mouseover_composers(item) { const year = +item.target.classList[1].split("_")[1]; this.participation .selectAll(`#singer_${year}`) .classed("highlighted", true); this.comp .selectAll(`.${item.target.classList[1]}`) .classed("highlighted", true); const entry = this.data.filter((d) => d.year === year); const entry_comp = this.composers.filter((d) => d.year === year); this.tooltip.update_text_c(entry[0], this, entry_comp); } resize() { // svg this.init(); this.check_type(); this.plot .attr("width", this.width + this.margin.r + this.margin.l) .attr("height", this.height + this.margin.t + this.margin.b); this.axis_x.attr( "transform", `translate(${this.margin.l}, ${this.height + this.margin.t})` ); // singers this.add_axis(); if (this.align === false) { this.participation .selectAll(".part") .attr("x1", (d) => this.lines_x(d, "x1")) .attr("x2", (d) => this.lines_x(d, "x2")) .attr("y1", (d) => this.lines_y(d, "y1")) .attr("y2", (d) => this.lines_y(d, "y2")); // horizontal lines this.participation .selectAll(".part-h") .attr("x1", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) - 5 : this.scale_x(d[this.vars.x0]) ) .attr("x2", (d) => this.orientation === "landscape" ? this.scale_x(d[this.vars.x0]) + 5 : this.scale_x(d[this.vars.x0]) ) .attr("y1", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) - 5 ) .attr("y2", (d) => this.orientation === "landscape" ? this.scale_y(d[this.vars.y0]) : this.scale_y(d[this.vars.y0]) + 5 ); } // star this.participation .selectAll(".stars") .attr("transform", (d) => this.check_xy_star(d)); // composers this.comp .selectAll(".composers_year") .attr("transform", (d) => this.translate_comp(d)); this.comp .selectAll(".composers_year") .selectAll(".composer") .attr("cx", (d) => this.cx_comp(d)) .attr("cy", (d) => this.cy_comp(d)); } }38:Tb22,class Tooltip { constructor(entry) { this.id = entry.id; this.tooltip_div = d3.select(`#${this.id}`); this.name = entry.name; this.language = entry.language; this.position = entry.language === "en" ? "Position:" : "Puesto:"; this.mid = entry.language === "en" ? "out of" : "de"; } update_text(d, chart) { this.tooltip_div.select(`#${this.name}_year`).html(d.year); this.tooltip_div .select(`#${this.name}_artist`) .html(d.performer) .style("color", `${chart.scale_colors(d.performer_gender)}`); this.tooltip_div.select(`#${this.name}_title`).html(d.song); this.tooltip_div .select(`#${this.name}_position`) .html(`${this.position} ${d.place_final} ${this.mid} ${d.total}`); if (this.id === "composers_tooltip") { let list = ""; if (this.language === "en") { list = radios_type === "Composers" ? "Composers:" : "Lyricists:"; } else { list = radios_type === "Compositores" ? "Compositores:" : "Letristas:"; } const array = radios_type === "Composers" ? d.composers_list : d.lyricists_array; array.forEach((e, i) => { let color = chart.scale_colors(e.gender); list = i === 0 ? `${list} ${e.name}` : `${list}; ${e.name}`; }); this.tooltip_div.select(`#${this.name}_list`).html(list); if (align_b_comp) { this.position_comp(d, chart); } else { this.position_singers(d, chart); } } else { this.position_singers(d, chart); } this.tooltip_div.style("display", "inherit"); } position_singers(d, chart) { let x = 0; let y = 0; if (chart.orientation === "landscape") { x = chart.scale_x(d.year) > chart.width / 2 ? chart.scale_x(d.year) - 120 : chart.scale_x(d.year) + 150 / 2; y = chart.scale_y(d.place_final); } else { x = chart.scale_x(d.place_final) > chart.width / 2 ? chart.scale_x(d.place_final) - 120 : chart.scale_x(d.place_final) + 150 / 2; y = chart.scale_y(d.year); } this.tooltip_div.style("left", `${x}px`).style("top", `${y}px`); } position_comp(d, chart) { let x = 0; let y = 0; if (chart.orientation === "landscape") { x = chart.scale_x(d.year) > chart.width / 2 ? chart.scale_x(d.year) - 120 : chart.scale_x(d.year) + 150 / 2; y = chart.scale_y(0); } else { x = chart.scale_x(5); y = chart.scale_y(d.year); } this.tooltip_div.style("left", `${x}px`).style("top", `${y}px`); } update_text_c(d, chart, comp) { this.update_text(d, chart); } hide() { this.tooltip_div.style("display", "none"); } }39:[{"id":"c91093ab0fd4fe6a4c8dcc6bc2be4a13845e2c21cd937acd5bc34b4828d9be07d02dc30dd6b8b1066cef0923d3cb13b3e311be63e4e2274528812d8812d27afc","href":"https://static.observableusercontent.com/files/c91093ab0fd4fe6a4c8dcc6bc2be4a13845e2c21cd937acd5bc34b4828d9be07d02dc30dd6b8b1066cef0923d3cb13b3e311be63e4e2274528812d8812d27afc","name":"data@9.json","type":"application/json","lastModified":1652624172044.856,"size":30544},{"id":"e77a4cbb05c4e1a9554b0c1752cb5939d3461913d9de9cead459b2ae2bfca133b218f999d0aff9fb694c339a1cbd419d32e4ac72d0b2e65e9d0699d4d0af4aaa","href":"https://static.observableusercontent.com/files/e77a4cbb05c4e1a9554b0c1752cb5939d3461913d9de9cead459b2ae2bfca133b218f999d0aff9fb694c339a1cbd419d32e4ac72d0b2e65e9d0699d4d0af4aaa","name":"sp_composers_lyricists@6.json","type":"application/json","lastModified":1652624178774.607,"size":39173}] 30:{"title":"Spanish participation in Eurovision: a gender approach to composers","cells":[{"id":0,"value":"# Spanish participation in Eurovision: a gender approach to composers","pinned":false,"hidden":false,"mode":"md"},{"id":1362,"value":"**You can read the full article in https://irenedelatorre.github.io/Spanish-Songs-in-Eurovision/en/**","pinned":false,"hidden":false,"mode":"md"},{"id":1747,"value":"Versión en castellano en https://observablehq.com/@irenedelatorre/participacion-espanola-en-eurovision-un-enfoque-de-genero","pinned":false,"hidden":false,"mode":"md"},{"id":1450,"value":"## Spanish performances in Eurovision by singer","pinned":false,"hidden":false,"mode":"md"},{"id":1440,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":42,"value":"chart_participation = html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1739,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":1317,"value":"viewof radios_type = Inputs.radio([\"Lyricists\", \"Composers\"], {\n label: \"Select one\",\n value: \"Lyricists\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"viewof align_b_comp = Inputs.toggle({\n label: \"Align to bottom\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"chart_composers = html`\n

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1252,"value":"### Style","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"colors = ({\n bkg: \"#1B1626\",\n text: \"#f2f2f2\",\n female: \"#FD7A4E\",\n male: \"#996CF8\",\n mixed: \"#A7B2BA\",\n axis_y_axis: \"#8C93A8\",\n axis_y_line: \"#1B1626\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"viewof canvas_w = Inputs.range([0, 100], {\n label: \"Plot width\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"### Chart functions","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"singers_chart = new Singers_en({\n data: data,\n type: \"performers\",\n id: \"plot_singers\",\n colors: colors,\n sorting: \"Ranking\",\n tooltip: singers_tooltip,\n language: \"en\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"composers_chart = new Composers_en({\n data: data,\n composers: composers.filter((d) => d.performer_composer !== true),\n type: \"composers\",\n id: \"plot_composers\",\n colors: colors,\n sorting: \"Ranking\",\n tooltip: composers_tooltip,\n language: \"en\",\n align_toggle: align_b_comp,\n view: radios_type\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"Tooltip functions with language options","pinned":false,"hidden":false,"mode":"md"},{"id":1474,"value":"class Singers_en extends Singers_only_chart {\n constructor(item) {\n // call parent constructor\n super(item);\n this.add_interaction();\n }\n\n add_interaction() {\n this.participation\n .selectAll(\".stars\")\n .on(\"mouseover\", (d) => this.mouseover_performers(d))\n .on(\"click\", (d) => this.mouseover_performers(d))\n .on(\"mouseleave\", (d) => this.mouseleave(d));\n }\n\n // include mouseOver interaction\n mouseover_performers(item) {\n this.participation\n .selectAll(`#${item.target.id}`)\n .classed(\"highlighted\", true);\n\n const entry = this.data.filter(\n (d) => d.year === +item.target.id.split(\"_\")[1]\n );\n\n singers_tooltip.update_text(entry[0], this);\n }\n\n mouseleave(item) {\n this.participation\n .selectAll(`#${item.target.id}`)\n .classed(\"highlighted\", false);\n\n singers_tooltip.hide();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"Master functions","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"### Tooltip functions","pinned":false,"hidden":false,"mode":"md"},{"id":915,"value":"composers_tooltip = new Tooltip({\n type: \"composers\",\n id: \"composers_tooltip\",\n name: \"composers\",\n colors: colors,\n language: \"en\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"singers_tooltip = new Tooltip({\n type: \"performers\",\n id: \"singers_tooltip\",\n name: \"singers\",\n colors: colors,\n language: \"en\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"### Other functions","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"resize = (window.onresize = function () {\n singers_chart.resize();\n composers_chart.resize();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"// From https://bl.ocks.org/mbostock/7555321\n\nfunction wrap(text, wrapWidth, yAxisAdjustment = 0) {\n text.each(function () {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")) - yAxisAdjustment,\n tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", `${dy}em`);\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > wrapWidth) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\")\n .text(word);\n }\n }\n });\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"data = FileAttachment(\"data@9.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"composers = FileAttachment(\"sp_composers_lyricists@6.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"Original data wrangle in another notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"import { sp } from \"0dff75036b3b0ce7\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}