31:T1957,mapaRvacke = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); var isTooltipHidden = true; const paths = svg .selectAll("path") .data( hrvatska.features.filter( (d) => d.properties.zupanija == "Istarska županija" ) ) .enter() .append("path") //.attr('fill', (d, i) => color2(d3.randomUniform(-1, 1)())) // .attr('fill', (d, i) => color2(d3.randomNormal(0, 0.1)() + 0.15)) .attr("fill", (d, i) => { var glasovi = sumiranoGrupirano[d.properties.naziv]["Marino Baldini".toUpperCase()] + sumiranoGrupirano[d.properties.naziv]["Monika Udovičić".toUpperCase()] + sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()]; return d3.interpolateGreens( sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()] / glasovi ); }) .style("cursor", "pointer") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("id", (d, i) => `opcina${i}`) .attr("stroke-linejoin", "round") .attr("d", path) .on("mouseout", handleMouseOut) .on("mousemove", handleMouseMove) .on("mouseover", handleMouseOver); const citiesGroup = svg .selectAll(".cities") .data(mjesta) .enter() .append("g") .attr( "transform", (d) => `translate(${projection(d.coordinates)[0]},${ projection(d.coordinates)[1] })` ); citiesGroup.append("circle").attr("r", 4).attr("fill", "white"); citiesGroup.append("circle").attr("r", 2); citiesGroup .append("text") .attr("class", "text-shadow") .attr("dx", 5) .style("stroke", "white") .style("stroke-width", 2.5) .style("opacity", 0.9) .style("pointer-events", "none") .text((d) => d.name); citiesGroup .append("text") .attr("dx", 5) .attr("class", "text-black") .style("pointer-events", "none") .text((d) => d.name); function handleMouseOver(event, d) { d3.select(this).attr("stroke", "black").raise(); var centroid = path.centroid(d); isTooltipHidden = !isTooltipHidden; loadTooltipContent(d); //ovo radi //d3.select(event.currentTarget).attr('fill', 'purple'); let topOrBottom = "top"; if (event.y > height / 2) topOrBottom = "bottom"; tooltip .style("top", `${event.y}px`) .style("left", `${event.x}px`) .style("visibility", isTooltipHidden ? "hidden" : "visible"); citiesGroup.raise(); } function handleMouseMove(event, d) { tooltip.style("top", `${event.y + 50}px`).style("left", `${event.x}px`); } function handleMouseOut(event, d) { d3.select(this).attr("stroke", "white").lower(); isTooltipHidden = true; tooltip.style("visibility", isTooltipHidden ? "hidden" : "visible"); } function loadTooltipContent(d) { var name = d.properties.naziv .toLowerCase() .split(" ") .map((word) => { return word[0].toUpperCase() + word.substring(1); }) .join(" "); var glasovi = sumiranoGrupirano[d.properties.naziv]["Marino Baldini".toUpperCase()] + sumiranoGrupirano[d.properties.naziv]["Monika Udovičić".toUpperCase()] + sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()]; var htmlContent = "

"; htmlContent += `

${name}<\/h4>`; htmlContent += `

${d.properties.zupanija}<\/h6>`; // htmlContent += ` htmlContent += `
`; htmlContent += ``; htmlContent += ``; htmlContent += ``; // htmlContent += `Marino Bladini
`; // htmlContent += `Monika Udovičić
`; // htmlContent += `Valter Flego
`; // // htmlContent += `
${JSON.stringify( // sumiranoGrupirano[d.properties.naziv] // )}<\/h6>`; htmlContent += "

Kandidat Stranka Ukupno Postotak
Valter Flego IDS ${countFormat( sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()] )} ${percentFormat( (sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()] / glasovi) * 100 )} %
Marino Baldini SDP ${countFormat( sumiranoGrupirano[d.properties.naziv]["Marino Baldini".toUpperCase()] )} ${percentFormat( (sumiranoGrupirano[d.properties.naziv]["Marino Baldini".toUpperCase()] / glasovi) * 100 )}
Monika Udovičić HDZ ${countFormat( sumiranoGrupirano[d.properties.naziv]["Monika Udovičić".toUpperCase()] )} ${percentFormat( (sumiranoGrupirano[d.properties.naziv]["Monika Udovičić".toUpperCase()] / glasovi) * 100 )}
"; htmlContent += '
100% prebrojanih glasova.
'; htmlContent += "

