2b:null 2c:["$","title",null,{"children":"Reactive Widget FIFA 22 | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:T1232,function FilterWidget( dataset, { initialFilters = {} } = {} ) { const playerNames = Array.from(new Set(dataset.map(d => d.long_name).filter(Boolean))).sort(); const uniqueNationalities = Array.from(new Set(dataset.map(d => d.nationality_name).filter(Boolean))).sort(); const [minAge, maxAge] = dataset.length ? d3.extent(dataset, d => d.age || 0) : [0, 100]; const [minShooting, maxShooting] = d3.extent(dataset, d => d.shooting); const [minPassing, maxPassing] = d3.extent(dataset, d => d.passing); const [minPace, maxPace] = d3.extent(dataset, d => d.pace); const [minHeight, maxHeight] = d3.extent(dataset, d => d.height_cm); const ageExtent = [minAge, maxAge]; const shootingExtent = [minShooting, maxShooting]; const passingExtent = [minPassing, maxPassing]; const paceExtent = [minPace, maxPace]; const heightExtent = [minHeight, maxHeight]; const nameSelect = searchCheckbox(playerNames, { label: "Player Name:", height: 100, value: playerNames }); const nationalitySelect = searchCheckbox(uniqueNationalities, { label: "Nationality:", height: 100, value: uniqueNationalities }); const ageSlider = Inputs.range([minAge, maxAge], { label: "Select Max Age:", step: 1 }); const shootingSlider = rangeSlider({ min: shootingExtent[0], max: shootingExtent[1], value: [shootingExtent[0], shootingExtent[1]], precision: 0, title: 'Shooting:' }); const passingSlider = rangeSlider({ min: passingExtent[0], max: passingExtent[1], value: [passingExtent[0], passingExtent[1]], precision: 0, title: 'Passing:' }); const paceSlider = rangeSlider({ min: paceExtent[0], max: paceExtent[1], value: [paceExtent[0], paceExtent[1]], precision: 0, title: 'Pace:' }); const heightSlider = rangeSlider({ min: heightExtent[0], max: heightExtent[1], value: [heightExtent[0], heightExtent[1]], precision: 0, title: 'Player Height (cm):' }); function applyFilters() { const selectedPlayerNames = nameSelect.value; const selectedNationalities = nationalitySelect.value; const ageRange = ageSlider.value; const shootingRange = shootingSlider.value; const passingRange = passingSlider.value; const paceRange = paceSlider.value; const heightRange = heightSlider.value; return dataset.filter(player => { if (selectedPlayerNames.length > 0 && !selectedPlayerNames.includes(player.long_name)) { return false; } if (selectedNationalities.length > 0 && !selectedNationalities.includes(player.nationality_name)) { return false; } if (player.age < ageRange[0] || player.age > ageRange[1]) { return false; } if (player.shooting < shootingRange[0] || player.shooting > shootingRange[1]) { return false; } if (player.passing < passingRange[0] || player.passing > passingRange[1]) { return false; } if (player.pace < paceRange[0] || player.pace > paceRange[1]) { return false; } if (player.height_cm < heightRange[0] || player.height_cm > heightRange[1]) { return false; } return true; }); } const container = htl.html`

Filter Controls

${nameSelect} ${nationalitySelect} ${ageSlider} ${shootingSlider} ${passingSlider} ${paceSlider} ${heightSlider}

`; function showValue() { // For example, update an element or log the current filtered result: console.log("Current filtered count:", widget.value.length); } let widget = ReactiveWidget(container, { value: applyFilters(), showValue }); function updateWidgetValue() { widget.value = applyFilters(); showValue(); } nameSelect.addEventListener("input", updateWidgetValue); nationalitySelect.addEventListener("input", updateWidgetValue); ageSlider.addEventListener("input", updateWidgetValue); shootingSlider.addEventListener("input", updateWidgetValue); passingSlider.addEventListener("input", updateWidgetValue); paceSlider.addEventListener("input", updateWidgetValue); heightSlider.addEventListener("input", updateWidgetValue); widget.nameSelect = nameSelect; widget.nationalitySelect = nationalitySelect; widget.ageSlider = ageSlider; widget.shootingSlider = shootingSlider; widget.passingSlider = passingSlider; widget.paceSlider = paceSlider; widget.heightSlider = heightSlider; return widget; } 32:[{"id":"f5f2c14b727ed6b672e87e1c6fdb95c957bb49de8ab3fc01ed2f60a471262cfad2775e3c54a4d891e7713b55c08b36288a44da53573bd691df014f792524903d","href":"https://static.observableusercontent.com/files/f5f2c14b727ed6b672e87e1c6fdb95c957bb49de8ab3fc01ed2f60a471262cfad2775e3c54a4d891e7713b55c08b36288a44da53573bd691df014f792524903d","name":"players_22.csv","type":"text/csv","lastModified":1744729224872.157,"size":13621492}] 2f:{"id":"2ea3948c8ef330fe","slug":null,"title":"Reactive Widget FIFA 22","thumbnail":"15e801a0b3ec16d415cdd1e255b9673aa9e06df19e0272bbfb5034e658bbf6ca","access_level":"public","create_time":"$D2025-04-15T15:00:24.872Z","update_time":"$D2025-04-22T02:39:36.933Z","view_time":null,"first_public_time":"$D2025-04-15T15:38:04.750Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":364,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c43a3832073d59e0","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/7236be39798128ec4d4f3c6f7847b6409a07099a3c87825dcc50c3ec2860644e","tier":null,"bio":""}],"members":[{"type":"individual","id":"c43a3832073d59e0","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/7236be39798128ec4d4f3c6f7847b6409a07099a3c87825dcc50c3ec2860644e","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Reactive Widget FIFA 22","cells":[{"id":0,"value":"# Reactive Widget FIFA 22","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"FilterWidget is a custom reactive input widget built for ObservableHQ that enables users to interactively filter football player data. It allows for multiple selection options—via checkboxes and range sliders—and returns both an HTML container and a reactive value attribute (holding the filtered dataset). This widget adheres to the [Reactive Widgets](https://reactivewidgets.com/) design pattern and [synchronizes](https://observablehq.com/@observablehq/synchronized-inputs) with external inputs using Inputs.bind, making it ideal for dynamic data exploration. This widget was built by [Jonathan Tarun Rajasekaran](https://observablehq.com/d/8586f881717414c5) for the class - CS5010 Programming Design Paradigms - at Northeastern University under [Professor John Alexis Guerra Gomez](https://johnguerra.co/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"## How to use\n\n- Import: import {FilterWidget} from \"2ea3948c8ef330fe\"\n\n- Use a dataset containing these columns:
\n - long_name\n - player_positions\n - nationality_name\n - shooting\n - passing\n - pace\n - height_cm\n - age\n\n- Use the widget on an observable notebook as follows: viewof widget = FilterWidget(data) where \"data\" is your dataset with the aforementioned columns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"viewof playerFilters = FilterWidget(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"Inputs.table(playerFilters, {\n columns: ['long_name', 'player_positions','nationality_name','shooting','passing','pace','height_cm','age'] // Include only these columns\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"## Problem Statement\n\nModern data exploration often requires users to filter datasets interactively based on multiple criteria, in the case of football players - player names, nationalities, and performance metrics like shooting, passing, pace, or even physical attributes like age and height. Standard inputs are limited to one-dimensional controls; however, real-world problems call for compound and synchronized controls that update the view as well as the underlying reactive state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"## Solution\n\nFilterWidget provides an elegant solution by:\n\n- Displaying an HTML element that contains multiple input controls (checkboxes for names and nationalities; range sliders for numerical attributes).\n\n- Exposing a value property that holds the filtered subset, updating automatically as any control changes.\n\n- Supporting two-way synchronization with external inputs using the viewof operator and Inputs.bind.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"## Bluesky Post\n\nCheck out my bluesky post [here](https://bsky.app/profile/jonathantarun.bsky.social/post/3lmuho25bvc24).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"## Dataset\n\nFor this widget I used the \"players_22.csv\" dataset from the [kaggle fifa datasets](https://www.kaggle.com/datasets/stefanoleone992/fifa-22-complete-player-dataset).\n\nThis widget can be used with any similar dataset that contains the required columns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"## Synchronized Inputs\n\nThis external age range slider demonstrates the synchronized inputs feature using inputs.bind()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"viewof syncedAge = Inputs.range([16,54], {label: \"Sync Age Range:\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"Inputs.bind(viewof syncedAge, viewof playerFilters.ageSlider)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"playerFilters\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"## The reactive widget - FilterWidget()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = FileAttachment(\"players_22.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"uniqueNationalities = Array.from(new Set(data.map(d => d.nationality_name).filter(Boolean))).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function getNumericExtent(data, accessor) {\n const values = data.map(accessor).filter(d => d != null && !isNaN(d));\n return values.length > 0 ? d3.extent(values) : [0, 100];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"overallExtent = getNumericExtent(data, d => d.overall);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"ageExtent = getNumericExtent(data, d => d.age);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"heightExtent = getNumericExtent(data, d => d.height_cm);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"paceExtent = getNumericExtent(data, d => d.pace);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"shootingExtent = getNumericExtent(data, d => d.shooting);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"passingExtent = getNumericExtent(data, d => d.passing);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"function getAllPlayerNames(dataset) {\n // Check if the dataset is valid\n if (!Array.isArray(dataset)) {\n console.error(\"Invalid input: dataset must be an array.\");\n return []; // Return empty array on invalid input\n }\n\n // Use the map function to create a new array containing only the long_name values\n const names = dataset.map(player => player.long_name);\n\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"playerNames = getAllPlayerNames(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import { ReactiveWidget } from \"@john-guerra/reactive-widgets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"