Gist 879f0558f74087fe6297c49737f4560f

100%

Gist 879f0558f74087fe6297c49737f4560f

✓ Published0🌍 Public

Last edited Feb 1, 2017

Created on Feb 1, 2017

This interactive scrollytelling visualization guides viewers through a literature-mining workflow for Alzheimer’s disease research, using PubMed-derived publication and citation data. It shows how data techniques help graduate students identify impactful clinical studies amid a growing flood of papers. The interface uses D3.js (including `d3.select`) to update narrative text, a vertical navigation menu, and a Plotly bar chart where hovering reveals details and clicking labels opens external links. The analysis highlights trends in publication volume, journal impact factors, and citation milestones, with data sourced from PubMed and processed into an interactive narrative.

AI-generated description

Similar vizzes

Loading thumbnail…

Combat Alzheimer's Disease

This interactive visualization explores Alzheimer's Disease research literature, guiding viewers through trends, journals, and impactful papers. Using D3.js and Plotly, it presents a multi-section narrative interface—Intro, Trends, Journals, Papers, Recent, and Advice—each offering a distinct analytical view. The Trends section shows a bar chart comparing clinical and non-clinical publication growth since 1997, highlighting the stagnation of clinical research despite overall growth. Journals section maps impact factor against citations per paper for top journals, revealing a clear correlation. Papers and Recent sections rank publications by citations, and the final Advice section synthesizes insights for graduate students navigating the literature. Data is sourced from PubMed, with interactive elements allowing users to click labels and hover over charts for deeper exploration.

HHeronwang

82% match

Loading thumbnail…

Gist 2f2eacadf93dfd159da1

This visualization shows journal impact data from the 2012 Journal Citation Reports, rendered as an interactive scatter plot. Each point represents a journal, with position encoding impact factor versus total citations and point size mapping the Article Influence Score. The view is implemented with React managing the component state and D3.js handling the layout and scales. Points are drawn using WebGL for efficient rendering of hundreds of journals, and the animation smoothly transitions points when the underlying data or filters change. SVG is used for axes, labels, and interactive hover effects, while the WebGL layer renders the data points themselves. The visualization enables exploration of relationships between citation metrics across physics, chemistry, and biology journals.

BBenHeubl

68% match

Loading thumbnail…

Gist d2f2bc6be1716820160ed5183ea07eaa

This example shows a browser-based text analytics pipeline that scrapes and processes web content before visualizing topic models. The code first uses Selenium with Chrome WebDriver to scrape data, then applies NLP libraries including NLTK, spaCy, TextBlob, and gensim’s LdaModel for topic modeling and coherence scoring. The final visualization employs Plotly’s `plotly.express` and `plotly.graph_objs` to render interactive charts, with `pyo.init_notebook_mode()` enabling notebook display. The rendering approach is evident from the use of `go` traces and `px` figures, though the specific chart type is not shown in the code snippet. The data source is dynamic web pages, as indicated by the Selenium scraping logic.

AArizonaTay

66% match

Loading thumbnail…

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

335degrees

65% match

Loading thumbnail…

scrollytest3

This scrolling visualization demonstrates a step-through narrative experience where sections of text are fixed to the left while a graph animates on the right, guided by the user's scroll position. Built with D3 v4 and the d3-dsv module for data parsing, it uses the graph-scroll library to trigger animated transitions between steps as the reader scrolls. The SVG rendering includes smooth, state-driven updates, likely showing a dataset that changes or highlights different aspects with each section. The design focuses on storytelling with data, letting the scroll control the flow of the visualization.

335degrees

65% match

Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM

65% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes a dataset of academic metrics, allowing users to switch between variables like citations, research, and teaching for both axes. Built with D3 v6, it uses reusable chart and menu components, with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for rendering. The plot animates transitions via `d3.transition` when axes change, with circles growing on entry and repositioning smoothly. Data loads from an external CSV, and menus dispatch change events to update the plot’s x and y value accessors.

AABCDB15

64% match

Loading thumbnail…

Fork of Scatter plot for AI Research

This interactive scatter plot visualizes AI research metrics by country, allowing users to compare attributes like citations, documents, and H-index through dropdown menus. The visualization uses React with D3 v5 scales and SVG rendering, featuring a color legend that highlights individual countries on hover while fading others. Data comes from a SCImago Journal Rank CSV file, processed with D3's csv parser and sorted by citation count before display.

JJason

64% match