30:T21eb,geo_map = (w = 1000, h = 1000, column = "goals", g) => { const svg = g || d3 .create("svg") .attr("class", "svg-map") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h); // Filter data by year const filtered_data_by_year = dataset.filter(function (d) { return d["year"] == selectedYear; }); // Retrieve available countries in the dataset const available_countries = Object.keys( Object.fromEntries(d3.group(filtered_data_by_year, (d) => d.country)) ); // Function to retrieve country value for the given year : function get_country_value(c) { let result; if (available_countries.indexOf(c) >= 0) { result = filtered_data_by_year.filter(function (e) { return e["country"] == c; })[0][column]; } else { result = -1; } return result; } // Define margin : let margin = { top: 10, right: 10, bottom: 10, left: 10 }; //Define colors for the legend let colors = [ "grey", "#f0f9e8", "#ccebc5", "#a8ddb5", "#7bccc4", "#43a2ca", "#0868ac" ]; //Convert value to color let color_convertor = d3 .scaleThreshold() .domain([0, 10, 20, 30, 40, 50]) .range(colors); //Define width and height let width = w - margin.left - margin.right, height = h - margin.top - margin.bottom; let projection = d3geo .geoKavrayskiy7() .fitSize([width * 1.2, ((width * 2) / 3) * 1.2], countries) .translate([width * 0.46, ((width * 2) / 3) * 0.6]); let path = d3.geoPath(projection); // Function to create tooltip const tip = d3tip() .attr("class", "d3-tip") .style("border", "solid 3px black") .style("background-color", "white") .style("border-radius", "10px") .style("float", "left") .style("font-family", "Tahoma") .html(function (event, d) { let base_str = `

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

