31:Te2a,why = languageSelector === "en" ? md`# Why _Vitruvio, Francesco Borromini, Bernini, Leon Battista Alberti, Michelangelo, Raphael, Filippo Brunelleschi, Andrea Palladio, Alonso Cano, Eugene Viollet-le-Duc, Richard Morris, Otto Wagner, Antoni Gaudí, Victor Horta, Joseph Maria Olbrich, Hector Guimard, Frank Lloyd Wright, Charles Rennie Mackintosh, Adolf Loos, Walter Gropius, Erich Mendelsohn, Ludwig Mies van der Rohe, Alvar Aalto, Louis Kahn, Philip Johnson, Oscar Niemeyer, Eero Saarinen, Kenzo Tange, Jørn Utzon, Le Corbusier, Frank Lloyd Wright, Peter Eisenman, Richard Rogers, Richard Meier, Norman Foster, Renzo Piano, Marcel Breuer, Eliel Saarinen, Aldo Rossi, John Nash, Richard Buckminster Fuller, Frank O. Gehry, Shigeru Ban, Rem Koolhas._ Behind those names are some of the so-called "best architects" of all time. I have studied them with admiration. Still today, around 15 years after those lessons at university, pictures of their work come clearly to my mind. I also remember travelling around Europe seeking their works. They all appear on the city's guides. They are icons, superstars. **But also white, and male.** It's hard to believe what I'm saying, but I cannot recall a single **female architect** being named along the 3 years of "History of Architecture" lessons. I feel disappointed and sad. Their names and works are unknown by architecture students and professionals, let alone by society. This tiny piece is a small personal tribute to some of the creative women hidden in history. A small but precious selection, limited in space and time to Europe and the last century. **All of them are strong, inspiring amazing women.** --- ` : md`# Por qué _Vitruvio, Francesco Borromini, Bernini, Leon Battista Alberti, Michelangelo, Raphael, Filippo Brunelleschi, Andrea Palladio, Alonso Cano, Eugene Viollet-le-Duc, Richard Morris, Otto Wagner, Antoni Gaudí, Victor Horta, Joseph Maria Olbrich, Hector Guimard, Frank Lloyd Wright, Charles Rennie Mackintosh, Adolf Loos, Walter Gropius, Erich Mendelsohn, Ludwig Mies van der Rohe, Alvar Aalto, Louis Kahn, Philip Johnson, Oscar Niemeyer, Eero Saarinen, Kenzo Tange, Jørn Utzon, Le Corbusier, Frank Lloyd Wright, Peter Eisenman, Richard Rogers, Richard Meier, Norman Foster, Renzo Piano, Marcel Breuer, Eliel Saarinen, Aldo Rossi, John Nash, Richard Buckminster Fuller, Frank O. Gehry, Shigeru Ban, Rem Koolhas._ Detrás de estos nombres están algunos de los que conocemos como "mejores arquitectos" de todos los tiempos. Los he estudiado con admiración. Aunque tengo muy mala memoria, todavía hoy, 15 años después de aquellas clases en la universidad, me vienen a la cabeza imágenes de los trabajos de la gran mayoría de ellos. También recuerdo aprovechar mis viajes por Europa para buscar sus obras. Sus nombres aparecen en las guías de arquitectura de cada ciudad. Son iconos, super estrellas, **pero también comparten otro rasgo: son todos hombres blancos**. Me resulta increíble, pero no recuerdo haber estudiado a ni una sola **mujer arquitecta** en los 3 años que cursé la asignatura "Historia de la Arquitectura". Me produce tristeza y decepción. Si sus nombres y trabajos son desconocidos por profesionales de la arquitectura y estudiantes, cuánto más lo serán para la sociedad en general. Esta pequeña pieza es un tributo personal a algunas de las mujeres creativas escondidas en la historia. Una pequeña pero valiosa selección, limitada en el espacio y en el tiempo a la Europa del último siglo. **Todas ellas son mujeres valientes, extraordinarias e inspiradoras.** --- `32:T454,md`### Process notes **Saturday 27th**: The contest is a bit extended and I wanted to participate, in despite of having very little time. I deciced to research female pioneers of architecture hidden from history. It touches me :) After many hours of intense research on the web, I found it very difficult to spot an appropriate and diverse dataset. When I was on the edge of giving up, I came across [MoMoWo website](http://www.momowo.eu/) and started reading about their project "Women's Creativity Since the Modern Movement". It looked amazing. I downloaded and read many documents, found their [GIS database](http://www.momowo.polito.it) and decided to start with those materials, ideally completing them with a few more extra elements such as Wikipedia entries (some of them don't have one!!). I would like to go deeper into all this, but time is running out. **Sunday 28th**: Ok let's have some fun. I have very little time, but I still want to join the community to celebrate _Women through history_ and try my best to try to visualize something with the names and photos collected the day before. `33:T26d2,// References: // https://www.d3-graph-gallery.com/circular_barplot (d3 v4) // https://observablehq.com/@stefanreifenberg/circular-bar-plot // https://github.com/d3/d3-shape#arcs async function drawRadialChart() { const height = heightRadial; const x = xRadial; const y = yRadial; const svg = d3 .select("#radialChart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // CHART TITLE const titleChart = svg.append("g").attr("id", "titleChart"); const initPosit = 60; const diffPosit = 40; const fontSize = "40px"; titleChart .append("text") .attr("x", width / 2) .attr("y", initPosit) .text(locale[languageSelector].title.a) .style("font-size", fontSize) .style("text-anchor", "middle"); titleChart .append("text") .attr("x", width / 2) .attr("y", initPosit + diffPosit) .text(locale[languageSelector].title.b) .style("font-weight", 800) .style("font-size", fontSize) .style("fill", colorMain) .style("text-anchor", "middle"); titleChart .append("text") .attr("x", width / 2) .attr("y", initPosit + diffPosit * 2) .text(locale[languageSelector].title.c) .style("font-size", fontSize) .style("text-anchor", "middle"); titleChart .append("text") .attr("x", width / 2) .attr("y", initPosit + diffPosit * 3) .text(locale[languageSelector].title.d) .style("font-size", fontSize) .style("text-anchor", "middle"); // CENTRAL IMAGE const imgWidth = 200; const imgTest = d3 .select("#radialChart") .append("div") .attr("id", "imgProfile") .style("width", `${imgWidth}px`) .style("height", `${imgWidth}px`) .style("filter", "grayscale(100%)") .style("border-radius", "50%") .style("background-size", "cover") .style("background-position", "center center") .style("position", "absolute") .style("top", `${margin.top + height / 2 - imgWidth / 2}px`) .style("left", `${width / 2 - imgWidth / 2}px`) .append("p") .attr("class", "workInfoExtra") .text(""); // CENTRAL TEXT // If empty image: some central text visible const titleCenter = svg.append("g").attr("id", "centerText"); titleCenter .append("text") .attr("x", width / 2) .attr("y", margin.top + height / 2 - 25) .text(locale[languageSelector].centerText.a) .style("font-size", "19px") .style("dominant-baseline", "hanging") .style("text-anchor", "middle") .style("fill", colorMain); titleCenter .append("text") .attr("x", width / 2) .attr("y", margin.top + height / 2) .text(locale[languageSelector].centerText.b) .style("font-size", "16px") .style("font-weight", 800) .style("dominant-baseline", "hanging") .style("text-anchor", "middle") .style("fill", colorMain); titleCenter .append("text") .attr("x", width / 2) .attr("y", margin.top + height / 2 + 20) .text(locale[languageSelector].centerText.c) .style("font-size", "12px") .style("dominant-baseline", "hanging") .style("text-anchor", "middle") .style("fill", colorMain); // SVG CHART const chartElGroup = svg .append("g") .attr("id", "chartElGroup") .attr("transform", `translate(0,${margin.top})`); // RADIAL BARS const barsGroup = chartElGroup .append("g") .attr("id", "barsGroup") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); barsGroup .selectAll("path") .data(data) .enter() .append("path") .attr("data-id", (d) => d.id) .attr("fill", colorMain) .attr( "d", d3 .arc() .innerRadius((d) => y(+d["YEAR_B"])) .outerRadius((d) => y(+d["YEAR_D"] || 2021)) .startAngle((d) => x(d.id)) .endAngle((d) => x(d.id) + x.bandwidth()) .padAngle(0.15) .padRadius(innerRadius) ) .attr("opacity", 0) .transition() .duration(500) .delay((d, i) => i * 15) .attr("opacity", 1) .style("pointer-events", "none"); /////////// // NEW!! Aux elements for interaction const barsAux = chartElGroup .append("g") .attr("id", "barsAux") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); barsAux .selectAll("a") .data(data) .enter() .append("a") .attr("target", "_blank") .attr("href", (d) => d.wikipedia != "" && d.wikipedia != "x" ? d.wikipedia : null ) .append("path") .attr("class", "aux") .attr("data-id", (d) => d.id) .attr("fill", "transparent") .attr( "d", d3 .arc() .innerRadius(innerRadius) .outerRadius(outerRadius + 120) .startAngle((d) => x(d.id)) .endAngle((d) => x(d.id) + x.bandwidth()) .padAngle(0.01) .padRadius(innerRadius) ) .style("cursor", (d) => d.wikipedia != "" && d.wikipedia != "x" ? "pointer" : "auto" ) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); /////// // TIME RINGS const decades = [1920, 1940, 1960, 1980, 2000, 2020]; const constDates = chartElGroup.append("g").attr("id", "circlesDates"); constDates .selectAll("circle") .data(decades) .join("circle") .attr("cx", width / 2) .attr("cy", height / 2) .attr("r", (d) => y(d)) .style("fill", "none") .style("stroke", "white") .style("stroke-width", "2") .style("pointer-events", "none"); constDates .selectAll("text") .data(decades) .join("text") .attr("x", (d) => width / 2 + y(d) + 2) .attr("y", (d) => height / 2) .text((d) => d) .style("fill", colorMain) .style("opacity", 0.7) .style("font-size", "12px") .style("pointer-events", "none"); // WOMEN'S INFO const womenInfoGroup = chartElGroup .append("g") .attr("id", "womenInfo") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); womenInfoGroup .selectAll("g") .data(data) .enter() .append("g") .attr("class", "womanInfo") .attr("id", (d) => d.id) .attr("opacity", 0.8) .attr("transform", function (d) { const defunctionYear = +d["YEAR_D"] || 2021; const angleToRotate = ((x(d.id) + x.bandwidth() / 2) * 180) / Math.PI - 90; return `rotate(${angleToRotate})`; }) .attr("text-anchor", function (d) { return (x(d.id) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; }) .each(function (d) { const el = d3.select(this); // NAMES (anchors to wikipedia links) el.append("text") .attr("data-id", (d) => d.id) //.style('opacity', 0.5) .style("opacity", (d) => d.wikipedia != "" && d.wikipedia != "x" ? 0.7 : 0.3 ) .attr("x", function (d) { return (x(d.id) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? -y(+d["YEAR_D"] || 2021) - 10 : y(+d["YEAR_D"] || 2021) + 10; }) .attr("y", 0) .text((d) => `${d.NAME} ${d.SURNAME.charAt(0)}.`) .style("font-size", "15px") .style("text-decoration", (d) => d.wikipedia != "" && d.wikipedia != "x" ? "underline" : "none" ) .style("dominant-baseline", "middle") // Rotation to improve readability .attr("transform", function (d) { return (x(d.id) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; }); // LINES el.append("line") .attr("x1", 120) .attr("x2", y(myDomain[1]) + 100) .attr("y1", 0) .attr("y2", 0) .style("stroke", "black") .style("opacity", 0.7) .style("stroke-width", 0.15); // SELECTED WORK POINT el.append("circle") .attr("class", "selectedWorkPoint") .attr("cx", (d) => y(extractWorkYear(d))) .attr("cy", 0) .attr("r", 2.5) .style("fill", "black"); }) .style("pointer-events", "none"); // LEGEND // Just on desktop if (width >= 340) { d3.select("#barsGroup path") // First path .clone() .attr("id", "legendBar") .attr("transform", "translate(10, 475)rotate(-5)"); d3.select("#womenInfo g .selectedWorkPoint") // First group .clone() .attr("id", "legendInfo") .attr("transform", "translate(10, 445)"); const legend = svg .append("g") .attr("id", "legend") // Apply same transform as chart .attr("transform", "translate(" + width / 2 + "," + height + ")"); legend .append("line") .attr("x1", outerRadius - 107) .attr("x2", outerRadius - 107) .attr("y1", 133) .attr("y2", 153) .style("stroke", "black") .style("stroke-width", 0.5) .style("stroke-dasharray", 3); legend .append("line") .attr("x1", outerRadius - 29) .attr("x2", outerRadius - 29) .attr("y1", 100) .attr("y2", 130) .style("stroke", "black") .style("stroke-width", 0.5) .style("stroke-dasharray", 3); legend .append("text") .attr("x", outerRadius - 180) .attr("y", 155) .text(locale[languageSelector].legend.yearOfBirth) .style("font-size", "12px"); legend .append("text") .attr("x", outerRadius + 20) .attr("y", 135) .text(locale[languageSelector].legend.name) .style("opacity", 0.5) .style("font-size", "16px"); legend .append("text") .attr("x", outerRadius - 70) .attr("y", 75) .text(locale[languageSelector].legend.exampleWork.a) .style("font-size", "12px"); legend .append("text") .attr("x", outerRadius - 70) .attr("y", 90) .text(locale[languageSelector].legend.exampleWork.b) .style("font-size", "12px"); } }34:T721,// REF //https://observablehq.com/@tezzutezzu/world-history-timeline chart = { //const svg = d3.select(DOM.svg(width, height)); const svg = d3 .create('svg') .attr('height', height) .attr('width', width); const g = svg .append("g") .attr("transform", (d, i) => `translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(data) .enter() .append("g") .attr("class", "civ"); groups.attr("transform", (d, i) => `translate(0 ${y(i)})`); // Timeline axis - years svg .append("g") .attr( "transform", `translate(${margin.left} ${height - margin.bottom + 20})` ) .call(axisBottom); groups.each(function(d) { const bandWidth = y.bandwidth(); const el = d3.select(this); const bornYear = +d["YEAR_B"]; const defunctionYear = +d["YEAR_D"] || 2021; el.append('line') .attr("x1", x(myDomain[0])) .attr("x2", x(myDomain[1])) .attr("y1", bandWidth * 0.5) .attr("y2", bandWidth * 0.5) .style("stroke", "grey") .style('stroke-width', 0.5) .style('stroke-dasharray', 3); el.append('rect') .attr("x", d => x(bornYear)) .attr("height", bandWidth) .attr("width", d => x(defunctionYear) - x(bornYear)) .attr('fill', colorMain); el.append("text") //.text(d => `${d.NAME} ${d.SURNAME}`) .text(d => `${parseHtmlToText(d.NAME)}`) .attr("x", d => x(bornYear) - 5) .attr("y", bandWidth / 2) .attr("fill", "black") .style("text-anchor", "end") .style("dominant-baseline", "middle") .style('font-size', '1.5rem'); el.append('circle') .attr('cx', d => x(extractWorkYear(d))) .attr('cy', bandWidth / 2) .attr('r', 3) .style('fill', "black"); }); return svg.node(); }35:T25f8,wikipedia = ({ en: { "woman-0": "https://en.wikipedia.org/wiki/Sonia_Delaunay", "woman-1": "https://en.wikipedia.org/wiki/Gunta_St%C3%B6lzl", "woman-2": "https://en.wikipedia.org/wiki/Helena_Kottler_Vurnik", "woman-3": "https://en.wikipedia.org/wiki/Alma_Siedhoff-Buscher", "woman-4": "https://en.wikipedia.org/wiki/Marianne_Brandt", "woman-5": "x", "woman-6": "https://en.wikipedia.org/wiki/Margarete_Sch%C3%BCtte-Lihotzky", "woman-7": "https://en.wikipedia.org/wiki/Elisabeth_Scott", "woman-8": "https://en.wikipedia.org/wiki/Eileen_Gray", "woman-9": "x", "woman-10": "https://en.wikipedia.org/wiki/Aino_Aalto", "woman-11": "https://en.wikipedia.org/wiki/Maria_Cotescu", "woman-12": "https://en.wikipedia.org/wiki/Martta_Martikainen-Ypy%C3%A4", "woman-13": "https://en.wikipedia.org/wiki/Lilly_Reich", "woman-14": "https://en.wikipedia.org/wiki/Mary_Medd", "woman-15": "https://en.wikipedia.org/wiki/Susie_Cooper", "woman-16": "https://en.wikipedia.org/wiki/Judith_Ledeboer", "woman-17": "https://en.wikipedia.org/wiki/Liane_Zimbler", "woman-18": "https://en.wikipedia.org/wiki/Greta_Magnusson-Grossman", "woman-19": "x", "woman-20": "x", "woman-21": "https://en.wikipedia.org/wiki/Elsi_Borg", "woman-22": "https://en.wikipedia.org/wiki/Anni_Albers", "woman-23": "https://en.wikipedia.org/wiki/Elena_Luzzatto", "woman-24": "https://en.wikipedia.org/wiki/Lux_Guyer", "woman-25": "https://sl.wikipedia.org/wiki/Sonja_Lapajne-Oblak", "woman-26": "https://en.wikipedia.org/wiki/Alexandra_Paschalidou-Moreti", "woman-27": "https://it.wikipedia.org/wiki/Antonia_Campi", "woman-28": "https://en.wikipedia.org/wiki/Franca_Helg", "woman-29": "https://en.wikipedia.org/wiki/Jane_Drew", "woman-30": "https://en.wikipedia.org/wiki/Tamara_Katsenelenbogen", "woman-31": "https://en.wikipedia.org/wiki/Stefania_Filo_Speziale", "woman-32": "https://en.wikipedia.org/wiki/Alison_and_Peter_Smithson", "woman-33": "https://en.wikipedia.org/wiki/Lina_Bo_Bardi", "woman-34": "https://de.wikipedia.org/wiki/Hans_und_Annemarie_Hubacher", "woman-35": "https://en.wikipedia.org/wiki/Nanna_Ditzel", "woman-36": "x", "woman-37": "https://sl.wikipedia.org/wiki/Nives_Kalin_Vehovar", "woman-38": "https://en.wikipedia.org/wiki/Ivanka_Raspopovi%C4%87", "woman-39": "x", "woman-40": "https://it.wikipedia.org/wiki/Nanda_Vigo", "woman-41": "https://en.wikipedia.org/wiki/Cini_Boeri", "woman-42": "https://en.wikipedia.org/wiki/Ljiljana_Baki%C4%87", "woman-43": "https://de.wikipedia.org/wiki/Ralf_Sch%C3%BCler_und_Ursulina_Sch%C3%BCler-Witte", "woman-44": "x", "woman-45": "https://en.wikipedia.org/wiki/Margaret_Staal-Kropholler", "woman-46": "https://en.wikipedia.org/wiki/Maria_Jos%C3%A9_Marques_da_Silva", "woman-47": "x", "woman-48": "https://pl.wikipedia.org/wiki/Teresa_Kruszewska", "woman-49": "x", "woman-50": "https://en.wikipedia.org/wiki/Anna_Castelli_Ferrieri", "woman-51": "https://en.wikipedia.org/wiki/Sigrid_Kressmann-Zschach", "woman-52": "https://en.wikipedia.org/wiki/Charlotte_Perriand", "woman-53": "x", "woman-54": "https://hr.wikipedia.org/wiki/Hildegard_Auf-Frani%C4%87", "woman-55": "https://en.wikipedia.org/wiki/Simone_Guillissen", "woman-56": "x", "woman-57": "x", "woman-58": "https://en.wikipedia.org/wiki/Nathalie_Du_Pasquier", "woman-59": "https://en.wikipedia.org/wiki/Gae_Aulenti", "woman-60": "https://de.wikipedia.org/wiki/Verena_Dietrich", "woman-61": "https://en.wikipedia.org/wiki/Andr%C3%A9e_Putman", "woman-62": "https://en.wikipedia.org/wiki/%C3%89dith_Girard", "woman-63": "x", "woman-64": "https://en.wikipedia.org/wiki/Zaha_Hadid", "woman-65": "https://sv.wikipedia.org/wiki/Marianne_Dahlb%C3%A4ck", "woman-66": "https://en.wikipedia.org/wiki/Margarete_Heymann", "woman-67": "https://en.wikipedia.org/wiki/Maria_Teresa_Parpagliolo", "woman-68": "https://en.wikipedia.org/wiki/Jadwiga_Grabowska-Hawrylak", "woman-69": "https://en.wikipedia.org/wiki/Amanda_Levete", "woman-70": "https://en.wikipedia.org/wiki/Fiona_Raby", "woman-71": "x", "woman-72": "x", "woman-73": "https://en.wikipedia.org/wiki/Catherine_Furet", "woman-74": "https://pl.wikipedia.org/wiki/Irena_Bajerska", "woman-75": "https://en.wikipedia.org/wiki/Benedetta_Tagliabue", "woman-76": "https://en.wikipedia.org/wiki/Odile_Decq", "woman-77": "https://en.wikipedia.org/wiki/Patricia_Urquiola", "woman-78": "https://en.wikipedia.org/wiki/Mary_Reynolds_(landscape_designer)", "woman-79": "https://sv.wikipedia.org/wiki/Gunilla_Svensson", "woman-80": "x", "woman-81": "https://en.wikipedia.org/wiki/Manuelle_Gautrand", "woman-82": "x", "woman-83": "https://en.wikipedia.org/wiki/Sheila_O%27Donnell", "woman-84": "https://en.wikipedia.org/wiki/Christine_Conix", "woman-85": "https://en.wikipedia.org/wiki/Eva_Ji%C5%99i%C4%8Dn%C3%A1", "woman-86": "x", "woman-87": "x", "woman-88": "x", "woman-89": "https://nl.wikipedia.org/wiki/Jeanne_Dekkers", "woman-90": "https://en.wikipedia.org/wiki/Ilse_Crawford", "woman-91": "https://en.wikipedia.org/wiki/Carme_Pin%C3%B3s", "woman-92": "x", "woman-93": "x", "woman-94": "https://en.wikipedia.org/wiki/Victoria_Angelova", "woman-95": "x", "woman-96": "https://en.wikipedia.org/wiki/Hanne_Kj%C3%A6rholm", "woman-97": "https://en.wikipedia.org/wiki/Francine_Houben", "woman-98": "x", "woman-99": "x" }, es: { "woman-0": "https://es.wikipedia.org/wiki/Sonia_Delaunay", "woman-1": "https://es.wikipedia.org/wiki/Gunta_St%C3%B6lzl", "woman-2": "x", "woman-3": "https://es.wikipedia.org/wiki/Alma_Siedhoff-Buscher", "woman-4": "https://es.wikipedia.org/wiki/Marianne_Brandt", "woman-5": "x", "woman-6": "https://es.wikipedia.org/wiki/Margarete_Sch%C3%BCtte-Lihotzky", "woman-7": "https://es.wikipedia.org/wiki/Elisabeth_Whitworth_Scott", "woman-8": "https://es.wikipedia.org/wiki/Eileen_Gray", "woman-9": "x", "woman-10": "https://es.wikipedia.org/wiki/Aino_Aalto", "woman-11": "x", "woman-12": "https://es.wikipedia.org/wiki/Martta_Martikainen-Ypy%C3%A4", "woman-13": "https://es.wikipedia.org/wiki/Lilly_Reich", "woman-14": "x", "woman-15": "x", "woman-16": "x", "woman-17": "x", "woman-18": "https://es.wikipedia.org/wiki/Greta_Magnusson-Grossman", "woman-19": "https://es.wikipedia.org/wiki/Rita_Fern%C3%A1ndez_Queimadelos", "woman-20": "x", "woman-21": "https://es.wikipedia.org/wiki/Elsi_Naemi_Borg", "woman-22": "https://es.wikipedia.org/wiki/Anni_Albers", "woman-23": "https://es.wikipedia.org/wiki/Elena_Luzzatto", "woman-24": "https://es.wikipedia.org/wiki/Lux_Guyer", "woman-25": "x", "woman-26": "x", "woman-27": "x", "woman-28": "https://es.wikipedia.org/wiki/Franca_Helg", "woman-29": "https://es.wikipedia.org/wiki/Jane_Drew", "woman-30": "https://es.wikipedia.org/wiki/Tamara_Davydovna_Katsenelenbogen", "woman-31": "x", "woman-32": "https://es.wikipedia.org/wiki/Alison_y_Peter_Smithson", "woman-33": "https://es.wikipedia.org/wiki/Lina_Bo_Bardi", "woman-34": "x", "woman-35": "x", "woman-36": "x", "woman-37": "x", "woman-38": "x", "woman-39": "x", "woman-40": "x", "woman-41": "https://es.wikipedia.org/wiki/Cini_Boeri", "woman-42": "x", "woman-43": "x", "woman-44": "x", "woman-45": "https://es.wikipedia.org/wiki/Margaret_Kropholler-Staal", "woman-46": "https://es.wikipedia.org/wiki/Maria_Jos%C3%A9_Marques_da_Silva", "woman-47": "x", "woman-48": "x", "woman-49": "x", "woman-50": "https://es.wikipedia.org/wiki/Anna_Castelli_Ferrieri", "woman-51": "x", "woman-52": "https://es.wikipedia.org/wiki/Charlotte_Perriand", "woman-53": "x", "woman-54": "x", "woman-55": "x", "woman-56": "x", "woman-57": "x", "woman-58": "x", "woman-59": "https://es.wikipedia.org/wiki/Gae_Aulenti", "woman-60": "x", "woman-61": "https://es.wikipedia.org/wiki/Andr%C3%A9e_Putman", "woman-62": "x", "woman-63": "x", "woman-64": "https://es.wikipedia.org/wiki/Zaha_Hadid", "woman-65": "x", "woman-66": "x", "woman-67": "x", "woman-68": "x", "woman-69": "https://es.wikipedia.org/wiki/Amanda_Levete", "woman-70": "x", "woman-71": "x", "woman-72": "x", "woman-73": "x", "woman-74": "x", "woman-75": "https://es.wikipedia.org/wiki/Benedetta_Tagliabue", "woman-76": "https://es.wikipedia.org/wiki/Odile_Decq", "woman-77": "https://es.wikipedia.org/wiki/Patricia_Urquiola", "woman-78": "x", "woman-79": "x", "woman-80": "https://es.wikipedia.org/wiki/Blanca_Lle%C3%B3_Fern%C3%A1ndez", "woman-81": "https://es.wikipedia.org/wiki/Manuelle_Gautrand", "woman-82": "https://es.wikipedia.org/wiki/In%C3%AAs_Lobo", "woman-83": "https://es.wikipedia.org/wiki/Sheila_O%27Donnell", "woman-84": "https://es.wikipedia.org/wiki/Christine_Conix", "woman-85": "https://es.wikipedia.org/wiki/Eva_Ji%C5%99i%C4%8Dn%C3%A1", "woman-86": "x", "woman-87": "x", "woman-88": "x", "woman-89": "https://nl.wikipedia.org/wiki/Jeanne_Dekkers", "woman-90": "x", "woman-91": "https://es.wikipedia.org/wiki/Carme_Pin%C3%B3s", "woman-92": "x", "woman-93": "x", "woman-94": "x", "woman-95": "x", "woman-96": "x", "woman-97": "https://es.wikipedia.org/wiki/Francine_Houben", "woman-98": "x", "woman-99": "x" } })36:[{"id":"9faa5eee703011081935b88696a58809cfaf74216c493e9b436a5199e7f60428f159a0e2a510aa2a4fc3bec4038929e76fa7c555829e3cc4b67eeb6582ba0c73","href":"https://static.observableusercontent.com/files/9faa5eee703011081935b88696a58809cfaf74216c493e9b436a5199e7f60428f159a0e2a510aa2a4fc3bec4038929e76fa7c555829e3cc4b67eeb6582ba0c73","name":"WomenContestProcess01.gif","type":"image/gif","lastModified":1620324453546.736,"size":2633722},{"id":"51050924727391680c443fc26f0fad3d8d7b159aa9991af4cc637ec9c845f26ee5da0f99f618fa67362c335e0629e60270f2b5b4988160b4923196717b5c3abb","href":"https://static.observableusercontent.com/files/51050924727391680c443fc26f0fad3d8d7b159aa9991af4cc637ec9c845f26ee5da0f99f618fa67362c335e0629e60270f2b5b4988160b4923196717b5c3abb","name":"Sketches_C.jpg","type":"image/jpeg","lastModified":1620468481818.3,"size":449864},{"id":"fe64377c72e5b5b40f032b76ffd189a02d819d8dcd8648213f79c2bd11baf9a85c7df845a06bce31ce9143ca355256eec49f9949cd7bbf738fcb9190e5805d45","href":"https://static.observableusercontent.com/files/fe64377c72e5b5b40f032b76ffd189a02d819d8dcd8648213f79c2bd11baf9a85c7df845a06bce31ce9143ca355256eec49f9949cd7bbf738fcb9190e5805d45","name":"Sketches_A.jpg","type":"image/jpeg","lastModified":1620468481741.644,"size":434474},{"id":"388bd555886b16a98a3888548582029ece06ad10522776030605650d63210674fcaf64798c414900e6b940e170bac8ae52b703bb0b8d846c3cb8d3893fc97a0b","href":"https://static.observableusercontent.com/files/388bd555886b16a98a3888548582029ece06ad10522776030605650d63210674fcaf64798c414900e6b940e170bac8ae52b703bb0b8d846c3cb8d3893fc97a0b","name":"Sketches_B.jpg","type":"image/jpeg","lastModified":1620468481769.042,"size":400182}] 2f:{"title":"Some of the WOMEN ARCHITECTS AND DESIGNERS I didn't hear about at university","cells":[{"id":1661,"value":"md`# Some of the WOMEN ARCHITECTS AND DESIGNERS I didn't hear about at university\nEntry for the [Women's History Month dataviz contest](https://observablehq.com/@observablehq/womens-history-month-dataviz-contest)\n\nData source: [MoMoWo](http://www.momowo.eu/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"viewof languageSelector = Radio([\"en\", \"es\"], {\n label: md`**New!** Language`,\n value: \"en\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1770,"value":"languageSelector === \"en\"\n ? md`**New!** Click on their names to explore their Wikipedia entries.`\n : md`**Nuevo!** Haz click en sus nombres para explorar sus entradas en Wikipedia.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"chart2 = {\n yield html`\n ${styles}\n

