Variants

100%

✓ Published0🌍 Public

Last edited Sep 11, 2021

Created on Sep 11, 2021

This visualization aggregates COVID-19 variant counts by location using a bar chart, with each bar’s length representing the number of sequences and color encoding the variant type. It loads data from the Our World in Data COVID-19 variants CSV via the `d3.csv` method. The chart is built with the Vega-Lite API, configured through `vl.markBar`, encoding fields for location, sequence count, and variant, and rendered using `vega` and `vega-lite` libraries with tooltip support from `vega-tooltip`.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83

77% match

Loading thumbnail…

covid vaccines

This visualization displays total COVID-19 vaccinations by location, using a bar chart where each bar is colored by vaccine manufacturer. The chart ranks locations from highest to lowest vaccination totals, with tooltips revealing precise values on hover. Built with the Vega-Lite API on top of D3.js v5, it loads CSV data from a GitHub gist and renders as an SVG canvas. The code customizes axis tick colors and font styles through a config object to improve readability.

Bbhargav83

75% match

Loading thumbnail…

Variant Chart -

This visualization displays temperature data over time as a line chart, with multiple overlaid series representing different genetic variants from a JSON dataset. Each variant’s temperature curve is drawn using a natural curve interpolation, with small circles marking individual data points that reveal timestamps on hover. The chart uses React for component structure and D3 v5 scales (`scaleTime`, `scaleLinear`) and axes for rendering the time-based x-axis and temperature y-axis. The temperature data comes from a CSV of weekly San Francisco temperatures, while variant information is loaded from a local JSON file.

AAdriana Rodriguez Sanabria

75% match

Loading thumbnail…

Untitled

This example presents a bar chart of total COVID-19 cases by location, using data from a remote CSV file. The chart uses an SVG rendering with a band scale for the categorical x-axis and a linear scale for the numeric y-axis, both configured with d3.scaleBand and d3.scaleLinear. Bars are drawn as SVG rect elements with a fixed fill color, and the x-axis labels are rotated for readability. The code loads data via d3.csv and applies margins to position the visualization.

Fferneyhoughedward@gmail.com

73% match

Loading thumbnail…

Making bar chart

A horizontal bar chart displays COVID-19 case counts per country, with bars ordered by the data’s CSV order. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisLeft`/`axisBottom` for gridlines. Data is loaded via `d3.csv` and rendered as SVG rectangles with a steelblue fill, while a clickable “Hello” button triggers a browser alert.

Llori99-data

72% match

Loading thumbnail…

<iframe width="560" height="292" src="https://vizhub.com/blikitha/f111e8fa345c43fa9a6e6d45227a5024?mode=embed" title="Untitled" frameborder="0" ></iframe>

This example presents a horizontal bar chart that displays the top 20 countries by reported COVID-19 cases, based on data from a CSV file loaded via `d3.csv`. The visualization uses React to manage component state and render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and case counts to pixel positions. Each rectangle’s width encodes the case count, and the chart includes a blue gridline for the x-axis ticks.

Bblikitha

72% match

Loading thumbnail…

Fork of Covid-19 confirmed cases (Date 25/09/20)

This visualization presents COVID-19 confirmed cases by date using a bar chart rendered with SVG, alongside a world map colored by total cases using a spectral color scale. The bar chart uses d3.scaleLinear and d3.scaleBand to map cases and dates, with axis labels styled with IBM Plex fonts and interactive tooltips via d3.tip. The map employs d3.geoPath with a geoNaturalEarth1 projection, and d3.scaleOrdinal with schemeSpectral to encode country-level data. Both views load from external CSV and TopoJSON sources, with the map supporting zoom interaction.

AAaronBhasker

72% match

Loading thumbnail…

visualization project3

A scatterplot maps COVID-19 vaccination totals by location and vaccine manufacturer, with circle size and opacity encoding total vaccinations and color distinguishing categories. Built with the vega-lite-api, it registers Vega-Lite and vega-tooltip, loads CSV data from a GitHub gist via d3.csv, and applies a custom config for axis styling and font sizes. The visualization renders responsively to the full window using SVG output.

Ssofigg

72% match