Tell us what works and what could be better. We read every submission.
@adilyalcin·51 public vizzes
This interactive visualization evaluates how users perceive insights in a dataset, showing the distribution of participant responses across datasets, experiment order, and correctness. It uses the Keshif library to render a multi-panel interface with categorical summaries on the left and right, while the middle panel displays feature and data type breakdowns. The configuration loads data from a Google Spreadsheet via a Google Doc ID, splitting columns for feature and data types on load. The interface supports filtering, highlighting, and comparison of records, with a time metric shown in seconds.
This visualization displays a dataset of apartments as a faceted browsing interface, with each record represented by a row sorted by minimum cost and searchable by name. Users can filter results through left, middle, and right panel summaries for attributes like state, city, Yelp score, included utilities, and type, while details such as address and external links to Zillow, Yelp, and Apartments.com are hidden until zoomed. The code uses Google Sheets as the data source via a gdocId and applies transformations like `DATETIME` and `SPLIT` during loading. It relies on the KSHF configuration format to define panel layouts and record display, though it does not use D3 or Three.js.
This visualization presents a sample dataset of Jira issues, organized as an interactive multi-panel dashboard. It shows how individual issue records relate to categorical fields like Priority, Issue Type, and Status, while also displaying temporal distributions for Created and Updated dates. The view uses a custom configuration (kshf_config.json) to load spreadsheet data from a Google Docs source, with summaries arranged across left, right, and bottom panels. The implementation relies on D3.js for data binding and SVG rendering, including time-scale intervals for date axes and collapsible category groupings, while a middle panel lists records with text search and sort functionality.
Fosterly Intern Match visualizes intern applicants as an interactive scatterplot, where each point represents a candidate and clusters reveal patterns across schools, degrees, job types, and preferred locations. The left panel filters by academic attributes like school and graduation date, while the right panel shows geographic preferences, and the middle panel breaks down categorical fields such as majors and job interests. Built with d3.forceSimulation for point layout and d3-geo for map-based location views, the visualization pulls live applicant data from a Google Sheets document, enabling dynamic filtering and zoomable record details through the KSHF configuration framework.
Fighters visualizes the life trajectories of individuals from Kosovo through an interactive force-directed graph. Each node represents a person, with summary panels on the left and right displaying categorical attributes such as gender, age, ethnicity, employment, and outcomes like imprisonment or death. The middle panel renders a geographic map using d3.geoPath, plotting municipalities and villages from the data source. The visualization leverages d3.forceSimulation for node layout and reads data from a Google Spreadsheet via a gist-hosted configuration, offering linked filtering across all attribute panels.
This interactive dashboard visualizes certified business enterprises in Washington, DC, using a linked-view layout. It shows a choropleth map of wards alongside bar charts for business structure, certification categories, preference points, and a timeline of expiration dates, with a searchable business list. The visualization is built with d3.forceSimulation for dynamic layout, d3.geoPath for rendering ward boundaries, and d3.transition for smooth updates. Data is loaded from a Google Sheet and processed with custom parsers for categories, dates, and geographic identifiers, enabling coordinated filtering and zoom interactions across all panels.
This visualization presents survey results from FHI360’s Bangladesh Obirodh online survey, using a multi-panel layout to explore demographic attributes, concerns, and engagement-related responses. Left and right panels display categorical and scaled summaries such as gender, age, location, and concern ratings for issues like domestic violence or terrorism, while the middle panel focuses on personal causes and channels for pursuing them. Data is loaded from a Google Spreadsheet via a gdocId, and the configuration file (kshf_config.json) defines panel placement, collapsed states, and value mappings for each summary. The visualization relies on JavaScript libraries for rendering, with D3-style data binding and force simulation implied for interactive filtering and layout, though the exact API calls are not explicitly visible in the provided configuration.
This interactive dashboard presents survey results from 2017 data visualization professionals, showing responses to questions about experience, tools, demographics, and workplace roles. The visualization uses a multi-panel layout with collapsible summary sections for each question, displaying aggregated responses as horizontal bar charts. Data is loaded from a Google Spreadsheet via the kshf_config JSON configuration, which defines the survey questions and their panel assignments. The interface allows users to explore categorical responses such as gender, ethnicity, chart types used, and organizational roles, with some panels collapsed by default to manage the dense information. The visualization is built with a custom configuration-driven approach rather than a standard charting library, relying on the kshf framework to parse and render the survey data.
This interactive visualization presents the results of a 2017 survey of data visualization professionals, using a bar chart to display responses to over thirty questions about tools, roles, and work practices. The chart loads survey data from a Google Spreadsheet and groups questions into left, right, and middle panels based on survey sections. It uses D3.js to render each response category as a horizontal bar, with the width of the bars reflecting the count of responses. The interface allows users to toggle between different survey questions and explore the distribution of answers across demographic and professional categories.
The Keshif Browser Configuration example visualizes a dataset of data breaches, showing a faceted summary of records by industry with an interactive left-side panel for filtering. It displays the distribution of breaches across industries while hiding other categorical and temporal summaries from view. The code loads data from a Google Sheet via a gdocId reference and configures the Keshif library’s `summaries` array to specify panel placement, including an intervalScale for time-based data. It relies on Keshif’s built-in aggregation and rendering, with explicit label widths and a record name for the dataset.
Andy’s Amex spending is shown as a hierarchical treemap-like layout with a left-side category panel and a middle panel listing merchants and amounts, colored by category and subcategory. The visualization uses the KSHF config with D3-based rendering, parsing dates from a Google Sheets source and computing weekly aggregates. It sums amounts by metric type, collapses country and amount summaries, and displays month-of-date as a hidden dimension, while the left panel supports interactive expansion of Category, Subcategory, Country, and Day of Week.
This visualization presents nutritional data for 77 cereals using the Keshif browser configuration, displaying summaries across left, right, and middle panels. It shows categorical fields like Brand, Type, and Shelf Level alongside quantitative measures such as Sodium, Fiber, Potassium, Calories, Protein, and Rating, with percentile indicators and collapsible sections. The record display uses a scatter plot view sorting by Rating and plotting Potassium, with text search on cereal names. Data loads from a Google Sheets document via the configuration’s source URL, while the interface relies on Keshif’s built-in rendering, which internally uses D3.js for layout and interactions.
HiddenHunger visualizes global fragility by linking country-level summaries of conflict, climate, and corruption z-scores with GDP and continent groupings on an interactive map. It uses the KSHF library with d3.geoPath for geographic rendering and loads data from a Google Spreadsheet via a gdocId source. Countries are listed with sortable metrics, and clicking a country zooms to its details, while left and right panels filter by region, fragile state, and percentile-ranked indicators. The visualization highlights correlations between instability factors and economic conditions across nations.
This visualization maps the profiles of individuals from Kosovo, showing demographic traits like gender, ethnicity, education, and location alongside life-status features such as employment, marriage, and criminal background. It uses a custom configuration file to load data from a Google Spreadsheet and organize summaries into left, middle, and right panels. The implementation relies on D3’s force simulation to position nodes and likely employs canvas rendering for the interactive display, with categorical labels and feature flags derived directly from the spreadsheet fields.
The visualization displays all goals scored during the 2010 World Cup, showing each goal as a record with the scoring team, scorer, receiving team, minute, and date. It uses a custom configuration with summaries positioned in left, right, middle, and bottom panels, and a record display that lists scorers sorted by date. The code loads data from a Google Spreadsheet via a gdocId and uses a force-directed layout through `d3.forceSimulation` to position the records, with an interactive zoom on details.
Fosterly Census 2016 Survey visualizes survey responses from companies using D3.js, with interactive panels for exploring categorical, numerical, and geographic data. The visualization employs d3.forceSimulation for layout and d3.geoPath for mapping state and county locations. Summary panels on the left and right aggregate responses into filterable categories, while the middle panel displays geographic distributions. Data originates from a Google Sheets document loaded via the gist source, with custom JavaScript functions transforming raw survey answers into derived feature sets, technology stacks, and consumer types for multi-dimensional filtering and analysis.
This visualization presents a dashboard of sign-up data for the Dingman Center, summarizing attributes like student type, major, and activities participated. The interface uses a three-panel layout with left and right categorical summaries and a middle panel for time-based and linear interval scales. Built with D3.js, it employs force-directed simulations for layout and interactive list-based record displays, allowing text search and sorting by creation date. Data is loaded from a Google Sheet source, with multi-value fields split using delimiters. The visualization highlights demographic distributions and engagement patterns through synchronized panels.
This visualization shows foster family details and demographics as a node-link diagram, with each record positioned spatially and linked by shared attributes. The left panel summarizes categorical fields like willingness to adopt, provider type, and gender served, while the right panel displays demographic values such as gender, ethnicity, and marital status. A middle panel shows birth dates on a time scale. The implementation uses d3.forceSimulation to lay out nodes, with data loaded from a Google Spreadsheet via the gist’s configuration. Panels use custom label widths and categorical splits to organize the multi-dimensional summary.
The visualization presents HomelessShelters data, showing placements in homeless shelters through an interactive dashboard. It displays categorical summaries of project type and involvement episodes on the left panel, with duration of stay and project start/end dates as time-based intervals in the middle. The tool uses d3.forceSimulation for layout and d3.js for rendering, pulling data from a Google Spreadsheet via the kshf_config.json configuration. It filters records to show only episodes from 2012 to 2016, with unit labels for day counts and time scales.
This visualization shows the active youth population from 2010 to November 2016, with each individual represented as a point on a timeline. It displays demographic summaries like gender and race in left panels, alongside temporal spans for involvement start and end dates, birth dates, and current age in the middle panel. The visualization uses custom panel layouts configured through a JSON file, pulling data from a Google Spreadsheet via its public API. It relies on d3.js for rendering time-based intervals and categorical summaries, with the data processed through custom JavaScript functions for filtering and age calculation.
This visualization presents a gallery of user-submitted insights about traffic accidents, organized through an interactive browser. Each entry displays a screenshot of the insight alongside its description, with the left panel categorizing submissions by data type and aggregate measure mode, while the middle panel groups them by insight type. The interface uses KSHF (Kindred Scrollytelling Hypertext Framework) to load data from a Google Spreadsheet and renders records as a sortable, searchable list. The implementation leverages the DOM API for dynamic filtering and sorting, with custom JavaScript functions controlling the record view and a linked stylesheet styling the embedded screenshots.
This interactive survey visualization presents responses on cognitive load perceptions in visualization research, grouped into three panels covering familiarity, assessment methods, and usage in practice. Built with the KSHF library, it renders survey data from a Google Sheets document into a linked record browser where users can explore individual responses alongside summary statistics. The visualization uses JSON configuration to map survey questions to panels and employs list-based record display, enabling direct comparison of quantitative ratings and qualitative answers across respondents.
The DC Housing Insights Projects Subsidies Browser visualizes a dataset of housing subsidy records through an interactive dashboard. It shows active subsidy status, agency, rent-to-FMR ratio, portfolio, program type, and subsidy information source across left, middle, and right panels. The bottom panel displays project completion and POA start dates on a time scale. Using d3.forceSimulation for layout, the browser reads from a Google Sheets source and presents categorical summaries with collapsible sections.
The DC Housing Insights Projects Browser visualizes subsidized housing projects across Washington, D.C., using a multi-panel faceted browser. Records appear as a grid of thumbnail images with project names, street-view links, and sortable columns for building count and subsidy dates. The tool uses the KSHF library with d3.js to aggregate data from a Google Spreadsheet into interactive summary panels, including categories like "At Risk" or "Expiring," plus filters for ward, zip code, owner, and manager type. Users can collapse panels and toggle details by zooming on individual project cards.
The visualization displays every spell cast in the Harry Potter series as a single point, arranged along a horizontal axis by story position and grouped by book and spell name in the left panels. It uses the KSHF framework to load data from a Google Spreadsheet and renders an interactive concordance, where users can search or click to zoom into details. The implementation relies on D3’s force simulation for layout and a custom list view for records, with sortable columns for position and ID.
This interactive browser lets users explore a collaboratively curated list of data science resources, showing each resource’s topic, type, and cost status. The visualization uses a facet panel to filter and summarize the Google Sheets data, while individual records appear in a sortable list with external links and comments. Built with D3.js, the implementation reads the spreadsheet via the `gdocId` source and renders the records using the custom `recordView` function, with dynamic left-panel summaries driven by the configuration in `kshf_config.json`.
This interactive gallery explores SIOP conference sessions from 2008 to 2016, organizing hundreds of submissions by year, format, and content area. A left panel lists time and category filters while a right panel shows primary and secondary topics. The tool uses d3.forceSimulation to position linked summaries and reads spreadsheet data from a Google Doc via the kshef configuration. Each record displays its title, with text search and year-based sorting enabled through the recordDisplay settings.
This visualization displays certified business enterprises from a Google Sheets dataset, organized by business structure, certifications, ward, and expiration date. The records appear in a searchable, sortable list, with summaries filtered into left and bottom panels using DC.js and Crossfilter. The visualization uses the dc.js charting library, built on D3.js, to create linked interactive charts that respond to user selections. A JSON configuration file defines the data source and layout, enabling dynamic filtering across all panels simultaneously.
The visualization displays DC Council legislations, with each record listed and color-coded by summaries such as Status, Category, Type, Committee Referral, and Introduction Date. It uses d3.forceSimulation to position the records and d3.forceLink to connect related items, while the left and right panels show categorical breakdowns and the bottom panel shows temporal distribution. The data comes from a Google Spreadsheet, and the record display includes a text search and a link to the official legislation page.
Datable Candidate Explorer visualizes a pool of job candidates as an interactive force-directed graph, where each node represents a person and edges connect candidates with shared attributes. The left, middle, and right panels display categorical survey responses—such as community organizing experience, security clearance, and programming languages—as filterable summaries. Using d3.forceSimulation for layout and d3 selection/event handling for interactivity, the explorer loads data from a Google Sheets document via a gist-hosted configuration file. Clicking a node zooms into a text search-based record view, revealing each candidate's self-description through a custom recordView function.
The visualization maps Detroit house foreclosures by neighborhood, showing the dollar amount owed for each property as a point on a geographic layout. It uses a custom force-directed simulation (`d3.forceSimulation`) to position foreclosure records, with neighborhood names displayed in the middle panel and owed amounts in the bottom panel, scaled linearly and prefixed with a dollar sign. The data comes from a JSON file loaded from a local source, originally derived from a New York Times interactive mosaic. The interface is configured via a KSHF config file, with labels on both side panels and a centered middle panel.
This visualization presents a hierarchical browser for restaurant inspection data, organized into collapsible summary panels for Center, Country/Area, Project Area, State, District, and District Decision, with Inspection End Date on a time scale. It uses the KSHF configuration library to load data from a Google Spreadsheet via its gdocId, mapping table rows into interactive summaries. The layout employs d3.forceSimulation for node positioning and d3.geoPath for rendering geographic boundaries, with panel-specific label widths controlling the spatial arrangement. The tool allows users to explore inspection records by filtering through categorical and temporal dimensions.
This visualization maps Airbnb listings in the Washington DC area from October 2015 as an interactive scatterplot of points on a geographic backdrop, with each listing colored and positioned by its coordinates. The display uses d3.forceSimulation to lay out the points and d3.geoPath to render the map from GeoJSON data. A linked brushing interface on the left and right panels filters listings by property attributes like room type, bed count, price per night, and review ratings, while a middle panel shows price distributions. The underlying data comes from a Google Sheets table loaded via the gist source.
The visualization displays Gordon and Betty Moore Foundation grants, showing each grant’s amount, area, organization, duration, and date in an interactive list. It uses the Keshif framework with d3.js for data binding and rendering, pulling JSON data from the Moore Foundation’s grants page. Users can sort by amount, date, or duration, and click a grant to open its details in a new tab. The left panel summarizes grant areas and amounts, while the bottom panel provides a time-based interval scale for filtering by date.
The visualization displays avalanche accidents in the United States, with each accident listed as a record and summarized by travel mode, primary activity, setting, killed count, state, and date. It uses the KSHF library’s `recordDisplay` for a sortable list, with summaries filtering panels on the left and right, and a time interval for the bottom axis. Data is loaded from a Google Spreadsheet via the `source` configuration, and sorting options are added dynamically in the `readyCb` callback, leveraging `d3` for interval scales and date handling.
This interactive disturbance-results browser visualizes a dataset of scientific papers, summarizing their characteristics by user-selected criteria like fire frequency, severity, taxa, climate, and ecosystem type. The code uses d3.forceSimulation for the underlying layout, with summaries displayed in left and right panels and a middle list showing paper titles and sortable study counts. The visualization is built from a Google Spreadsheet via the kshf_config.json configuration, and the ready callback adds interval-summary sorting options to the record display.
Keshif Browser Configuration displays city data from a Google Spreadsheet in a faceted browsing interface, with state names summarized on the left panel and numerical indicators like Culture Score Index, PctOver65, Pleasant Days Mean, Crime Rate, and Cost of Housing on the right. The Keshif library renders a sortable list of cities with text search, using interval-based summaries for sorting options. Configuration via kshf_config.json specifies panel widths, record views, and a ready callback that dynamically adds sorting controls to the browser.
This visualization presents a browsable list of QANTA questions, sourced from a Google Spreadsheet. Each question is displayed with its full text, organized by keyword category on the left panel, and paired with its answer on the right. The middle panel shows a linear, percentile-scaled interval of question length in characters. Built with the KSHF browser, it uses D3.js-style summaries and a custom `readyCb` to enable authoring and sorting, with the record list view supporting text search and detail zooming.
This visualization displays the salaries of Bay Area Rapid Transit (BART) employees, with each employee represented as a point in a scatterplot. It uses d3.forceSimulation to position the points, while summaries for Job Family, Union, and Title appear in left panels. The record display lists employees by name with their titles, and sorting options include salary components like Base, Overtime, and Total Salary. Data comes from a CSV file loaded from a hosted directory, and the layout uses three label panels with configurable widths for filtering and comparison.
A linked-view exploration of Bay Area Rapid Transit employee salaries, sourced from a public CSV gist. The left panel uses d3.summaries to aggregate categorical fields like Union, Job Family, and Title, while the right panel shows interval summaries for salary components such as TCOE, MDV, and ER. A central list, rendered via recordDisplay, sorts employees by base pay or other numeric columns and supports text search by name. Hovering or clicking a list entry triggers a zoom detail toggle, and the d3.forceSimulation-driven layout updates summaries dynamically as selections change.
Keshif Browser Configuration presents a dataset of music singles through an interactive faceted browser. The visualization displays each record as a list item in the middle panel, showing the artist and track name, while seven categorical summaries (Genre, Label, Country, Sex, Age, Type, Race) are arranged in left and right side panels for filtering. The interface uses Keshif’s configuration API, loading data from a Google Spreadsheet via a `gdocId`, and defines record rendering with a custom function that concatenates artist and track fields. The `kshf_config.json` file specifies panel widths, text search, and a zoom-based details toggle, while `kshf_style.css` sets the container dimensions to 890 by 480 pixels.
Keshif Browser Configuration displays a ranked list of music singles, showing each record as an artist-track pair with a position number. The visualization splits categorical summaries of Genre and Label on the left, while Country, Sex, Age, Type, and Race appear on the right, all sourced from a Google Spreadsheet. It uses the Keshif library to render interactive facet panels and a sortable list, with a zoom-to-details interaction. The custom CSS fixes the demo container to 890 by 480 pixels, and the configuration sets panel label widths and a text search field for filtering.
This visualization presents a comprehensive overview of U.S. presidents, displaying their portraits in a grid alongside summaries of party, birth state, occupation, college, religion, and age at inauguration. The data is loaded from a Google Spreadsheet and rendered using the Knowledge Sharing Framework (KSHF), which employs D3.js for layout and interaction. Term start dates are plotted along a time-scaled bottom panel, while the grid supports text search, sorting by age or term, and zooming into individual records. The tooltip-style record view links to official White House biographies.
This visualization explores the effectiveness and popularity of dietary supplements. It displays each supplement as a row in a three-panel layout, using heart icons to indicate the level of scientific evidence and thumbs-up icons for Google-based popularity, alongside health conditions and categories. The data comes from a Google Doc spreadsheet and an Information is Beautiful project. The implementation uses the custom `kshf` library, which leverages D3.js for the force simulation and SVG rendering, with a searchable list view and interactive zoom details.
This example uses the Keshif library to build an interactive browser for Maryland sewer overflow reports from 2004-2016, sourced from data.maryland.gov. It displays summary panels for categorical attributes like overflow type, cause, duration, zip code, county, and municipality, alongside a time-based date filter. The configuration defines custom JavaScript functions to parse raw fields, including converting duration values into human-readable buckets and formatting dates with Moment.js. Records are listed with sortable columns, and a zoom toggle expands details for individual entries.
Selfiecity visualizes 3,200 self-portraits from five global cities, arranged in a grid where each thumbnail displays a face alongside demographic and emotional attributes. Viewers explore distributions of city, sex, age, eye closure, happiness, sadness, glasses, and mouth openness via left and right summary panels, with linked highlighting and hover magnification. The interface uses a custom grid layout with CSS transitions for scaling, while data comes from a CSV file loaded through the KSHF framework, rendering each record as an image sourced from external cloud storage.
The visualization displays Nobel Prize laureates in an interactive grid, with each record showing a photo, name, and prize category. It uses the Keshif framework, loading data from Google Sheets into linked tables for prizes and laureates. Left panels summarize laureates by birth country, joint award counts, gender, and affiliation, while the middle panel groups by category with icons and overall motivation, and the bottom panel orders records by year on a time scale. The custom record view dynamically constructs HTML thumbnails and applies font-awesome icons via inline functions, with CSS styling for compact grid cells.
Cultural Visionaries visualizes a dataset of globally known people, displaying each individual’s name alongside summaries of their continent, birth country, gender, domain, industry, occupation, birth year, and Wikipedia view counts. The interface uses a three-panel layout with sortable columns for metrics like average views and HPI score. It employs the kshf library’s force simulation and dynamic data binding from a remote JSON source, with clickable external links to Pantheon profiles. The styling is handled through custom CSS, and the visualization updates records in a list format based on user-selected sort criteria.
This interactive browser of academic papers uses Keshif to display a searchable, filterable collection from a Google Spreadsheet, with papers listed in the center and summaries of Venue, Type, Citations, Affiliation, Authors, and Year in side panels. The interface lets users filter by these facets and shows each paper’s title, type, venue, year, DOI link, authors, and abstract. The configuration uses Keshif’s API with custom JavaScript functions in `loadedCb` and `recordView` to process citation data and render records, while CSS styles the paper cards and colored type badges.
This visualization presents the salaries of Bay Area Rapid Transit (BART) employees, using a force-directed graph powered by `d3.forceSimulation`. It shows each employee as a node, with job family, union, and title summarized on the left panel, while the right panel displays salary breakdowns—total, base, overtime, medical/dental/vision, and other components—with dollar amounts. The code loads employee data from CSV files, enables text search by name, and sorts records by salary fields. The rendering uses D3’s force layout, with clickable nodes and a list view for detailed records.
This interactive visualization displays four layers of synthetic time-series data, switching between stacked and grouped bar layouts through animated transitions. Users toggle between modes via radio buttons, with sequenced transitions preserving object constancy as bars morph between the two arrangements. The example uses D3 v3 with SVG rendering, employing `d3.layout.stack` for stacking, ordinal and linear scales for positioning, and chained `transition()` calls with staggered delays to animate rectangle positions, widths, and heights. Colors derive from a linear scale spanning blue-gray tones, while data generation uses a bump function inspired by Lee Byron’s streamgraph test data.