2d:null 2e:["$","title",null,{"children":"Interactive Charts | Nick Walsh | Observable"}] 33: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; }34: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)); }35:T55f,html``36: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 `)37:[] 31:{"id":"8cd5f8ed877ac465","slug":"interactive-charts","title":"Interactive Charts","thumbnail":"f9529d0dffce61e5034e61a5e1b0b7c2ede8d245000a498309891940fff4f441","access_level":"public","create_time":"$D2020-07-01T15:52:47.845Z","update_time":"$D2022-02-25T18:27:34.778Z","view_time":null,"first_public_time":"$D2020-07-07T11:51:50.239Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6d4eceedfdca5ee7","login":"nickawalsh","name":"Nick Walsh","avatar_url":"https://avatars-next.observableusercontent.com/e5bc4dd76dcfef9cefe9f435e9fa7b8e6ffef2446f8ebad9891465818be03014","tier":"starter_2024"},"version":549,"publish_version":549,"role":null,"authored":false,"authors":[{"type":"individual","id":"09957addd8f21346","login":"nickawalsh","name":"Nick Walsh","avatar_url":"https://avatars-next.observableusercontent.com/e5bc4dd76dcfef9cefe9f435e9fa7b8e6ffef2446f8ebad9891465818be03014","tier":null}],"members":[{"type":"individual","id":"09957addd8f21346","login":"nickawalsh","name":"Nick Walsh","avatar_url":"https://avatars-next.observableusercontent.com/e5bc4dd76dcfef9cefe9f435e9fa7b8e6ffef2446f8ebad9891465818be03014","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"callTip = container.call(tip);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"start = update();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`## Tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"state = ({unit: 'g', league: 'both', team: 'all', trend: false});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"units = {\n return d3.scaleOrdinal()\n .domain(['g', 'ga'])\n .range(['Goals', 'Goals + Assists']);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"margin = ({top: 40, right: 60, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"d3Tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"