Heronwang

@Heronwang·4 public vizzes

DAND-documentation

DAND-documentation visualizes a network of file interactions, mapping how metadata and content connect across a repository. The visualization uses a force-directed layout via `d3.forceSimulation` to position nodes representing individual files, with links showing dependencies. Each node’s color and size encode the file type (e.g., `.txt` vs. `.rmd`) and its degree of connectivity, while hover effects reveal detailed tooltips via `d3.select` and `transition.attrTween`. The underlying data comes from a gist by Heronwang, parsed directly from the listed filenames, and the rendering leverages Canvas `getImageData` for pixel-level interaction feedback.

Aug 23, 2017

Loading thumbnail…

Gist 879f0558f74087fe6297c49737f4560f

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.

Feb 1, 2017

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.

Feb 1, 2017

Loading thumbnail…

fresh block

This example is a minimal D3.js v4 template that renders a static SVG canvas with a single line of text. It demonstrates the basic structure of a D3 block, showing how to select an HTML element, append an SVG container, and add a text element with custom styling. The code uses `d3.select` to target the body, then chains `.append("svg")` and `.append("text")` to build the visualization. The text is positioned with explicit `x` and `y` attributes and styled via inline CSS properties. No data is loaded or bound; the visualization simply displays the placeholder message, serving as a starting point for further development.

Dec 13, 2016