2f:T425,check={ if(form.option1=="Countries") { if (radios =="Goals") { let update = chart.update(keyframe) } else { let vx=keyframes2.filter(function(d) { return d[2]==keyframe[2]}) let update =chart.update(vx[0]) } } else if (form.option1=="Tournaments") { if (radios =="Goals") { let vx2=keyframes_t.filter(function(d) { return d[2]==keyframe[2]}) let update =chart.update(vx2[0]) } else { let vx=keyframes_t2.filter(function(d) { return d[2]==keyframe[2]}) let update =chart.update(vx[0]) } } else if (form.option1=="Players") { if (radios =="Goals") { let vx2=keyframes_p.filter(function(d) { return d[2]==keyframe[2]}) let update =chart.update(vx2[0]) } else { let vx=keyframes_p2.filter(function(d) { return d[2]==keyframe[2]}) let update =chart.update(vx[0]) } } } 30:T54f,function bars(svg) { let bar = svg.append("g") .attr("fill-opacity", 0.6) .selectAll("rect"); return ([date, data], transition) => bar = bar .data(data.slice(0, n), d => d.name) .join( enter => enter.append("rect") .attr("fill", d => { if(form.option1=="Countries") {return colorscale((data_countries.filter(function(k){return k.name==d.name}))[0]['continent'])} else if(form.option1=="Tournaments") return colorscale2(+(data_tournaments.filter(function(k){return k.name==d.name}))[20]['matches']) else if(form.option1=="Players") { return colorscale((data_countries.filter(function(k){return k.name==((data_players.filter(function(j){return j.name==d.name}))[0]["team_name"])}))[0]['continent']) } }) .attr("height", y.bandwidth()) .attr("x", x(0)) .attr("y", y(n)) .attr("width", d => x(d.value) - x(0)) .on('mouseover', nodeMouseOver) .on('mouseout', nodeMouseOut), update => update, exit => exit.transition(transition).remove() .attr("y", y(n)) .attr("width", d => x(d.value) - x(0)) ) .call(bar => bar.transition(transition) .attr("y", d => y(d.rank)) .attr("width", d => x(d.value) - x(0))); }31:T865,function nodeMouseOver(event, d){ // Get the toolTip, update the position, and append the inner html depending on your content // I tend to use template literal to more easily output variables. var year=(d3.select(".ticker_year").text()) if (form.option1==("Players")) { var p = (data_players.filter(function(k){return k.name==d.name && (k.date).getFullYear()==year}))[0] var Label1 ="Matches: " var Label2="Goals: " var Label3="Goals per match:" var value1=p['matches'] var value2=p["value"] var value3=(p["value2"]).toFixed(2) // var nm = (d.name).replace(" ","%20") var link_img='https://hilviz.s3.ap-southeast-1.amazonaws.com/the-race-for-goals-V3/players/'+d.name+'.jpg' } else if (form.option1==("Countries")) { var c = (data.filter(function(k){return k.name==d.name && (k.date).getFullYear()==year}))[0] var Label1 ="Matches: " var Label2="Goals: " var Label3="Goals per match:" var value1=c["matches"] var value2=c["value"] var value3=(c["value2"]).toFixed(2) var link_img= 'https://hilviz.s3.ap-southeast-1.amazonaws.com/WorldCup_Football_2022/country_flags/'+(d.name).toLowerCase()+'.png' } else if (form.option1==("Tournaments")) { var t = (data_tournaments.filter(function(k){return k.name==d.name }))[20] var Label1 ="Matches: " var Label2="Goals: " var Label3="Goals per match:" var value1=t['matches'] var value2=t["value"] var value3=(t["value2"]).toFixed(2) var link_img= 'https://hilviz.s3.ap-southeast-1.amazonaws.com/WorldCup_Football_2022/fifa+mascots/'+("m_"+((d.name).split("-")[1].trim()))+'.png' } console.log(link_img); toolTip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(`${d.name}
${Label1} ${value1}
${Label2} ${value2}
${Label3} ${value3}

`); // Optional cursor change on target d3.select(event.target).style("cursor", "pointer"); } 32:T6e5,function flags(svg) { let flag = svg.append("g") .selectAll("image"); return ([date, data], transition) => flag = flag .data(data.slice(0, n), d => d.name) .join( enter => enter.append('image') .attr('xlink:href', function(d) { if(form.option1=="Countries") { return 'https://hilviz.s3.ap-southeast-1.amazonaws.com/WorldCup_Football_2022/country_flags/'+(d.name).toLowerCase()+'.png'} else if(form.option1=="Tournaments") { // console.log((d.name).split("-")[1]) return 'https://hilviz.s3.ap-southeast-1.amazonaws.com/WorldCup_Football_2022/fifa+mascots/'+("m_"+((d.name).split("-")[1].trim()))+'.png' } else if(form.option1=="Players") { // console.log((d.name).split("-")[1]) return 'https://hilviz.s3.ap-southeast-1.amazonaws.com/the-race-for-goals-V3/players/'+d.name+'.jpg' } }) .attr("width", function(d){return y.bandwidth()}) .attr("height", function(d){return y.bandwidth()/2}) .attr("y", function (d) { return y(n); }) .attr("x", function (d) { return x(0); }), update => update, exit => exit.transition(transition).remove() .attr("y", y(n)) //.attr("width", d => x(d.value) - x(0)) ) .call(flag => flag.transition(transition) //.attr("y", d => y(d.rank)+10) .attr("y",function (d) { return y(d.rank)+ (y.bandwidth()/4)}) .attr("dy", "2.5em") .attr("x", function (d) { return x(d.value) - ((d.name).length)*6-60 }) ) }33:T5ed,function flags2(svg) { if (form.option1==("Players")) { var year=(d3.select(".ticker_year").text()) let flag2 = svg.append("g") .selectAll("image"); return ([date, data], transition) => flag2 = flag2 .data(data.slice(0, n), d => d.name) .join( enter => enter.append('image') .attr('xlink:href', function(d) { var p = (data_players.filter(function(k){return k.name==d.name && (k.date).getFullYear()==year}))[0] var value1=p['team_name'] var link_img='https://hilviz.s3.ap-southeast-1.amazonaws.com/WorldCup_Football_2022/country_flags/'+(value1).toLowerCase()+'.png' console.log(link_img) return link_img} ) .attr("width", function(d){return y.bandwidth()}) .attr("height", function(d){return y.bandwidth()/2}) .attr("y", function (d) { return y(n); }) .attr("x", function (d) { return x(0); }), update => update, exit => exit.transition(transition).remove() .attr("y", y(n)) //.attr("width", d => x(d.value) - x(0)) ) .call(flag => flag.transition(transition) //.attr("y", d => y(d.rank)+10) .attr("y",function (d) { return y(d.rank)+ (y.bandwidth()/4)}) .attr("dy", "2.5em") .attr("x", function (d) { return x(d.value) - ((d.name).length)*6-120 }) ) } }34:T58b,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x(d.value)},${y(n)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(function(d) { if (form.option1 == "Tournaments") { var c = (data_tournaments.filter(function(k) { return k.name==d.name}))[20]["matches"] return (((d.name).split("-"))[1]) + " ("+c+" matches)"} else return d.name }) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x(d.value)},${y(n)})`) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", function(d) { return textTween(parseNumber(this.textContent), d.value); }))); }35:[{"id":"acbe983c3248b73e13d85f91538bbdc4ad826bd9d4cb95c641986b645c7345e5aed4275e721dc2c3adf67bf89fc5c4172f049ecbe32cda4faad5ac2772239c9e","href":"https://static.observableusercontent.com/files/acbe983c3248b73e13d85f91538bbdc4ad826bd9d4cb95c641986b645c7345e5aed4275e721dc2c3adf67bf89fc5c4172f049ecbe32cda4faad5ac2772239c9e","name":"country_continent@1.csv","type":"text/csv","lastModified":1668160992183.402,"size":1067},{"id":"350f0b0d7f8d8e4b9132d81ec8edecc8a91e111772fcdcf9b216888110ff360ffaf471bb39aa7cfa70d6598db09f0fb2f30e797e9f160d9a45b1cdb67adbc5be","href":"https://static.observableusercontent.com/files/350f0b0d7f8d8e4b9132d81ec8edecc8a91e111772fcdcf9b216888110ff360ffaf471bb39aa7cfa70d6598db09f0fb2f30e797e9f160d9a45b1cdb67adbc5be","name":"players_script_output@1.csv","type":"text/csv","lastModified":1668160992183.402,"size":238939},{"id":"5a855c2d2774f40b76686f427f013a39b8114768bc7f196a9813c17807695e51ff7d000bf5de46120a7903ad81b97062df0c50d01da064ec797cb8cd6846c50c","href":"https://static.observableusercontent.com/files/5a855c2d2774f40b76686f427f013a39b8114768bc7f196a9813c17807695e51ff7d000bf5de46120a7903ad81b97062df0c50d01da064ec797cb8cd6846c50c","name":"tournament_Category.csv","type":"text/csv","lastModified":1668160992183.402,"size":407},{"id":"c61bf511235d87f13c471883c54571f3c1f9640db27371c54a5507b6c354981cd9a749d0982c8fe5a8d1c3177719202a6c9528150a5342acbd2fd4e867950c9e","href":"https://static.observableusercontent.com/files/c61bf511235d87f13c471883c54571f3c1f9640db27371c54a5507b6c354981cd9a749d0982c8fe5a8d1c3177719202a6c9528150a5342acbd2fd4e867950c9e","name":"61788f3f02fcafd07738240a71a14482facd800ef4061a5069141d1b808cf77b56897206cd744f0b35799fc1ecfa748463f6ef080258e60061ec8ccf74938989@1.csv","type":"text/csv","lastModified":1668162000200.52,"size":16731},{"id":"ff4f9687560b91edb21fa573422e6dc4a7bc10b63b997c50b4e59454862649e702eb8028b3beafbad9138a106a2d16ea798d4c5478b8c2b5814c041624b24c1d","href":"https://static.observableusercontent.com/files/ff4f9687560b91edb21fa573422e6dc4a7bc10b63b997c50b4e59454862649e702eb8028b3beafbad9138a106a2d16ea798d4c5478b8c2b5814c041624b24c1d","name":"291043218e5bc6eba535640d89ef3755ec2ea58fd49764e209479d6ea7233778fff15ffc432c5c6b1a2f0751f8688f15e9f36a6678c5793621de3cd98b0b5095@1.csv","type":"text/csv","lastModified":1668160993533.19,"size":16320}] 2d:{"title":"The Race for Goals","cells":[{"id":239,"value":"r= md`# The Race for Goals\n\nThis chart animates the goals scored by the top teams from 1930 to 2018.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3242,"value":"import {Button} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"html"},{"id":3626,"value":"viewof form = Inputs.form({\n \n option1: Inputs.radio([\"Countries\",\"Players\", \"Tournaments\"],{value:\"Countries\"})\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3410,"value":"viewof radios = Inputs.radio([\"Goals\", \"Goals per Match\"], { value: \"Goals\"})\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"viewof keyframe = Scrubber(keyframesdynamic, {\n format: ([date]) => formatDate(date),\n delay: duration,\n loop: false \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3149,"value":" import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3194,"value":"colorscale=(d3.scaleOrdinal([1,2,3,4,5], d3.schemeTableau10))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4170,"value":"colorscale2=d3.scaleThreshold()\n .domain([27, 39,53,65])\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3734,"value":"legend_colorscale = d3.scaleOrdinal([\"Europe\", \"South America\", \"North & Central America\",\"Africa\"], d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3127,"value":"legend= Swatches((legend_colorscale) ,{\n columns: \"180px\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3795,"value":"legend2 = Swatches(d3.scaleOrdinal([\"17-26 matches\", \"32-38 matches\", \"52 matches\",\"64 matches\"], d3.schemeTableau10) ,{\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3730,"value":"legend_check={if (form.option1 ==\"Countries\")\n{\nlegend_colorscale.domain([\"Africa\", \"Asia-Pacific\", \"Europe\",\"North & Central America\",\"South America\"])\n}\nelse if (form.option1==\"Tournaments\")\n{\n \n \n}\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateTicker = ticker(svg);\n const updateFlags = flags(svg);\n const updateFlags2 = flags2(svg);\n\n invalidation.then(() => svg.interrupt());\n\n return Object.assign(svg.node(), {\n update(keyframe) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n \n \n \n \n // Extract the top bar’s value.\n x.domain([0, keyframe[1][0].value]);\n\n updateAxis(keyframe, transition);\n updateBars(keyframe, transition);\n updateLabels(keyframe, transition);\n updateTicker(keyframe, transition);\n updateFlags(keyframe, transition);\n updateFlags2(keyframe, transition);\n\n \n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3399,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":3206,"value":"data_countries = FileAttachment(\"country_continent@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3722,"value":"tournament_category = FileAttachment(\"tournament_Category.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3638,"value":"data_tournaments = FileAttachment(\"61788f3f02fcafd07738240a71a14482facd800ef4061a5069141d1b808cf77b56897206cd744f0b35799fc1ecfa748463f6ef080258e60061ec8ccf74938989@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"data = FileAttachment(\"291043218e5bc6eba535640d89ef3755ec2ea58fd49764e209479d6ea7233778fff15ffc432c5c6b1a2f0751f8688f15e9f36a6678c5793621de3cd98b0b5095@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4026,"value":"data_players = FileAttachment(\"players_script_output@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"duration = 375","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"n = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":2135,"value":"names = new Set(data.map(d => d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3708,"value":"tournaments=new Set(data_tournaments.map(d => d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4029,"value":"players=new Set(data_players.map(d => d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => +d.value, d => +d.date, d => d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3250,"value":"datevalues2 = Array.from(d3.rollup(data, ([d]) => +d.value2, d => +d.date, d => d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3824,"value":"datevalues3 = Array.from(d3.rollup(data_tournaments, ([d]) => +d.value, d => +d.date,d=> d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3645,"value":"datevalues4 = Array.from(d3.rollup(data_tournaments, ([d]) => +d.value2, d => +d.date,d=> d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4034,"value":"datevalues5 = Array.from(d3.rollup(data_players, ([d]) => +d.value, d => d.date,d=> d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4036,"value":"datevalues6 = Array.from(d3.rollup(data_players, ([d]) => +d.value2, d => d.date,d=> d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3697,"value":"d3.pairs(datevalues3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3710,"value":"function rank_tournament(value) {\n const data = Array.from(tournaments, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(+a.value, +b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4042,"value":"function rank_players(value) {\n const data = Array.from(players, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(+a.value, +b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"k = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n let index=0;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n \n keyframes.push([\n ka,\n //new Date(ka * (1 - t) + kb * t),\n rank(name => (+a.get(name) || 0) * (1 - t) + (+b.get(name) || 0) * t),index\n ]);\n index +=1;\n }\n }\n keyframes.push([kb, rank(name => b.get(name) || 0),index]);\n return keyframes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3713,"value":"keyframesdynamic=keyframes.slice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3254,"value":"keyframes2 = {\n const keyframes2 = [];\n let ka, a, kb, b;let index=0;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues2)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n \n keyframes2.push([\n ka,\n rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t),index\n ]);\n index +=1;\n }\n }\n keyframes2.push([kb, rank(name => b.get(name) || 0),index]);\n return keyframes2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3686,"value":"keyframes_t= {\n const keyframes_t = [];\n let ka, a, kb, b;let index=0;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues3)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n \n keyframes_t.push([\n ka,\n rank_tournament(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t),index\n ]);\n index +=1;\n }\n }\n keyframes_t.push([kb, rank_tournament(name => b.get(name) || 0),index]);\n return keyframes_t;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3827,"value":"keyframes_t2= {\n const keyframes_t2 = [];\n let ka, a, kb, b;let index=0;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues4)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n \n keyframes_t2.push([\n ka,\n rank_tournament(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t),index\n ]);\n index +=1;\n }\n }\n keyframes_t2.push([kb, rank_tournament(name => b.get(name) || 0),index]);\n return keyframes_t2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4044,"value":"keyframes_p= {\n const keyframes_p = [];\n let ka, a, kb, b;let index=0;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues5)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n \n keyframes_p.push([\n ka,\n rank_players(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t),index\n ]);\n index +=1;\n }\n }\n keyframes_p.push([kb, rank_players(name => b.get(name) || 0),index]);\n return keyframes_p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4046,"value":"keyframes_p2= {\n const keyframes_p2 = [];\n let ka, a, kb, b;let index=0;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues6)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n \n keyframes_p2.push([\n ka,\n rank_players(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t),index\n ]);\n index +=1;\n }\n }\n keyframes_p2.push([kb, rank_players(name => b.get(name) || 0),index]);\n return keyframes_p2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1530,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":4064,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":4068,"value":"function nodeMouseOut(event, d){\n // Hide tooltip on mouse out\n\t toolTip.style(\"display\", \"none\"); // Hide toolTip\n \n // Optional cursor change removed\n d3.select(event.target).style(\"cursor\", \"default\"); \n \n \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":3418,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":4239,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1538,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n return function(t) {\n if (radios ==\"Goals\")\n this.textContent = formatNumberd(i(t));\n else \n this.textContent = formatNumber(+i(t));\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3080,"value":"parseNumber = string => +string.replace(/,/g, \"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3510,"value":"formatNumberd = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"formatNumber = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1552,"value":"function axis(svg) {\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(0,${margin.top})`);\n\n const axis = d3.axisTop(x)\n .ticks(width / 160)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1555,"value":"function ticker(svg) {\n const now = svg.append(\"text\").attr(\"class\",\"ticker_year\")\n .style(\"font\", `bold ${barSize}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", margin.top + barSize * (n - 0.45))\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(formatDate(date)));\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"formatDate = d3.utcFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"color = {\n const scale = d3.scaleOrdinal([1,2,3,4,5], d3.schemeTableau10);\n \n if (data.some(d => d.category !== undefined)) {\n const categoryByName = new Map(data.map(d => [d.name, d.category]))\n \n //scale.domain(categoryByName.values());\n \n return d => scale(categoryByName.get(d.value));\n }\n return d => scale(d.category);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1971,"value":"height = margin.top + barSize * n + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"barSize = 48","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"margin = ({top: 16, right: 6, bottom: 6, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3040,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3476,"value":"html`css `\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":3474,"value":"bootstrap = require('bootstrap@4.4.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3859,"value":"jquery = require('jquery@3.3.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4060,"value":"toolTip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('display', 'none')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}