31:T4ca,viewof interactivity = { const unit = html``; unit.onchange = () => { state.unit = unit.value; update(); }; const league = html``; league.onchange = () => { state.league = league.value; update(); }; const team = html``; team.onchange = () => { state.team = team.value; update(); }; const trend = html``; trend.onchange = () => { state.trend = !state.trend; update(); }; const view = html`

Unit ${unit}

League ${league}

Team ${team}

1 per 90 ${trend}

` return view; }32:Ta63,function update() { // Filters let subset = players; if (state.league !== 'both') { subset = players.filter(d => d.league === state.league); } if (state.team !== 'all') { subset = subset.filter(d => d.team === state.team); } // Join const points = chart.selectAll('.point') .data(subset, d => d.id); const labels = chart.selectAll('.label') .data(subset.filter(d => +d[state.unit] === d3.max(subset, dd => +dd[state.unit])), d => d.id); const trends = chart.selectAll('.trend') .data([players]); x.domain(d3.extent(players, d => +d[state.unit])); // Axes chart.selectAll('.xaxis') .transition() .duration(500) .call(d3.axisBottom(x).ticks(5)) .call(g => g.selectAll('line') .attr('y1', `5`) .attr('y2', `${-height + margin.bottom}`) ); chart.selectAll('.xaxis-label').text(units(state.unit)); // Points points.enter() .append('circle') .attr('class', d => `point point--${d.league}`) .attr('opacity', 0) .attr('cx', d => x(d[state.unit])) .attr('cy', d => y(d.min)) .attr('r', 8) .on('mouseover', function(d) { tip.show(d, this) }) .on('mouseout', function(d) { tip.hide() }) .transition() .duration(500) .attr('opacity', 1); points .transition() .duration(500) .attr('cx', d => x(d[state.unit])) .attr('cy', d => y(d.min)); points.exit() .transition() .duration(500) .attr('opacity', 0) .remove(); // Labels labels.enter() .append('text') .attr('class', 'label') .attr('dy', '0.35em') .attr('opacity', 0) .attr('x', d => x(d[state.unit]) + 15) .attr('y', d => y(d.min)) .text(d => d.name) .transition() .duration(500) .attr('opacity', 1); labels .transition() .duration(500) .attr('x', d => x(d[state.unit]) + 15) .attr('y', d => y(d.min)) .text(d => d.name); labels.exit() .transition() .duration(500) .attr('opacity', 0) .remove(); // Trend trends.enter() .append('line') .attr('class', 'trend') .attr('clip-path', 'url(#clip)') .attr('opacity', 0) .attr('x1', x(x.domain()[0])) .attr('x2', x(x.domain()[1])) .attr('y1', y(x.domain()[0] * 90)) .attr('y2', y(x.domain()[1] * 90)); trends .transition() .duration(500) .attr('opacity', d => state.trend ? 1 : 0) .attr('x1', x(x.domain()[0])) .attr('x2', x(x.domain()[1])) .attr('y1', y(x.domain()[0] * 90)) .attr('y2', y(x.domain()[1] * 90)); }33:T55f,html``34:T50d,players = d3.csvParse(`id,name,team,min,g,ga,league 1,Salah,LIV,2085,19,29,England 2,Jota,LIV,1666,12,13,England 3,Mané,LIV,1961,11,12,England 4,Sterling,MCI,1491,10,11,England 5,Fernandes,MAN,2136,9,15,England 6,Ronaldo,MAN,1746,9,12,England 7,Smith Rowe,ARS,1380,9,11,England 8,Dennis,WAT,1828,9,14,England 9,Son,TOT,1838,9,14,England 10,Vardy,LEI,1322,9,10,England 11,Raphinha,LEE,1892,9,11,England 12,Gallagher,CRY,1934,8,11,England 13,Bowen,WHU,2223,8,16,England 14,Antonio,WHU,2202,8,14,England 15,Maupay,BHA,1746,8,10,England 16,Mahrez,MCI,1015,8,12,England 17,Zaha,CRY,1752,8,9,England 18,Silva,MCI,2141,7,8,England 19,Saka,ARS,1741,7,11,England 20,Kane,TOT,1972,7,9,England 21,Benzema,RMD,1800,18,27,Spain 22,de Tomás,ESY,2034,13,16,Spain 23,Júnior,RMD,1862,13,18,Spain 24,Joselu,ALV,2069,12,14,Spain 25,Juanmi,BET,1354,12,13,Spain 26,Correa,ATM,1418,11,15,Spain 27,Ünal,GET,1654,11,11,Spain 28,Aspas,CLV,1948,11,14,Spain 29,Guedes,VAL,1924,9,14,Spain 30,Suárez,ATM,1470,9,11,Spain 31,Danjuma,VIL,981,8,10,Spain 32,Soler,VAL,1436,8,10,Spain 33,Moreno,VIL,986,8,10,Spain 34,Depay,BAR,1379,8,10,Spain 35,Oyarzabal,SOC,1436,8,10,Spain 36,Mir,SEV,1442,8,8,Spain 37,Iglesias,BET,869,7,7,Spain 38,Molina,GCF,1330,7,10,Spain 39,Boyé,ELC,1366,7,10,Spain 40,Asensio,RMD,1155,7,7,Spain `)35:[] 2f:{"title":"Interactive Charts","cells":[{"id":4,"value":"md`# Interactive Charts\nWorking through interactive controls for Observable charts, using top goalscorer data for La Liga and the Premier League as of February 25, 2022. [Companion article on interactive visualization](https://envylabs.com/insights/how-to-create-interactive-data-visualizations/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"container.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"container = d3.create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"callTip = container.call(tip);","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"chart = container.append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"clipPath = chart.append('clipPath')\n .attr('id', 'clip')\n .append('rect')\n .attr('class', 'clip')\n .attr('x', margin.left)\n .attr('y', 0)\n .attr('height', height - margin.bottom)\n .attr('width', width - margin.left - margin.right);","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"x = d3.scaleLinear()\n .domain(d3.extent(players, d => +d.g)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"y = d3.scaleLinear()\n .domain(d3.extent(players, d => +d.min)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"start = update();","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"xAxis = chart.append('g')\n .attr('class', 'xaxis')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(5))\n .call(g => g.selectAll('line')\n .attr('y1', `5`)\n .attr('y2', `${-height + margin.bottom}`)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"xAxisTitle = chart.append('text') \n .attr('class', 'xaxis-label')\n .attr('transform', `translate(${(width / 2)}, ${(height + 15)})`)\n .text('Goals');","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"yAxis = chart.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y).ticks(5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"yAxisTitle = chart.append('text')\n .attr('class', 'yaxis-label')\n .attr('dy', '1em')\n .attr('x', 0 - (height / 2))\n .attr('y', 0 - margin.left)\n .attr('transform', 'rotate(-90)')\n .text('Minutes');","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`## Tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"tip = d3Tip()\n .attr('class', 'tip')\n .offset([-10, 0])\n .html(function(d) {\n return `${d.name}${d.team} • ${d[state.unit]} ${state.unit}`\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"state = ({unit: 'g', league: 'both', team: 'all', trend: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"units = {\n return d3.scaleOrdinal()\n .domain(['g', 'ga'])\n .range(['Goals', 'Goals + Assists']);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"margin = ({top: 40, right: 60, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"d3Tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"md`## Credit\nThanks to https://observablehq.com/@uwdata/introduction-to-d3 for helping bridge interactive D3 approaches to the way Observable works.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}