Kandidat	Stranka	Ukupno	Postotak
Valter Flego	IDS	${countFormat( sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()] )}	${percentFormat( (sumiranoGrupirano[d.properties.naziv]["Valter Flego".toUpperCase()] / glasovi) * 100 )}	%
Marino Baldini	SDP	${countFormat( sumiranoGrupirano[d.properties.naziv]["Marino Baldini".toUpperCase()] )}	${percentFormat( (sumiranoGrupirano[d.properties.naziv]["Marino Baldini".toUpperCase()] / glasovi) * 100 )}
Monika Udovičić	HDZ	${countFormat( sumiranoGrupirano[d.properties.naziv]["Monika Udovičić".toUpperCase()] )}	${percentFormat( (sumiranoGrupirano[d.properties.naziv]["Monika Udovičić".toUpperCase()] / glasovi) * 100 )}

"; tooltip.html(htmlContent); } var tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("display", "block") .style("pointer-events", "none") .style("padding", "10px") .style("z-index", "10") .style("width", "400px") // .style("height", "150px") .style("background-color", "rgba(255, 255, 255, 0.95)") .style("border-radius", "3px") .style("box-shadow", "2px 2px 6px rgba(0,0,0,.5)") .style("visibility", "hidden") .text(""); return svg.node(); }32:[{"id":"268465605632abec345b080ecdeedc84ab547e54028882e40817f29bc0d02fdd3bae450edb12225bd7963d2bb2ca45170580e558204ffa7f52a7102857299a2b","href":"https://static.observableusercontent.com/files/268465605632abec345b080ecdeedc84ab547e54028882e40817f29bc0d02fdd3bae450edb12225bd7963d2bb2ca45170580e558204ffa7f52a7102857299a2b","name":"18_zupani@3.csv","type":"text/csv","lastModified":1610192721714.509,"size":26338},{"id":"50fa7233540ae78f5c7a6a016df34ddc4b989bfecdae1f4c4325e5c00e6e31ba139252794aac7c5ced13ae4a8eae79c7a1944831a0ebb4f49db86a8b2e1c90e8","href":"https://static.observableusercontent.com/files/50fa7233540ae78f5c7a6a016df34ddc4b989bfecdae1f4c4325e5c00e6e31ba139252794aac7c5ced13ae4a8eae79c7a1944831a0ebb4f49db86a8b2e1c90e8","name":"valter.jpg","type":"image/jpeg","lastModified":1610144685609.381,"size":47039},{"id":"ff2c0916ef21ec87374b274202ccbe24144d9221af675c031b02904dc2cb6a58fede570343fb2fe5fd135e7be2300f7ce544ca98c1eceef309754fdb14faff51","href":"https://static.observableusercontent.com/files/ff2c0916ef21ec87374b274202ccbe24144d9221af675c031b02904dc2cb6a58fede570343fb2fe5fd135e7be2300f7ce544ca98c1eceef309754fdb14faff51","name":"marino.jpg","type":"image/jpeg","lastModified":1610144685621.181,"size":54371},{"id":"1406aeb5b5c0c03c38b77c603fed5db692a745a6a60f9087555e735b57a78d23f10865d8957ba17997c5ce013b6227baa4470b912166e2dbf81ee02740fe54ac","href":"https://static.observableusercontent.com/files/1406aeb5b5c0c03c38b77c603fed5db692a745a6a60f9087555e735b57a78d23f10865d8957ba17997c5ce013b6227baa4470b912166e2dbf81ee02740fe54ac","name":"monika.jpg","type":"image/jpeg","lastModified":1610144685602.435,"size":12448},{"id":"e356c069950d0beebe921e24fbc409574db21b2e35b510b69da551712d14719ebbe2d29f76385e0bfbc7c59958c00a7ef8e734ea9c6d8f9ffa7b7e30d29cabd5","href":"https://static.observableusercontent.com/files/e356c069950d0beebe921e24fbc409574db21b2e35b510b69da551712d14719ebbe2d29f76385e0bfbc7c59958c00a7ef8e734ea9c6d8f9ffa7b7e30d29cabd5","name":"croazia2.topo.json","type":"application/json","lastModified":1610012212267.025,"size":178110}] 2f:{"title":"Izbori test","cells":[{"id":0,"value":"md`# Izbori test`","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = width / 1.2","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"projection = d3\n .geoAlbers()\n .rotate([-15, 0])\n .fitExtent([[0, 20], [width * 0.9, height * 0.9]], istra)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"hrvatska.features.filter(d => d.properties.zupanija == 'Istarska županija')","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"style = html`