`; } else { add_str = ""; } //Reduce the opacity of all countries ... d3.selectAll(".country-scored").style("opacity", 0.15); // ... except for the hovered country d3.select(this) .style("opacity", 1) .attr("fill", function (d) { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke-width", "1"); //We also add a stroke return base_str + add_str; }); // Define tooltip position (with special rules for some countries) tip.offset(function (event, d) { let result; // Tooltip for US : if (d.id == "840") { result = [height / 10, -width / 3]; } // Tooltip for Russia : else if (d.id == "643") { result = [height / 12, width / 4]; } // Tooltip for Canada : else if (d.id == "124") { result = [height / 15, 0]; } // Tooltip for the rest : else { result = [0, 0]; } return result; }); // world map let gx = svg.append("g"); // Add country shapes + fill + behaviors on events gx.selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", path) .attr("class", "country-scored") .attr("fill", (d) => { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke", "black") .attr("stroke-width", "0.2") .on("click", function (d) { //This part is to make the connection with the scatterplot //from https://observablehq.com/@onaly/goals-scatterplot var id = d.srcElement.__data__.id; var team = countries_hash.get(id); d3.selectAll(".scatter-label-text") .attr("opacity", 0) .style("display", "none"); d3.selectAll(".scatter-flag") .attr("opacity", 0.1) .style("outline", "None"); d3.select(`#scatter-flag-${flag_data[team]}`) .attr("opacity", 1) .style("outline", "1px solid black"); d3.select(`#scatter-label-${flag_data[team]}`) .transition(1000) .attr("opacity", 1) .style("display", "unset"); }) .on("mouseover", tip.show) .on("mouseout", function (d) { tip.hide(d); //Hide the tooltip //Restore the opacity of all countries : d3.selectAll(".country-scored") .style("opacity", 1) .attr("fill", function (d) { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke-width", "0.2"); }); // Add uk countries separately since they are not official countries : gx.append("path").datum(subunits).attr("d", path).attr("fill", "none"); // Same as the other (non-UK) countries : gx.selectAll(".subunit") .data(new_subunit_features) .enter() .append("path") .attr("class", "country-scored") .attr("d", path) .attr("fill", function (d) { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke", "black") .attr("stroke-width", "0.1") .on("click", function (d) { var id = d.srcElement.__data__.id; var team = countries_hash.get(id); d3.selectAll(".scatter-label-text") .attr("opacity", 0) .style("display", "none"); d3.selectAll(".scatter-flag") .attr("opacity", 0.1) .style("outline", "None"); d3.select(`#scatter-flag-${flag_data[team]}`) .attr("opacity", 1) .style("outline", "1px solid black"); d3.select(`#scatter-label-${flag_data[team]}`) .transition(1000) .attr("opacity", 1) .style("display", "unset"); }) .on("mouseover", tip.show) .on("mouseout", function (d) { tip.hide(d); d3.selectAll(".country-scored") .style("opacity", 1) .attr("fill", function (d) { return color_convertor(get_country_value(countries_hash.get(d.id))); }) .attr("stroke-width", "0.2"); }); // Labels for legend : let labels = color_convertor.domain().reverse(); let arrLength = labels.push(-1); // Add legend shapes : gx.selectAll("rect") .data(labels) .enter() .append("rect") .attr("x", width - 0.99 * width) .attr("y", function (d, i) { let result; if (d != -1) { result = 0.6 * height + i * (0.045 * height); } else { result = 0.62 * height + i * (0.045 * height); } return result; }) .attr("width", 0.045 * height) .attr("height", 0.045 * height) .attr("stroke", "black") .attr("stroke-width", "0.5") .style("fill", color_convertor); // Add legend text : gx.selectAll("text") .data(labels) .enter() .append("text") .attr("x", 0.037 * width + width - 0.99 * width) .attr("y", function (d, i) { let result; if (d != -1) { result = 0.649 * height + i * (0.045 * height); } else { result = 0.648 * height + i * (0.045 * height); } return result; }) .attr("font-size", 0.02 * height) .text((d) => { let result; if (d != -1) { result = Math.round(d); } else { result = "No data"; } return result; }); //----------------------------------------------------------------------------------- //Chart title in the upper corner svg .append("text") .attr("text-anchor", "end") .text("Goals") .attr("x", 0.995 * w) .attr("y", 0.135 * h) .attr("fill", "#0a4a90") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .attr("font-size", 0.057 * h); svg .append("text") .attr("text-anchor", "end") .text(selectedYear) .attr("x", w) .attr("y", 0.077 * h) .attr("fill", "#0a4a90") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .attr("font-size", 0.077 * h); //------------------------------------------------------------------------------------------------ // Function for zoom : function zoomed({ transform }) { gx.attr("transform", transform); } //To activate the tooltips: svg.call(tip); //To activate the zoom : svg.call( d3 .zoom() .extent([ [0, 0], [width, 100] ]) .scaleExtent([1, 8]) .on("zoom", zoomed) ); return svg.node(); }31:[{"id":"0d249ca68a15fc4d1fbb1f774c57f45df6e8e54dcb3a8daa4068a71a7d348ca9bc127142496c3a4a9d96dddba8ca7f04776bf9352737e2040582ea94c56809fb","href":"https://static.observableusercontent.com/files/0d249ca68a15fc4d1fbb1f774c57f45df6e8e54dcb3a8daa4068a71a7d348ca9bc127142496c3a4a9d96dddba8ca7f04776bf9352737e2040582ea94c56809fb","name":"flags_dataset_flagcdn.csv","type":"text/csv","lastModified":1646071917371.517,"size":4354}] 2e:{"title":"Choropleth map of scored goals","cells":[{"id":0,"value":"# Choropleth map of scored goals","pinned":false,"hidden":false,"mode":"md"},{"id":432,"value":"viewof selectedYear = Inputs.range([1872, 2021], { step: 1, value: 2021 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"geo_map(0.8 * width, 0.5 * width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"topojson = require (\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3geo = require('d3-geo-projection')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// Separate geographic dataset for uk countries :\n//Taken from https://bost.ocks.org/mike/map/uk.json\nuk = d3.json(\"https://raw.githubusercontent.com/onaly/storage/main/uk.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/50m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"countries_codes = d3.csv(\n \"https://raw.githubusercontent.com/onaly/storage/main/countries_codes_with_uk_subcountries.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"subunits = topojson.feature(uk, uk.objects.subunits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"//Remove Republic of Ireland from subunits :\nnew_subunit_features = subunits.features.filter(function (value, index, arr) {\n return value.id != \"IRL\";\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"countries_hash = new Map(countries_codes.map(d => [d['country-code'], d.name]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"dataset = d3.csv(\n \"https://raw.githubusercontent.com/onaly/storage/main/yearly_scored_goals_by_team.csv\",\n (d) => {\n let res = {};\n res.country = d.team;\n res.year = parseInt(d.date);\n res.goals = parseInt(d.scored_goals);\n return res;\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"d3tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"flag_array = FileAttachment(\"flags_dataset_flagcdn.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"flag_data = flag_array[0]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}