`;\n drawRadialChart();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1739,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"function onMouseOver(event, d, i) {\n const myImgProfile = d.imgProfile;\n const myId = d.id;\n //console.log(myImgProfile);\n\n d3.select('#barsGroup')\n .selectAll(`path:not(path[data-id=${myId}])`)\n .style('opacity', 0.5);\n\n d3.select('#womenInfo')\n .selectAll(`text[data-id=${myId}]`)\n .style('opacity', 1);\n\n d3.select('#womenInfo')\n .selectAll(`text:not(text[data-id=${myId}])`)\n .style('opacity', 0.2);\n\n // Update bckg img\n d3.select('#imgProfile')\n .style(\n 'background-image',\n `url(https://carmen-tm.github.io/WomenArchitectsTable/assets/${myImgProfile})`\n )\n .select('p')\n .text(extractWorkNAME(d));\n\n d3.select(this).style('opacity', 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"function onMouseOut(event, d, i) {\n d3.select(this).style('opacity', 0.8);\n\n d3.select('#barsGroup')\n .selectAll('path')\n .style(\"opacity\", 1);\n\n d3.select('#womenInfo')\n .selectAll(`text`)\n .style('opacity', d =>\n d.wikipedia != \"\" && d.wikipedia != \"x\" ? 0.7 : 0.3\n );\n\n d3.select('#imgProfile')\n .style('background-image', `none`)\n .select('p')\n .text('');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"md`### Data exploration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof search03 = Search(\n architectsAndDesigners_Features.map(d => d.properties),\n {\n placeholder: \"Buscador designers_2Features\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof table03 = Table(search03, {\n //rows: 110,\n columns: [\n \"NAME\",\n \"SURNAME\",\n \"YEAR_B\",\n \"YEAR_D\",\n //\"IMG_SRC_D\",\n \"WORKS_NA_2\"\n //\"WORK_PREC\"\n ],\n format: {\n //culmen_length_mm: x => x.toFixed(1),\n //culmen_depth_mm: x => x.toFixed(1),\n //sex: x => x === \"MALE\" ? \"M\" : x === \"FEMALE\" ? \"F\" : \"\"\n NAME: x => html`${x}`,\n SURNAME: x => html`${x}`,\n IMG_SRC_D: x => html`${x}`,\n //IMAGE: x => html`${x}`,\n WORKS_NA_2: x => html`${x}`,\n //WORK_PREC: x => html`${x}`,\n WORKS_IMG1: x => html`${x}`\n //html`${x}`,\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1821,"value":"md`**New!** Process sketches ✍🏻`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"html`\n

\n ${await FileAttachment(\"Sketches_A.jpg\").image()}\n

\n\n

\n ${await FileAttachment(\"Sketches_B.jpg\").image()}\n

\n\n

\n ${await FileAttachment(\"Sketches_C.jpg\").image()}\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1919,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"md`### First approach: a simple timeline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"md`### Final approach: going radial`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"md`**New!** Time-lapse process captures 🙃`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"processGIF = FileAttachment(\"WomenContestProcess01.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"md`### Improvements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"md`\n\n**Update** after the [contest resolution](https://observablehq.com/@observablehq/announcing-the-womens-history-month-dataviz-contest-winne) with some extra improvements :)\n - [x] Improve hover interaction: I have added auxiliar shapes that cover bigger areas for interactions, instead of using just the text names areas.\n - [x] Language ES/EN toggle: done, via radio btn.\n - [x] Search for each woman's wikipedia entry and implement the interactions on click with that info.\n - [x] Compile some visual info about the process: sketches, screenshots?\n - [x] Fix legend!!\n - [ ] Small walk around / autoplay?\n - [ ] Responsive?\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"json_architectsAndDesigners_URL = \"https://gist.githubusercontent.com/carmen-tm/6a679d25155e44fb05deb71a75fafa17/raw/ad5f5fef2f842258210754ae3ac442dc466bef4b/json_Designers_2.geojson\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"json_architectsAndDesigners = (await fetch(\n json_architectsAndDesigners_URL\n)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"architectsAndDesigners_Features = json_architectsAndDesigners.features","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"data = table03\n .map((d, i) => {\n d.NAME = parseHtmlToText(d.NAME);\n d.SURNAME = parseHtmlToText(d.SURNAME);\n d.workPiece = extractWorkYear(d);\n d.id = `woman-${i}`;\n d.imgProfile = getImg(d.IMG_SRC_D);\n d.wikipedia = wikipedia[languageSelector][`woman-${i}`];\n return d;\n })\n //.sort((a, b) => d3.ascending(a.NAME, b.NAME)) // By name\n //.sort((a, b) => b.YEAR_B - a.YEAR_B) // By bird\n //.sort((a, b) => extractWorkYear(a) - extractWorkYear(b)) // By selected piece\n .sort((b, a) => extractWorkYear(a) - extractWorkYear(b)) // By selected piece","pinned":true,"hidden":false,"mode":"ojs"},{"id":1757,"value":"viewof dataTable = Table(data, {\n columns: [\"NAME\", \"SURNAME\", \"MARRIEDN\", \"workPiece\", \"id\", \"wikipedia\"],\n sort: \"workPiece\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"md`### Handful functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"extractWorkYear = d => +d.WORKS_NA_2.split(',')[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1575,"value":"extractWorkNAME = d => parseHtmlToText(d.WORKS_NA_2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"getImg = function(string) {\n //console.log(string);\n const array = string.split('/');\n const imgName = array[array.length - 1].slice(0, -2);\n\n return imgName;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"workYear = data.map(d => +d.WORKS_NA_2.split(',')[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"// Ref: https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/\nparseHtmlToText = d => d.replace(/(<([^>]+)>)/gi, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"margin = ({ top: 160, right: 10, bottom: 50, left: 70 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"height = 3000","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"heightRadial = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"myDomain = [1850, 2021]","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"md`### B. Timeline Radials`","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"xRadial = d3\n .scaleBand()\n .range([Math.PI / 2 + 0.04, Math.PI / 2 + 2 * Math.PI - 0.1])\n .align(0)\n .domain(data.map(d => d.id))","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"innerRadius = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"//outerRadius = Math.min(width, height) / 2\nouterRadius = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"yRadial = d3\n .scaleLinear()\n .range([innerRadius, outerRadius])\n .domain(myDomain)","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`### A. Timeline chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"x = d3\n .scaleLinear()\n .domain(myDomain)\n .range([0, width - margin.left - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"y = d3\n .scaleBand()\n .domain(d3.range(data.length))\n .range([0, height - margin.bottom - margin.top])\n .padding(0.4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"axisBottom = d3\n .axisBottom(x)\n .tickPadding(2)\n .tickFormat(d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"md`### Some styles `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"colorMain = '#E16767'","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"colorBckg = \"#f0f0f0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"styles = html`\n \n \n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"md`### Language `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"locale = ({\n en: {\n title: {\n a: \"Some of the\",\n b: \"WOMEN ARCHITECTS & DESIGNERS\",\n c: \"I didn't hear about\",\n d: \"at University\"\n },\n centerText: {\n a: \"100 years\",\n b: \"100 INSPIRING WOMEN\",\n c: \"just in Europe\"\n },\n legend: {\n yearOfBirth: \"Year of birth\",\n name: \"Name\",\n exampleWork: {\n a: \"One example of\",\n b: \"her artistic work\"\n }\n }\n },\n es: {\n title: {\n a: \"Algunas de las\",\n b: \"MUJERES ARQUITECTAS & DISEÑADORAS\",\n c: \"de las que no escuché hablar\",\n d: \"en la universidad\"\n },\n centerText: {\n a: \"100 años\",\n b: \"100 MUJERES INSPIRADORAS\",\n c: \"solo en Europa\"\n },\n legend: {\n yearOfBirth: \"Año de nacimiento\",\n name: \"Nombre\",\n exampleWork: {\n a: \"Un ejemplo de su\",\n b: \"trabajo artístico\"\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`### Appendix `","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"import {\n Radio,\n Toggle,\n Checkbox,\n Range,\n Select,\n Text,\n Table,\n Search\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}