mpenalver

@mpenalver·5 public vizzes

COVID-19 Country measures

This interactive tree visualization displays hierarchical data on COVID-19 country measures, sourced from a pipe-delimited CSV file. Built with D3 v3 and jQuery, it renders an SVG layout where users can click nodes to expand or collapse branches, pan/zoom via d3.behavior.zoom, and hover to highlight relationships through opacity changes and label formatting. The d3.layout.tree and d3.svg.diagonal APIs structure the hierarchy, while manual box adjustments and centered node transitions enhance navigation.

May 15, 2020

Loading thumbnail…

COVID-19 Country measures

This visualization presents COVID-19 country measures as an interactive, collapsible tree diagram. Users can click nodes to expand or collapse branches, with pan and zoom controls for navigation. The tree layout uses d3.layout.tree and d3.svg.diagonal for links, while d3.behavior.zoom enables scaling. Data is loaded from a CSV file using d3.dsv with pipe delimiters, and node text is displayed via SVG elements that appear on hover.

Apr 30, 2020

Loading thumbnail…

COVID-19 Country measures

This interactive tree diagram visualizes COVID-19 country measures, organizing hierarchical data into collapsible nodes. The visualization uses d3.layout.tree with SVG rendering and zoom/pan capabilities via d3.behavior.zoom. Users can click nodes to expand or collapse branches, while a custom context menu (d3-context-menu.js) provides additional options. The tooltip displays detailed information about each measure, and the tree layout dynamically recalculates height based on visible children. Data is loaded from a pipe-delimited CSV file using d3.dsv, converted into a nested structure via a name-to-parent map.

Apr 30, 2020

Loading thumbnail…

COVID-19 Country measure

This visualization displays a hierarchical tree of COVID-19 country measures, with nodes representing categories and subcategories of enforcement and implementation strategies. Text labels size inversely with depth, and curved links connect parent and child nodes. Built with React and D3 v5, it uses `d3.tree` for layout, `d3.linkHorizontal` for path generation, and `d3.zoom` for interactive panning. Data is loaded from a pipe-delimited CSV and converted into a tree structure using `d3.hierarchy`.

Apr 14, 2020

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark, inverted basemap displays locations with confirmed coronavirus cases as of early March 2020, each rendered as a small glowing firefly-like sprite. The visualization uses OpenLayers with a React component, drawing points from Johns Hopkins CSSE time-series data. Sprite generation employs a radial gradient with D3’s `cubehelix` color space to create the glow effect, while vector features are styled with OpenLayers `Icon` and `Style` objects on a Canvas/WebGL renderer.

Apr 14, 2020