COVID-19 Country measures

100%

COVID-19 Country measures

✓ Published1🌍 Public

Last edited Apr 30, 2020

Created on Apr 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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.

Mmpenalver

96% match

Loading thumbnail…

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.

Mmpenalver

95% match

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`.

Mmpenalver

90% match

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907

78% match

Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907

77% match

Loading thumbnail…

COVID-19

This interactive dashboard visualizes the daily progression of COVID-19 cases, deaths, and recoveries for a selected country in 2020. Using dropdown menus built with a custom reusable `dropdownMenu` function, viewers can switch between the three status metrics and any available country to update a line chart rendered as SVG paths. The code loads data from a CSV file containing daily province-level records, aggregates entries by country and date using `d3.nest` and `reduce`, and draws the time series with `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`.

FFadziMandondo

77% match

Loading thumbnail…

Covid cases with menu to select country

This interactive visualization shows COVID-19 case data for multiple countries, allowing users to compare trends through a dropdown menu to select a country. The SVG chart displays time-series lines with a color legend identifying each nation, using a linear y-scale for case counts and a time-based x-axis. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, while `d3.line` with `curveNatural` renders smoothed paths. Data comes from a CSV file loaded via `d3.csv` from the COVID MAY Dataset.

DDean Bozic

76% match

Loading thumbnail…

COVID-19

This interactive COVID-19 dashboard displays country-level statistics using horizontal bars. Users select an attribute from a dropdown, and React state updates the chart to show that metric. Driven by a CSV of global pandemic data, the visualization renders bars with SVG rectangles via React components, using D3 scales (`scaleBand`, `scaleLinear`) and axes (`AxisBottom`, `AxisLeft`) to position the data. Tooltips appear on hover through SVG `<title>` elements.

WW9183907

76% match