AdrianTNare

@AdrianTNare·7 public vizzes

Covid-19 Time Series(I Forked)

This example shows the global spread of confirmed COVID-19 cases across countries from January 22, 2020, to the present day. A date slider lets viewers scrub through time, updating the size of orange circles on a world map to reflect the reported case count per location, with hover tooltips showing country-level details. The visualization uses D3.js for map rendering with `d3.geoPath` and `geoMercator`, `d3.scaleSqrt` for circle sizing, and `d3-zoom` for interaction. Data comes from Johns Hopkins University, loaded via CSV, with countries drawn from TopoJSON and animated transitions between dates.

Jun 4, 2020

Loading thumbnail…

copy graph

This interactive choropleth map visualizes the spread of COVID-19 across African countries, using color to encode categories of total confirmed cases. A slider allows switching between three different data files representing different time periods. The visualization uses D3 v5 with `geoMercator` projection, `geoPath` for rendering, and TopoJSON world atlas data merged with CSV case data. Hovering highlights individual countries, while a color legend with circles explains the ordinal color scale based on `schemeSpectral`. Pan and zoom functionality is enabled via D3's zoom behavior.

May 23, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. Hovering highlights a country in red, and the map includes a legend showing color categories. Built with D3 v5, it uses `geoPath` with the Natural Earth projection and loads geographic data from the world-atlas TopoJSON and TSV files. The visualization supports zooming via D3's zoom event and renders as an SVG.

May 22, 2020

Loading thumbnail…

Charts for Fun

Two linked charts display temperature data over time, with a bar chart and a scatter plot sharing the same dataset and axes. The bar chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the scatter plot employs `scalePoint` for discrete timestamps. Both render as SVG and customize D3 v5 axes with `axisLeft` and `axisBottom`, removing domain lines and adding axis labels. The data comes from a CSV file loaded via `csv()`, with temperature values multiplied by 1000 for display.

Apr 5, 2020

Loading thumbnail…

Multi Chart

This visualization uses four linked scatter plots to explore an MRI and Alzheimer’s dataset. It shows relationships between brain volume, dementia severity, age, education, and gender, highlighting that dementia correlates with lower normalized brain volume and occurs more in older populations. The plots are built with the vega-lite-api and rendered using vega-lite, with data loaded via d3.csv from a Gist. Each plot encodes variables through position, color, and size channels, with tooltips provided by vega-tooltip. The data originates from the Open Access Series of Imaging Studies (OASIS).

Apr 5, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between car horsepower and weight, using data from the UCI Machine Learning Repository's Auto MPG dataset. Each red, semi-transparent circle represents a car, with its position determined by the car's horsepower on the x-axis and weight on the y-axis, allowing for patterns in the trade-off between engine power and vehicle mass to be observed. The visualization is built with D3 v5, using `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for tick marks, and `csv` to load the dataset. The SVG output is styled through external CSS, with axes, labels, and a title rendered alongside the circles.

Apr 5, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. Built with D3 v5, it renders SVG bars using `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The axes are customized via `axisBottom` and `axisLeft`, with a group element applying margins for layout. Data is loaded from a CSV file, with population values converted to numbers before rendering.

Apr 1, 2020