2f:T1742,chart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) const countryKeys = Object.keys(data.countries) let currentYear, currentCountry //make defs and add the linear gradient const lg = svg.append("defs").append("linearGradient") .attr("id", "mygrad") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "100%") lg.append("stop") .attr("offset", "0%") .style("stop-color", "red") .style("stop-opacity", 0.2) lg.append("stop") .attr("offset", "100%") .style("stop-color", "blue") .style("stop-opacity", 0.2) const country = svg.append("g") .selectAll("g") .data(Object.values(data.countries)) .join('g') const categoriesGroup = svg.append("g") .selectAll("g") .data(Object.values(data.categories)) .join("g") const linesGroup = svg.append("g") const catGroupTexts = categoriesGroup .append('text') .text(d => `${catEmoji[d.key]} ${d.key} (${d.count})`) .style('font-size', 12) .attr('transform', (d, i) => `translate(${200 + i * 150}, 20)`) function updateCategoriesCount() { setTimeout( () => { const result = getCategoriesFor(currentCountry, currentYear) catGroupTexts.text(d => { return `${catEmoji[d.key]} ${d.key} (${result[d.key].count})` }) const curvature = 100 linesGroup.selectAll("*").remove() const keys = Object.keys(result) if (currentCountry || currentYear) { const dataArr = Object.values(result).reduce( (memo, item) => { const { key, years, countries } = item const from = [206 + keys.indexOf(key) * 150, 25] if (currentCountry) { years.forEach(year => { memo.push({from, to: [scales.x(year), countryKeys.indexOf(currentCountry) * 19 + margin.top], type: 'year'}) }) } else { countries.forEach(country => { memo.push({from, to: [120, countryKeys.indexOf(country) * 19 + margin.top], type: 'country'}) }) } return memo; }, []); linesGroup .selectAll('path') .data(dataArr) .join('path') .attr('stroke', 'rgba(0,0,0,0)') .attr('fill', 'transparent') .attr('d', d=> ` M${d.from.join(' ')} C${d.from[0]} ${d.from[1] + curvature} ${d.type === "year" ? d.to[0] : d.to[0]+curvature} ${d.type === "year" ? d.to[1] - curvature : d.to[1]} ${d.to.join(' ')}`) linesGroup.selectAll('path').transition().duration(300).ease(d3.easeLinear).attr('stroke', 'rgba(0,0,0,0.5)') } }, 50) } const yearsContainer = svg .selectAll('.year') .data(Object.values(data.years)) .join('g') .attr('class', 'year') .attr('opacity', 1) .on('mouseover', (e, d) => { yearsContainer .transition() .duration(100) .attr('opacity', inner => inner.key === d.key ? 1 : 0.1) country .transition() .duration(100) .attr('opacity', inner => d.countries.indexOf(inner.key) !== -1 ? 1 : .1) currentYear = d.key updateCategoriesCount() }) .on('mouseout', () => { yearsContainer .transition() .duration(100) .attr('opacity', 1) country .transition() .duration(100) .attr('opacity', 1) currentYear = undefined updateCategoriesCount() }) yearsContainer.append('rect') .attr('class', 'year') .attr('x', d => scales.x(d.key) - scales.x.bandwidth()/2) .attr('y', margin.top - 10) .attr('width', scales.x.bandwidth()) .attr('height', height - margin.top + 10) .attr('fill', 'rgba(125,125,255,0.04)') yearsContainer .append('text') .style('font-size', 9) .attr('text-anchor', 'middle') .attr('transform', (d, i) => `translate(${scales.x(d.key)}, ${height - margin.bottom + i % 3 * 10})`) .text(d => d.key) country .attr('id', d => d.key) .attr('class', 'country op') .attr('opacity', 1) .attr('transform', (d, i) => `translate(0, ${i * 19 + margin.top})`) .on('mouseover', (e, d) => { yearsContainer .transition() .duration(100) .attr('opacity', inner => d.years.indexOf(inner.key) !== -1 ? 1 : .1) country .transition() .duration(100) .attr('opacity', inner => d.key === inner.key ? 1 : .1) currentCountry = d.key updateCategoriesCount() }) .on('mouseout', () => { yearsContainer .transition() .duration(100) .attr('opacity', 1) country .transition() .duration(100) .attr('opacity', 1) currentCountry = undefined updateCategoriesCount() }) const line = d3.area() .curve(d3.curveStepAfter) .x(d => scales.x(d.year)- scales.x.bandwidth() / 2) .y1(d => -d.count * 4) .y0(0) country .append('line') .attr('x1', 120) .attr('x2', width - margin.right) .attr('y1', (d, i) => scales.x(d.year)) .attr('y2', (d, i) => scales.x(d.year)) .attr('stroke', `rgba(0,0,0,0.1)`) country.append("path") .datum(d => getCountForCountry(d.key)) .attr("fill", "none") .attr("stroke", "rgba(0,0,0,.2)") // .attr('fill', 'rgba(0,0,255,0.2)') .attr("d", line) .style("fill", "url(#mygrad)") country .append('text') .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr('transform', 'translate(115, 3)') .text(d=>`${d.flag}`) country .append('text') .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr('transform', 'translate(90, 0)') .text(d=>`${d.key}`) .style('font-size', '12') return svg.node() }30:T4fc,getCategoriesFor = (selectedCountry, selectedYear) => { const result = {} Object.values(data.categories).forEach( category => { const { key, indices, count } = category result[key] = {key, count: 0, years: [], countries: []} if (selectedCountry || selectedYear) { indices.forEach( index => { const laureate = data.laureates[index] const { prizes } = laureate let append = false prizes.forEach(prize => { const { year: strYear, category, affiliations } = prize const year = parseInt(strYear) affiliations.forEach( affiliation => { let { name, city, country } = affiliation if ((!selectedYear || selectedYear === year) && (!selectedCountry || selectedCountry === country)) { if (result[key].years.indexOf(year) === -1) result[key].years.push(year) if (result[key].countries.indexOf(country) === -1) result[key].countries.push(country) append = true } }) }) if (append) { result[key].count++ } }) } else { result[key] = {key, count} } }) return result }31:T95e,data = { const { laureates } = laureateDataset const years = {} const countries = {} const categories = {} const counts = { years: {}, country: {} } let minYear = Infinity let maxYear = -Infinity function getCreateCountAndAppend(collection, key, index, append, increment = true) { const ref = collection[key] || Object.assign({}, append, {key, count: 0, indices: []}) collection[key] = ref if (increment) { ref.count++ ref.indices.push(index) } return ref } laureates.forEach( (laureate, laureateIndex) => { const { prizes } = laureate prizes.forEach(prize => { const { year: strYear, category, affiliations } = prize const year = parseInt(strYear) const yearRef = getCreateCountAndAppend(years, year, laureateIndex, {countries: []}) const categoryRef = getCreateCountAndAppend(categories, category, laureateIndex) minYear = Math.min(minYear, year) maxYear = Math.max(maxYear, year) affiliations.forEach( affiliation => { let { name, city, country } = affiliation if (!country) { country = 'No Affiliation' } let countryName = country.replace('the ', '').replace(/.*\(now /, '').replace(')', '') affiliation.country = countryName yearRef.countries.push(countryName) const countryRef = getCreateCountAndAppend( countries, countryName, laureateIndex, { years: [], flag: (flags.find(cnt => cnt.name.toLowerCase() === countryName.toLowerCase()) || {emoji: '👤'}).emoji }) countryRef.years.push(year) }) }) }) for (let i = minYear; i < maxYear; i++) { getCreateCountAndAppend(years, i, -1, {countries: []}, false) } function moveKeyToBack(collection, key) { const cache = collection[key] delete collection[key] collection[key] = cache } ['Russia','Canada','Sweden','Switzerland', 'Denmark', 'Netherlands', 'France', 'United Kingdom', 'Germany', 'Czech Republic','Japan', 'Hungary','Austria','Portugal', 'No Affiliation', 'Israel','Italy','Spain', 'Tunisia', 'USA'].forEach( key => moveKeyToBack(countries, key) ) return { minYear, maxYear, laureates, years, countries, categories, counts } }32:[] 2d:{"title":"Nobel Prize Awards","cells":[{"id":0,"value":"title = md `# Nobel Prize Awards`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"getCountForCountry = (country) => {\n const result = []\n let last\n for (let i = data.minYear; i <= data.maxYear; i++) {\n let count = 0\n const years = data.years[i]\n if (years) {\n const { countries } = years\n count = countries.filter(countryName => countryName === country).length\n }\n last = {year: i, count}\n result.push(last)\n }\n\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"scales = {\n const x = d3.scaleBand()\n .domain(d3.range(data.maxYear - data.minYear + 1).map(i => data.minYear + i))\n .range([120, width - margin.right])\n .padding(0.1)\n\n const y = d3.scaleLinear()\n .domain([0, 20])\n .range([height - margin.bottom - margin.bottomHeight, height - margin.bottom])\n return {\n x,\n y\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"margin = ({\n left: 10,\n right: 30,\n bottom: 20,\n top: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"catEmoji = ({\n 'physics': '⚛️',\n 'chemistry': '🧪',\n 'peace': '☮️',\n 'medicine': '🩺',\n 'literature': '📚',\n 'economics': '📈'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"d3.range(data.maxYear - data.minYear + 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"Object.values(data.years[2022])[0].filter(countryName => countryName === \"USA\").length","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"laureateDataset = d3.json('https://api.nobelprize.org/v1/laureate.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"array = laureateDataset.laureates","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"laureate =data.laureates.map(d => {\n let firstname = d.firstname;\n let surname = d.surname;\n let born = d.bornCountry;\n let died = d.diedCountry;\n let year = d.prizes[0].year;\n let category = d.prizes[0].category;\n let share = d.prizes[0].share;\n let work = d.prizes[0].affiliations[0].name;\n let city = d.prizes[0].affiliations[0].city;\n let country = d.prizes[0].affiliations[0].country;\n return {firstname, surname, year, category, share, city, country, born, died, work};})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"countries_o = d3.groups(laureate, d => d.country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"countries_o.filter((d) => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1173,"value":"countries = (radio ==='country')? d3.group(laureate, d => d.country): (radio ==='born')? d3.group(laureate, d => d.born): d3.group(laureate, d => d.category)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"title2 = md`# NOBEL PRIZE LAUREATES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"title4 = md`### FULL LIST`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"viewof searchTime = Inputs.search(laureate, {\n datalist: countries_o.map((d) => d[0]),\n label: \"Find in table\",\n query: \"Spain\"\n //placeholder: \"Type Name or Country\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"table = Inputs.table(searchTime, { rows: 15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"title3 = md`### GROUP BY COUNTRY, COUNTRY OF BIRTH OR CATEGORY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"viewof searchTime2 = html` \n \n \n \n \n \n

\n ${viewof radio}\n

\n ${viewof searchTime3}\n

\n ${lpc}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"table2 = Inputs.table(searchTime3, { rows: 15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"viewof radio = Inputs.radio([\"country\", \"born\", \"category\"], {\n value: \"born\",\n label: \"Group options:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"viewof searchTime3 = Inputs.select(countries, {\n sort: true,\n value: countries.get(\"Peru\"),\n label: \"Group by:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"lpc = md`${searchTime3.length} laureates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"countryFlags = {\n const result = await d3.json('https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/by-code.json')\n result['CZ'].name = 'Czech Republic'\n result['US'].name = 'USA'\n return result\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"flags = Object.values(countryFlags)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}