31:T344a,// Needs to be async function to be able to load file attachements inside async function createChart(myDataset, chartNumber) { const svg = d3 .create("svg") .attr("id", chartNumber) .attr("viewBox", [0, 0, myWidth, height]); const x = d3 .scaleTime() .domain(myDateDomainNice) .range([margin.left, myWidth - margin.right]) .nice(); const unitSize = (+x.range()[1] - +x.range()[0]) / 12; const y = d3 .scaleLinear() .domain(d3.extent(myDataset, d => d.y)) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr('class', 'xAxis') .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(myWidth / 50) .tickFormat(isMobile ? formatDateShort : formatDateComplete) ) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick text") .attr('dx', unitSize / 2) .style("text-anchor", "middle") ); const yAxis = g => g .attr('class', 'yAxis') .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickSize(isMobile ? 2 : 5) .tickFormat(d => (isMobile ? formatMoneyReduced(d) : formatMoney(d))) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick text").style('font-size', "0.6rem")) .call(g => g .append("text") .attr("class", "axisYTitle") .style("font-size", isMobile ? "0.6rem" : "0.75rem") .attr("x", isMobile ? -margin.left + 10 : -margin.left + 15) .attr("y", isMobile ? margin.top - 10 : margin.top - 20) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(dataLocale[languageSelector].titleY) ); const grid = g => g .attr("stroke", colorQCLOOrange) .attr("stroke-opacity", 0.2) .call(g => g .append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) ) .call(g => g .append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right) ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(grid); // Highlight estado de alarma const bandTime = svg.append("g"); bandTime .append("rect") .attr("x", x(estadoAlarmaRange[0])) .attr("y", margin.top) .attr("width", x(estadoAlarmaRange[1]) - x(estadoAlarmaRange[0])) .attr("height", height - margin.top - margin.bottom) .style("fill", colorQCLOOrange) .attr("fill-opacity", 0.1); bandTime .append("text") .attr("text-anchor", "end") .attr("font-size", isMobile ? "0.6rem" : "0.7rem") .attr("x", x(estadoAlarmaRange[0])) .attr("y", margin.top) .attr("dy", -5) .attr("dx", -5) .style("fill", colorQCLOOrange) .attr("fill-opacity", 0.6) .text(dataLocale[languageSelector].covidRange) .attr("transform", `rotate(-90 ${x(estadoAlarmaRange[0])} ${margin.top})`); const myMaxDataByChart = d3.max(myDataset, d => +d.amount); let myMinDataByChart = d3.min(myDataset, d => +d.amount); if (chartNumber === "chart01") { myMinDataByChart = 120; } else if (chartNumber === "chart02") { myMinDataByChart = 10; } else if (chartNumber === "chart03") { myMinDataByChart = 200; } else if (chartNumber === "chart04") { myMinDataByChart = 100; } // Circles size based on area const scaleCircles = d3 .scaleSqrt() .domain([myMinDataByChart, myMaxDataByChart]) .range([3, 15]); svg .append("g") .selectAll("circle") .data(myDataset) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .style("fill-opacity", 0.6) .attr("fill", colorQCLOOrange) .attr("fill", d => d.winning_party_name.toUpperCase().includes("ABBOTT") || d.winning_party_name.toUpperCase().includes("ABBOT") ? colorAbbott : colorQCLOOrange ) .style( "mix-blend-mode", colorBlendEffect === "none" ? null : colorBlendEffect ) .attr("r", circlesScaled ? d => scaleCircles(d.amount) : 3) .style("cursor", "pointer") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); let myTable; if (chartNumber === "chart01") { myTable = table01; } else if (chartNumber === "chart02") { myTable = table02; } else if (chartNumber === "chart03") { myTable = table03; } else if (chartNumber === "chart04") { myTable = table04; } // INTERACTIVE FILTERING // Higlight search results on chart if (myTable.length !== myDataset.length) { const highlightedEl = svg .selectAll('circle') .filter(d => myTable.includes(d)) .attr("fill", "black"); } //////// LEGEND const valuesLegend = [myMinDataByChart, myMaxDataByChart]; const xPositLegend = isMobile ? myWidth - 110 : myWidth - 180; const yPositLegend = isMobile ? 300 : 285; const xLabel = xPositLegend + 30; // Bubbles const legend = svg.append("g").attr("class", "circlesLegend"); legend .selectAll("circle") .data(valuesLegend) .join("circle") .attr("cx", xPositLegend) .attr("cy", d => yPositLegend - scaleCircles(d)) .attr("r", d => scaleCircles(d)) .style("fill", "none") .attr("stroke", colorQCLOOrange); // Lines legend .selectAll("line") .data(valuesLegend) .join("line") .attr("x1", d => xPositLegend + scaleCircles(d)) .attr("x2", xLabel) .attr("y1", d => yPositLegend - scaleCircles(d)) .attr("y2", d => yPositLegend - scaleCircles(d)) .style("stroke-dasharray", "2") .attr("stroke", colorQCLOOrange) .style("opacity", 0.6); // Texts legend .selectAll("text") .data(valuesLegend) .join("text") .attr("x", xLabel) .attr("y", d => yPositLegend - scaleCircles(d) + 3) .attr("dx", 2) .text(d => `${format(d)} u`) .style("fill", colorQCLOOrange) .style("font-size", "0.6rem"); // Amount length legend .append("text") .attr("x", xPositLegend) .attr("y", yPositLegend - 35) .text(d => `${dataLocale[languageSelector].legendSize}`) .style("fill", colorQCLOOrange) .style("font-size", "0.7rem") .style("font-weight", 800) .style("text-anchor", "middle"); // Abbot special case: annotation if (chartNumber === "chart04" && subcategories04All == "Pruebas antígenos") { const abbotAnnotation = svg .append('text') .attr('fill', colorAbbott) .style('font-size', '0.7rem') .attr('y', isMobile ? y(9) - 30 : y(7) + 10); abbotAnnotation .append('tspan') .attr( 'x', isMobile ? x(abbotAnnotationDate) - 5 : x(abbotAnnotationDate) + 5 ) .text(dataLocale[languageSelector].abbottNote1); abbotAnnotation .append('tspan') .attr( 'x', isMobile ? x(abbotAnnotationDate) - 5 : x(abbotAnnotationDate) + 5 ) .attr('dy', 15) .text(dataLocale[languageSelector].abbottNote2); svg .append('line') .attr("stroke", colorAbbott) .attr('x1', x(abbotAnnotationDate)) .attr('y1', y(4.8)) .attr('x2', x(abbotAnnotationDate)) .attr('y2', isMobile ? y(9.5) : y(7)) .style("stroke-dasharray", "2") .style("opacity", 0.6); } //////// TOOLTIP const tooltipWidth = isMobile ? myWidth - 5 : 310; const tooltipHeight = 160; const yPositTooltip = isMobile ? 50 : margin.top + 30; // Fixed tooltop const fixedTooltip = svg .append("rect") .attr('class', 'tooltipBackground') .attr('x', isMobile ? 5 : myWidth - margin.right - tooltipWidth - 20) .attr('y', yPositTooltip) .attr("height", tooltipHeight) .attr("width", tooltipWidth) .attr("fill", colorQCLOYellowLight) .attr("fill-opacity", 0.5) .attr("pointer-events", "none"); const iconContractWidth = 40; const iconContractHeight = 40; const scaleFactorIconContract = 1.3; // Different icon on each chart const iconTooltip = svg .append("image") .attr("class", "tooltipIcon") .attr('width', iconContractWidth * scaleFactorIconContract) .attr('height', iconContractWidth * scaleFactorIconContract) .attr( 'x', isMobile ? myWidth - margin.right - 50 : myWidth - margin.right - 80 ) .attr('y', yPositTooltip - 20) .attr("opacity", 0.9); // SVG title const titleSvg = svg .append("text") .classed("svgTitle", true) .attr('font-size', "1rem") .attr("font-weight", 600) .attr("text-anchor", "end") .attr("fill", colorCivioMainBlue) .attr('y', yPositTooltip - 5); titleSvg .append("tspan") .attr( 'x', isMobile ? myWidth - margin.right - 60 : myWidth - margin.right - 90 ) .attr('dy', 0) .attr("dx", 10) .text(dataLocale[languageSelector].titlePrices); const chartElement = titleSvg .append("tspan") .attr("fill", colorQCLOOrange) .attr('font-size', isMobile ? "1.12rem" : "1.20rem") .attr( 'x', isMobile ? myWidth - margin.right - 50 : myWidth - margin.right - 80 ) .attr('dy', 25) .attr("dx", -10); // Line details const lineDetail = svg .append("line") .attr('stroke', colorQCLOYellow) .attr('stroke-width', '4px') .attr('y1', yPositTooltip + 30) .attr('y2', yPositTooltip + 30); if (chartNumber === "chart01") { // Image iconTooltip.attr("href", await FileAttachment("icon-masks.svg").url()); // Title chartElement.text(dataLocale[languageSelector].masks); lineDetail .attr( 'x1', isMobile ? myWidth - margin.right - 140 : myWidth - margin.right - 200 ) .attr( 'x2', isMobile ? myWidth - margin.right - 80 : myWidth - margin.right - 120 ); } else if (chartNumber === "chart02") { // Image iconTooltip.attr("href", await FileAttachment("icon-gel.svg").url()); // Title chartElement.text(dataLocale[languageSelector].gel); lineDetail .attr('x1', myWidth - margin.right - 200) .attr('x2', myWidth - margin.right - 120); } else if (chartNumber === "chart03") { // Image iconTooltip.attr("href", await FileAttachment("icon-gloves.svg").url()); // Title chartElement.text(dataLocale[languageSelector].gloves); lineDetail .attr('x1', myWidth - margin.right - 170) .attr('x2', myWidth - margin.right - 100); } else if (chartNumber === "chart04") { // Image iconTooltip.attr("href", await FileAttachment("icon-tests.svg").url()); // Title chartElement.text(dataLocale[languageSelector].tests); // Line lineDetail .attr( 'x1', isMobile ? myWidth - margin.right - 90 : myWidth - margin.right - 140 ) .attr( 'x2', isMobile ? myWidth - margin.right - 60 : myWidth - margin.right - 90 ); } // Tooltip titles const toolTipText = svg .append("g") .attr("class", "tooltipData") .attr('font-size', "0.72rem") .attr("fill", colorCivioMainBlue) .attr("text-anchor", "start"); const offsetTextsTooltip = 15; // Tooltip answers const tooltipAdminData = toolTipText .append("text") .classed("tooltipAdminData", true) .attr("font-weight", 600) .attr( 'x', isMobile ? myWidth - margin.right - tooltipWidth + 20 : myWidth - margin.right - tooltipWidth - 10 ) .attr('y', yPositTooltip + 45); const tooltipProductData = toolTipText .append("text") .classed("tooltipProductData", true) .attr( 'x', isMobile ? myWidth - margin.right - tooltipWidth + 20 : myWidth - margin.right - tooltipWidth - 10 ) .attr('y', yPositTooltip + 102); const tooltipAgencyData = toolTipText .append("text") .classed("tooltipAgencyData", true) .attr( 'x', isMobile ? myWidth - margin.right - tooltipWidth + 20 : myWidth - margin.right - tooltipWidth - 10 ) .attr('y', yPositTooltip + 102); // Interaction text const interactionText = svg .append("text") .attr("class", "interactionNote") .attr('font-size', "0.85rem") .attr("fill", colorCivioMainBlue) .attr("text-anchor", "middle") .attr('y', yPositTooltip + 80); const note1 = interactionText .append("tspan") .attr('x', myWidth - margin.right - tooltipWidth / 2) .attr('dx', isMobile ? 0 : -20) .text( isMobile ? dataLocale[languageSelector].interactionNote1Mobile : dataLocale[languageSelector].interactionNote1Desktop ); const note2 = interactionText .append("tspan") .attr('x', myWidth - margin.right - tooltipWidth / 2) .attr('dx', isMobile ? 0 : -20) .attr('dy', 20) .text( isMobile ? dataLocale[languageSelector].interactionNote2Mobile : dataLocale[languageSelector].interactionNote2Desktop ); return svg.node(); }32:T1a47,function onMouseOver(event, d, i) { d3.select(this).style('fill-opacity', 1); const myChart = d3.select(this.parentNode.parentNode).attr("id"); // Hide interation notes d3.select(`#${myChart}`) .select(".interactionNote") .style("visibility", "hidden"); // Show all info d3.selectAll(".tooltipData").style("visibility", "visible"); /////// WHO // Splitting big texts const splittedContractingNameArray = wordWrap(d.contracting_party_name, 40); // Filling the fixed tooltip const contractingText = d3.select(`#${myChart}`).select(".tooltipAdminData"); const contractingTextX = contractingText.attr('x'); contractingText .selectAll('tspan') .data(splittedContractingNameArray) .join('tspan') .attr('dy', 13) .attr('x', contractingTextX) .text(d => d); /////// WHAT // If 0.1 units (fake, created on the data load process) then show Acuerdo marco details. const productInfo = function() { if (languageSelector === "es") { return d.amount == 0.1 ? createMarcoTexts(myChart) : createProductInfo(myChart); } else { return d.amount == 0.1 ? createMarcoTextsTranslated(myChart) : createProductInfoTranslated(myChart); } }; // Custom units depending on subcategories function createProductInfo(myChart) { if (myChart === "chart01") { // 01 MASCARILLAS // 500 Mascarillas FFPP2 a 0.50 € cada una const text = `${format(d.amount)} ${d.cat} ${d.subcat} a ${formatMoney( d.y )} cada una.`; return text; } else if (myChart === "chart02") { // 02 GELES // 500 listros de gel a 0.50 € cada uno const text = `${format(d.amount)} litros de gel a ${formatMoney( d.y )} cada uno.`; return text; } else if (myChart === "chart03") { // 03 GUANTES // 500 guantes de nitrilo a 0.50 € cada uno return `${format(d.amount)} ${d.cat} de ${d.subcat} a ${formatMoney( d.y )} cada uno.`; } else if (myChart === "chart04") { // 04 TESTS // 500 Pruebas de antígenos a 0.50 € cada una const text = d.subcat == "Pruebas antígenos" ? `${format(d.amount)} Pruebas de antígenos a ${formatMoney( d.y )} cada una.` : `${format( d.amount )} Bastoncillos y tubos para tomar muestras a ${formatMoney( d.y )}/u.`; return text; } } // Custom units depending on subcategories function createMarcoTexts(myChart) { if (myChart === "chart01") { // 01 MASCARILLAS const text = `Oferta de acuerdo marco. ${d.cat} ${ d.subcat } a ${formatMoney(d.y)}/u.`; return text; } else if (myChart === "chart02") { // 02 GELES const text = `Oferta de acuerdo marco. El litro de gel a ${formatMoney( d.y )}/u.`; return text; } else if (myChart === "chart03") { // 03 GUANTES return `Oferta de acuerdo marco. ${d.cat} de ${d.subcat} a ${formatMoney( d.y )}/u.`; } else if (myChart === "chart04") { // 04 TESTS const text = d.subcat == "Pruebas antígenos" ? `Oferta de acuerdo marco. Pruebas de antígenos a ${formatMoney( d.y )}/u.` : `Oferta de acuerdo marco. Bastoncillos y tubos para tomar muestras a ${formatMoney( d.y )}/u.`; return text; } } // ENGLISH VERSION // Custom units depending on subcategories (translated) function createProductInfoTranslated(myChart) { if (myChart === "chart01") { // 01 MASCARILLAS // 500 FFPP2 masks for €1.40 each const mySubcat = d.subcat === "Quirúrgicas" ? "Surgical" : d.subcat; const text = `${format(d.amount)} ${mySubcat} masks for ${formatMoney( d.y )} each.`; return text; } else if (myChart === "chart02") { // 02 GELES // 500 litres of hand gel for 1.40€/litre const text = `${format(d.amount)} litres of hand gel for ${formatMoney( d.y )}/litre.`; return text; } else if (myChart === "chart03") { // 03 GUANTES // 500 nitrile gloves for 0.50€ each return `${format(d.amount)} Nitrile gloves for ${formatMoney(d.y)} each.`; } else if (myChart === "chart04") { // 04 TESTS // 500 Pruebas de antígenos a 0.50 € cada una const text = d.subcat == "Pruebas antígenos" ? `${format(d.amount)} Antigen tests for ${formatMoney(d.y)} each.` : `${format(d.amount)} Swabs and PCR tubes for ${formatMoney( d.y )}/u.`; return text; } } // Custom units depending on subcategories (translated) function createMarcoTextsTranslated(myChart) { if (myChart === "chart01") { // 01 MASCARILLAS const text = `Framework agreement. ${d.subcat} Masks for ${formatMoney( d.y )}/u.`; return text; } else if (myChart === "chart02") { // 02 GELES const text = `Framework agreement. ${formatMoney( d.y )}/litre of hand gel.`; return text; } else if (myChart === "chart03") { // 03 GUANTES return `Framework agreement. ${d.subcat} ${d.cat} for ${formatMoney( d.y )}/u.`; } else if (myChart === "chart04") { // 04 TESTS const text = d.subcat == "Pruebas antígenos" ? `Framework agreement. Antigen tests for ${formatMoney(d.y)}/u.` : `Framework agreement. Swabs and PCR tubes for ${formatMoney( d.y )}/u.`; return text; } } d3.select(`#${myChart}`) .select(".tooltipProductData") .text(productInfo); /////// FROM WHO /* // Trimming big texts const length = 35; const string = d.winning_party_name; const trimmedAgencyNameArray = string.length > length ? string.substring(0, length - 3) + "..." : string; console.log(string); console.log(trimmedAgencyNameArray); // Filling the fixed tooltip const agencyText = d3 .select(`#${myChart}`) .select(".tooltipAgencyData") .text(`Proveedor: ${trimmedAgencyNameArray}`); */ // Splitting big texts const splittedAgencyArray = wordWrap(d.winning_party_name, 32); // Filling the fixed tooltip const agencyText = d3.select(`#${myChart}`).select(".tooltipAgencyData"); const agencyTextX = agencyText.attr('x'); agencyText .selectAll('tspan') .data(splittedAgencyArray) .join('tspan') .attr('dy', 15) .attr('x', agencyTextX) .text((d, i) => i == 0 ? `${dataLocale[languageSelector].tooltipAgency} ${d}` : d ); }33:T7d3,dataLocale = ({ en: { titleY: "↑ Unit price", tooltipAgency: "Supplier: ", titlePrices: "Unit prices", titleOf: "of", masks: "FACE MASKS", gel: "HYDROALCOHOLIC GEL", gloves: "NITRILE GLOVES", tests: "TESTS", covidRange: "State of alarm I", contracts: "awardings", legendSize: "Units", interactionNote1Desktop: "Hover over the dots to see", interactionNote2Desktop: "the details of its contract", interactionNote1Mobile: "Touch each dot to see", interactionNote2Mobile: "the details of its contract", selectorMasksLabel: "Select a
mask type:", selectorTestsLabel: "Select a
type of test:", selectorMasks1: "FFP2", selectorMasks2: "FFP3", selectorMasks3: "KN95", selectorMasks4: "Surgical", selectorTest1: "Antigen tests", selectorTest2: "Swabs and PCR tubes", abbottNote1: "In turquoise,", abbottNote2: "Abbott's tests" }, es: { titleY: "↑ Precio unitario", tooltipAgency: "Proveedor: ", titlePrices: "Precios unitarios", titleOf: "de", masks: "MASCARILLAS", gel: "GEL HIDROALCOHÓLICO", gloves: "GUANTES de NITRILO", tests: "TESTS", covidRange: "Estado de alarma I", contracts: "adjudicaciones", legendSize: "Unidades", interactionNote1Desktop: "Pasa por encima de cada punto", interactionNote2Desktop: "para ver más detalles de su contrato", interactionNote1Mobile: "Toca cada punto para ver", interactionNote2Mobile: "más detalles de su contrato", selectorMasksLabel: "Selecciona un
tipo de mascarilla:", selectorTestsLabel: "Selecciona un
tipo de test:", selectorMasks1: "FFP2", selectorMasks2: "FFP3", selectorMasks3: "KN95", selectorMasks4: "Quirúrgicas", selectorTest1: "Pruebas de antígenos", selectorTest2: "Bastoncillos y tubos para tomar muestras", abbottNote1: "En turquesa, los", abbottNote2: "tests de Abbott" } })34:T686,style = html` `35:[{"id":"4bf2f5f98033851a658113a322516fd614d90d3dea30c8595fea41a421d82433163691f6846f7d5928b177724a92078b5c8572ffeb59dcf65c951846e4c49e9b","href":"https://static.observableusercontent.com/files/4bf2f5f98033851a658113a322516fd614d90d3dea30c8595fea41a421d82433163691f6846f7d5928b177724a92078b5c8572ffeb59dcf65c951846e4c49e9b","name":"test@19.csv","type":"text/csv","lastModified":1615202447359.991,"size":966230},{"id":"54b3dbfa5e93b670f5638a367dedb9c136a0565a8e5204607f970f6f05fa3018480169c09b6b0aecaf4abfc92f0fce160559520cc04320cdb966a8bbe13e012c","href":"https://static.observableusercontent.com/files/54b3dbfa5e93b670f5638a367dedb9c136a0565a8e5204607f970f6f05fa3018480169c09b6b0aecaf4abfc92f0fce160559520cc04320cdb966a8bbe13e012c","name":"unit_prices.csv","type":"text/csv","lastModified":1615364582634.667,"size":182950},{"id":"e2c2dd7feef6ce4f0268e38c0fec0fa5dd353b09b22f4ec7e1c9da734efd1791254b24dd97923e79186af7f40efeb5835c468e5087b25fceb4589840c6f95fb5","href":"https://static.observableusercontent.com/files/e2c2dd7feef6ce4f0268e38c0fec0fa5dd353b09b22f4ec7e1c9da734efd1791254b24dd97923e79186af7f40efeb5835c468e5087b25fceb4589840c6f95fb5","name":"test-21.csv","type":"text/csv","lastModified":1615297957449.08,"size":953718},{"id":"7258e0eebfe2b0e55308572c02515bc987fb949bac8e16ee1e09dd2ab9e3b81df8d509308cabf6276523f7a86803a4dd20108d6b50ec11ee3e20dc1f2fe62de1","href":"https://static.observableusercontent.com/files/7258e0eebfe2b0e55308572c02515bc987fb949bac8e16ee1e09dd2ab9e3b81df8d509308cabf6276523f7a86803a4dd20108d6b50ec11ee3e20dc1f2fe62de1","name":"ContractsIcon-mirror-01.svg","type":"image/svg+xml","lastModified":1615305779623.357,"size":990},{"id":"408569b60c5d6fb68ec51a2cf7d445ac5169cb3076e3c812ba775ec01826db4eafb31a1b36da96c46f9bf7e19d9c9dc5978faa71cbe58d6cb7d2ebc83cc0488f","href":"https://static.observableusercontent.com/files/408569b60c5d6fb68ec51a2cf7d445ac5169cb3076e3c812ba775ec01826db4eafb31a1b36da96c46f9bf7e19d9c9dc5978faa71cbe58d6cb7d2ebc83cc0488f","name":"icon-tests.svg","type":"image/svg+xml","lastModified":1615399429518.117,"size":1241},{"id":"76d75688ef63f1a207bbfa4c8e9e657d838e6d35b238ec51006fc1865b577af1a59b92e5e5890fdfb7a01cf9cc9903005011f6630977cc3ddb7efff8c692d821","href":"https://static.observableusercontent.com/files/76d75688ef63f1a207bbfa4c8e9e657d838e6d35b238ec51006fc1865b577af1a59b92e5e5890fdfb7a01cf9cc9903005011f6630977cc3ddb7efff8c692d821","name":"icon-gloves.svg","type":"image/svg+xml","lastModified":1615399429545.914,"size":1598},{"id":"b8dcd0a1dde8f1339524da79f3a0fd57ee877060eec4c30237ed7d4632b974a1088a293402288138d4edececc79167f4df7c54129d9ee225c46f3766a876d87a","href":"https://static.observableusercontent.com/files/b8dcd0a1dde8f1339524da79f3a0fd57ee877060eec4c30237ed7d4632b974a1088a293402288138d4edececc79167f4df7c54129d9ee225c46f3766a876d87a","name":"icon-gel.svg","type":"image/svg+xml","lastModified":1615399429518.818,"size":1190},{"id":"f3a1ac60683dd3de48775d30ceedeb628f0e0a7f1991e66fdf79e87d222bca68e12504946d9a407bcc8900e9ffe2215a546ca2e114d045767203223f130034f1","href":"https://static.observableusercontent.com/files/f3a1ac60683dd3de48775d30ceedeb628f0e0a7f1991e66fdf79e87d222bca68e12504946d9a407bcc8900e9ffe2215a546ca2e114d045767203223f130034f1","name":"icon-masks.svg","type":"image/svg+xml","lastModified":1615399429540.553,"size":702}] 2f:{"title":"#576 Gráfico de evolución de precios unitarios (ES)","cells":[{"id":1,"value":"md`\n# #576 Gráfico de evolución de precios unitarios (ES)\n**Artículo completo** publicado en Civio: \n - [From 25 cents to 8 euros a mask, the price war that paid millions to middlemen (EN)](https://civio.es/quien-cobra-la-obra/2021/03/24/from-25-cents-to-8-euros-a-mask-the-price-war-that-paid-millions-to-middlemen/)\n - [De 25 céntimos a 8 euros por una mascarilla, la guerra de precios que se saldó con millones de euros para los intermediarios (ES)](https://civio.es/quien-cobra-la-obra/2021/03/24/precios-unitarios-mascarillas/)\n\n---\n\n### Scatterplot\nReferencia: [scatterpolot](https://observablehq.com/@d3/scatterplot). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"viewof languageSelector = Select([\"es\", \"en\"], {\n value: \"es\",\n label: \"Language \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"viewof circlesScaled = Toggle({\n label: \"Scaling circles?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2456,"value":"viewof colorBlendEffect = Radio([\"none\", \"multiply\", \"screen\"], {\n label: html`Colord blending effect`,\n format: x =>\n html`${x}`,\n value: \"multiply\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`### Chart 01: MASCARILLAS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"viewof subcategories01All = Radio(subcategories01ArrayFiltered, {\n label: html`${dataLocale[languageSelector].selectorMasksLabel}`,\n format: (x, i) =>\n html`${subcategories01ArrayFilteredTranlated[i]}`,\n value: \"FFP2\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"chart01 = createChart(dataset01, \"chart01\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2527,"value":"viewof search01 = Search(dataset01, {\n placeholder: \"Buscador mascarillas\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2537,"value":"viewof table01 = Table(search01)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2542,"value":"table01","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`### Chart 02: GEL HIDROALCOHÓLICO\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"chart02 = createChart(dataset02, \"chart02\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2604,"value":"viewof search02 = Search(dataset02, {\n placeholder: \"Buscador geles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"viewof table02 = Table(search02)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2615,"value":"table02","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"md`### Chart 03: GUANTES\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"chart03 = createChart(dataset03, \"chart03\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2608,"value":"viewof search03 = Search(dataset03, {\n placeholder: \"Buscador guantes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2611,"value":"viewof table03 = Table(search03)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2618,"value":"table03","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`### Chart 04: TESTS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"viewof subcategories04All = Radio(subcategories04ArrayFiltered, {\n label: html`${dataLocale[languageSelector].selectorTestsLabel}`,\n format: x =>\n html`${\n x ===\n \"Hisopos/torundas/escobillones con tubos para recoger y transportar muestras\"\n ? dataLocale[languageSelector].selectorTest2\n : dataLocale[languageSelector].selectorTest1\n }`,\n value: \"Pruebas antígenos\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"chart04 = createChart(dataset04, \"chart04\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2622,"value":"viewof search04 = Search(dataset04, {\n placeholder: \"Buscador tests\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2625,"value":"viewof table04 = Table(search04)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2628,"value":"table04","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`### Chart logic `","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"md`### Interactions `","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"function onMouseOut() {\n d3.select(this).style('fill-opacity', 0.6);\n\n // Hide all info\n d3.selectAll(\".tooltipData\").style(\"visibility\", \"hidden\");\n\n // Show interation notes\n d3.selectAll(\".interactionNote\").style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`### Data manipulation `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"URLdataset = \"https://data.civio.es/quiencobralaobra/contratacion-emergencia/precios-unitarios.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"data = {\n const data = await d3.csv(\n URLdataset,\n ({\n id,\n Categoría: cat,\n Subcategoría: subcat,\n 'Cantidad en acta': amount_in_doc,\n 'Unidades en objeto': amount_in_title,\n contracting_party_name: contracting_party_name,\n winning_party_name: winning_party_name,\n tender_award_date: x,\n 'Precio unitario': y\n }) => ({\n id,\n contracting_party_name:\n contracting_party_name === \"SERVICIOS CENTRALES (SMS)\"\n ? \"Servicio Murciano de Salud\"\n : contracting_party_name,\n winning_party_name: winning_party_name.toUpperCase(),\n cat,\n subcat,\n //Acuerdos marco set as \"0.1 units \" to be able to paint them and identify them later\n amount: amount_in_doc == '' ? +amount_in_title : +amount_in_doc || 0.1,\n x: parseDate(x),\n y: +y\n })\n );\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"// By category\nfilterDataByCat = function(category) {\n return data.filter(d => d.cat == category);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"// By category + subcategories\nfilterData = function(category, subcategoriesArray) {\n return data\n .filter(d => d.cat === category)\n .filter(d => subcategoriesArray.includes(d.subcat))\n .sort(function(x, y) {\n return d3.descending(x.amount, y.amount);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2559,"value":"md`#### 01 Mascarillas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"chart01Category = \"Mascarillas\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"subcategories01ArrayFiltered = [\"FFP2\", \"FFP3\", \"KN95\", \"Quirúrgicas\"] // On this order","pinned":false,"hidden":false,"mode":"ojs"},{"id":2804,"value":"subcategories01ArrayFilteredTranlated = [\n dataLocale[languageSelector].selectorMasks1,\n dataLocale[languageSelector].selectorMasks2,\n dataLocale[languageSelector].selectorMasks3,\n dataLocale[languageSelector].selectorMasks4\n] // On this order","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"dataset01 = filterData(chart01Category, subcategories01All)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2565,"value":"md`#### 02 Geles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"chart02Category = \"Gel hidroalcohólico\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"subcategories02ArrayFiltered = [\"Gel\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2570,"value":"dataset02 = filterData(chart02Category, subcategories02ArrayFiltered)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2575,"value":"md`#### 03 Guantes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"chart03Category = \"Guantes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"subcategories03ArrayFiltered = [\"Nitrilo\"] // Just this type","pinned":false,"hidden":false,"mode":"ojs"},{"id":2582,"value":"dataset03 = filterData(chart03Category, subcategories03ArrayFiltered)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"md`#### 04 Tests`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"chart04Category = \"Tests\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2585,"value":"dataset04 = filterData(chart04Category, subcategories04All)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"subcategories04ArrayFiltered = [\n \"Pruebas antígenos\",\n \"Hisopos/torundas/escobillones con tubos para recoger y transportar muestras\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"md`### Formatting settings\n\nhttps://observablehq.com/@d3/d3-format\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2825,"value":"timeLocaleES = d3.timeFormatLocale({\n dateTime: \"%A, %e de %B de %Y, %X\",\n date: \"%d/%m/%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\n \"domingo\",\n \"lunes\",\n \"martes\",\n \"miércoles\",\n \"jueves\",\n \"viernes\",\n \"sábado\"\n ],\n shortDays: [\"dom\", \"lun\", \"mar\", \"mié\", \"jue\", \"vie\", \"sáb\"],\n months: [\n \"Enero\",\n \"Febrero\",\n \"Marzo\",\n \"Abril\",\n \"Mayo\",\n \"Junio\",\n \"Julio\",\n \"Agosto\",\n \"Septiembre\",\n \"Octubre\",\n \"Noviembre\",\n \"Diciembre\"\n ],\n shortMonths: [\n \"Ene\",\n \"Feb\",\n \"Mar\",\n \"Abr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Ago\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dic\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"// es-ES format\n//es_ES = d3.formatLocale({\nes_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"],\n months: [\n \"Enero\",\n \"Febrero\",\n \"Marzo\",\n \"Abril\",\n \"Mayo\",\n \"Junio\",\n \"Julio\",\n \"Agosto\",\n \"Septiembre\",\n \"Octubre\",\n \"Noviembre\",\n \"Diciembre\"\n ],\n shortMonths: [\n \"Ene\",\n \"Feb\",\n \"Mar\",\n \"Abr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Ago\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dic\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"// en-US format\n//en_US = d3.formatLocale({\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"locale = languageSelector === \"es\" ? es_ES : en_US","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"formatDateComplete = languageSelector === \"es\"\n ? timeLocaleES.format(\"%B\")\n : d3.timeFormat('%B')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2854,"value":"formatDateShort = languageSelector === \"es\"\n ? timeLocaleES.format(\"%b\")\n : d3.timeFormat('%b')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"formatMoney = d3.formatLocale(locale).format(\"$,.2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3011,"value":"formatMoneyReduced = d3.formatLocale(locale).format(\"$\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"formatNumber = d3.formatLocale(locale).format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"format = formatNumber","pinned":false,"hidden":false,"mode":"ojs"},{"id":1984,"value":"md`### Handful functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1992,"value":"md`Splitting long texts\n\nReference: https://bl.ocks.org/mbostock/7555321\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"function wordWrap(long_string, max_char){\n\n var sum_length_of_words = function(word_array){\n var out = 0;\n if (word_array.length!=0){\n for (var i=0; i max_char){\n split_out = split_out.concat([[]]);\n }\n \n split_out[split_out.length-1] = split_out[split_out.length-1].concat(word);\n }\n \n for (var i=0; i