F

FadziMandondo

@FadziMandondo·31 public vizzes

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores CDC ILINet flu surveillance data through four coordinated panels: a line chart showing weekly patient visit patterns across years, a choropleth map of state-level influenza activity, a bar chart ranking the top states, and a multi-line chart tracking those top states over time. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for categorical coloring, d3.geoAlbersUsa and d3.geoPath for the map projection, and d3.line with curveCardinal for smoothed trend lines. Users can filter by year and metric through dropdown menus, and hover or click to highlight selections across panels. The data is loaded as CSV and aggregated using custom React hooks with d3.csv.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores CDC ILINet flu surveillance data through four coordinated panels: a line chart showing weekly patient visit patterns across years, a choropleth map of state-level influenza activity, a bar chart ranking the top states, and a multi-line chart tracking those top states over time. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for categorical coloring, d3.geoAlbersUsa and d3.geoPath for the map projection, and d3.line with curveCardinal for smoothed trend lines. Users can filter by year and metric through dropdown menus, and hover or click to highlight selections across panels. The data is loaded as CSV and aggregated using custom React hooks with d3.csv.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores CDC ILINet flu surveillance data through four coordinated panels: a line chart showing weekly patient visit patterns across years, a choropleth map of state-level influenza activity, a bar chart ranking the top states, and a multi-line chart tracking those top states over time. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for categorical coloring, d3.geoAlbersUsa and d3.geoPath for the map projection, and d3.line with curveCardinal for smoothed trend lines. Users can filter by year and metric through dropdown menus, and hover or click to highlight selections across panels. The data is loaded as CSV and aggregated using custom React hooks with d3.csv.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data across four linked panels: a line chart of yearly trends, a choropleth map of state-level averages, a bar chart of top states, and a line chart of state-specific patterns. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, `geoAlbersUsa`, `geoPath`, and `scaleSequential` with `interpolateYlOrRd` for rendering. The choropleth uses TopoJSON US Atlas data, while other panels use CSV data from the CDC’s FluView Interactive.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores CDC ILINet flu surveillance data through four coordinated panels: a line chart showing weekly patient visit patterns across years, a choropleth map of state-level influenza activity, a bar chart ranking the top states, and a multi-line chart tracking those top states over time. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for categorical coloring, d3.geoAlbersUsa and d3.geoPath for the map projection, and d3.line with curveCardinal for smoothed trend lines. Users can filter by year and metric through dropdown menus, and hover or click to highlight selections across panels. The data is loaded as CSV and aggregated using custom React hooks with d3.csv.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores CDC ILINet flu surveillance data through four coordinated panels: a line chart showing weekly patient visit patterns across years, a choropleth map of state-level influenza activity, a bar chart ranking the top states, and a multi-line chart tracking those top states over time. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for categorical coloring, d3.geoAlbersUsa and d3.geoPath for the map projection, and d3.line with curveCardinal for smoothed trend lines. Users can filter by year and metric through dropdown menus, and hover or click to highlight selections across panels. The data is loaded as CSV and aggregated using custom React hooks with d3.csv.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data across four linked panels: a line chart of average weekly patient visits by year, a choropleth map of state-level averages, a bar chart of top states, and a multi-line chart tracking trends for those states. Built with React and D3 v5, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.geoAlbersUsa` for the map projection, and a React `Dropdown` for attribute and year selection. The CDC FluView dataset is loaded via `d3.csv`, with hover and click interactions highlighting selections across panels.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data across four linked panels: a line chart of average weekly patient visits by year, a choropleth map of state-level averages, a bar chart of top states, and a multi-line chart tracking trends for those states. Built with React and D3 v5, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.geoAlbersUsa` for the map projection, and a React `Dropdown` for attribute and year selection. The CDC FluView dataset is loaded via `d3.csv`, with hover and click interactions highlighting selections across panels.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents the CDC's ILINet flu surveillance data across four coordinated panels. A line chart displays national weekly trends for selected metrics like ILI percentage, while a choropleth map using `d3.geoPath` and `d3.geoAlbersUsa` shows the geographical distribution of average values per state. A bar chart ranks the top N states, and a final line chart highlights the yearly patterns for those selected states. Built with React and D3 v5, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and custom SVG marks to enable linked highlighting and filtering across all views.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data across four linked panels. It shows annual trends in patient visit percentages as colored lines, a choropleth map of state-level averages using `d3.geoPath` and sequential color scales, a bar chart ranking top states, and a state-specific line chart. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for marks and scales. Hovering and clicking selections highlight corresponding data across all views, with data sourced from CDC's FluView interactive.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data across four linked panels. It shows annual trends in patient visit percentages as colored lines, a choropleth map of state-level averages using `d3.geoPath` and sequential color scales, a bar chart ranking top states, and a state-specific line chart. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for marks and scales. Hovering and clicking selections highlight corresponding data across all views, with data sourced from CDC's FluView interactive.

Loading thumbnail…

Composition of dry air at sea level

A bar chart displays the volume percentages of gases in dry air at sea level, with nitrogen and oxygen dominating, while trace gases like ozone and xenon appear at minuscule scales. The visualization uses D3 v3 to create an ordinal x-axis and linear y-axis, with hover tooltips showing each gas’s percentage and parts-per-million conversion. Data is loaded from a CSV file via `d3.csv`, and the chart responds to window dimensions, rotating x-axis labels on smaller screens.

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays weekly temperature variations in San Francisco using time-series data loaded from a CSV via `d3.csv`. The visualization highlights temperature trends with a smooth blue polyline generated through `d3.line()` with `curveNatural`, drawn in SVG within a React framework. The chart includes labeled time (x-axis) and temperature (y-axis) axes, with tick marks formatted using `d3.timeFormat` and scales from `scaleTime` and `scaleLinear`. Interactive tooltips are commented out, leaving a clean, minimal aesthetic with custom Poppins typography.

Loading thumbnail…

Temprature in San Francisco Scattered Plot

A line chart displays confirmed case counts across Chinese provinces, with a smoothed curve fitted using d3.line and d3.curveBasis, although the code includes references to time-scale and temperature labeling that do not match the categorical Province data. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, rendered as SVG with axes from d3.axisBottom and d3.axisLeft, reading data from a local CSV file. The chart includes gridlines, tick labels, and a title, with the data source being the COVID-19 case counts shown in the file.

Loading thumbnail…

COVID-19

This interactive visualization shows daily COVID-19 cases, deaths, and recoveries for a selected country. Users can choose a country and a metric from dropdown menus, with the line chart updating to display the chosen data. The line color corresponds to the selected status: blue for confirmed cases, green for recovered, and red for deaths. Built with D3 v5, the SVG chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with data from the Novel Corona Virus 2019 Kaggle dataset.

Loading thumbnail…

Coronavirus Y Axis

A line chart tracks the cumulative global death toll from the Johns Hopkins Coronavirus Dataset over time, with a bold black stroke and labeled axes. The chart’s Y-axis is annotated with a marker line at 10,000 deaths, while gridlines extend across the plot. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and a `line` generator within an SVG, with `axisBottom` and `axisLeft` for ticks.

Loading thumbnail…

LINE CHART

This line chart displays the number of confirmed COVID-19 cases in various Chinese provinces on January 21st, based on data from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.line with curveBasis to create a smooth, interpolated path. The SVG rendering includes axis labels, a title, and a light blue stroke for the line.

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

Loading thumbnail…

Temperature in San Francisco Line Chart MILES

This line chart displays COVID-19 confirmed cases across China’s provinces, using province names as the x-axis and confirmed case counts as the y-axis. It is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth interpolation. The SVG renders gridlines, axis labels, and a maroon path with circles not included. Data comes from a local CSV file, and the visualization is produced via `d3.csv` loading and rendering into an SVG container.

Loading thumbnail…

Temperature in San Francisco Line Chart MILES

This line chart displays COVID-19 confirmed cases across China’s provinces, using province names as the x-axis and confirmed case counts as the y-axis. It is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth interpolation. The SVG renders gridlines, axis labels, and a maroon path with circles not included. Data comes from a local CSV file, and the visualization is produced via `d3.csv` loading and rendering into an SVG container.

Loading thumbnail…

Charts for Fun

This example creates a bar chart from a CSV file, displaying confirmed COVID-19 cases across Chinese provinces on January 21, 2020. The visualization uses D3 v5’s `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to map provinces to the x-axis and case counts to the y-axis. Red, semi-transparent circles are drawn with `.append("circle")`, and custom titles and axis labels are added as SVG text elements. The underlying data is loaded using `d3.csv`.

Loading thumbnail…

Charts for Fun

This bar chart visualization displays the number of confirmed COVID-19 cases across Chinese provinces as of January 21, 2020. The chart uses a circular mark to represent each province's confirmed case count, with the y-axis scaled linearly and the x-axis using band scaling for categorical province names. The visualization demonstrates custom axis styling and labels using D3's axis functions, with data loaded from a local CSV file. The code uses D3 v5, specifically `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading. The SVG rendering includes bold, italic, and underlined title text.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City initiative. The chart uses D3.js v5 with SVG rendering, and applies `scaleTime` and `scaleLinear` scales for the x and y axes. The code imports functions like `axisLeft`, `axisBottom`, `line`, and `curveBasis` from D3, and draws the line path with a maroon stroke. The title "A Week in San Francisco" and axis labels are included, with data loaded from an external CSV.

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

This example demonstrates an interactive bar chart that updates when a cereal is selected from a dropdown menu. It uses d3.v3 to load data from a CSV file containing nutritional information for various cereals, and dynamically renders a bar chart for each cereal's nutrition fields. The visualization leverages d3 scales, axes, and transitions to animate bar height and position changes, with a y-axis that adjusts its domain based on the selected data. SVG rendering and opacity styling are used for the bars.

Loading thumbnail…

Making a bar chart

This bar chart displays the number of confirmed cases across nine Chinese provinces, using horizontal bars sorted by province name on the y-axis and a linear scale for case counts on the x-axis. The visualization is rendered as an SVG using D3 v5, with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart and axes. The data is loaded from a local CSV file via `d3.csv`, and the bars are drawn as `rect` elements with a steelblue fill. The example highlights axis customization and margin-based layout for a clean, labeled presentation.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `axisLeft` and `axisBottom` to render the axes. Rects are appended to an SVG group, sized by population values loaded from a CSV file. The chart also demonstrates custom axis styling through CSS.

Loading thumbnail…

Shapes with CSS and SVG

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged on an SVG canvas. It demonstrates how raw SVG elements can be styled using both inline attributes like `fill` and `stroke` and external CSS rules. The code also groups shapes with `<g>` elements to apply translation transforms and shared stroke properties, illustrating compositing and coordinate manipulation. The visualization relies directly on the SVG API within an HTML document.

Loading thumbnail…

This is a title

This example displays a simple car report listing three vehicles with their model years and prices, highlighting one entry in red. The page relies on plain HTML and CSS, with a monospace font and enlarged text set via the body rule, while the highlighted class applies red coloring to the Nissan Leaf item. No JavaScript libraries or data sources are used; the static list and styling are defined directly in the markup and stylesheet.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG primitives with CSS styling within a React-based visualization. The code manually constructs SVG elements—a red circle and a blue-tinted rectangle—directly in the HTML markup, while a linked stylesheet applies typography and color rules to the page and a highlighted class. The file also includes an empty circle with a large radius, suggesting the use of SVG’s native coordinate system for positioning shapes. The approach relies on hand-coded SVG tags and external CSS rather than a charting or layout library.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at an enormous font size, demonstrating the visual output of a minimal HTML document. The page relies on plain HTML and CSS, with no external libraries or frameworks. The styling uses a `text-align: center` rule on the `body` element and sets the `font-size` to 13em, which renders the greeting prominently. It serves as a bare-bones starting point for web-based visualizations, offering a simple foundation for projects that require no JavaScript or data processing.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at an enormous font size, demonstrating the visual output of a minimal HTML document. The page relies on plain HTML and CSS, with no external libraries or frameworks. The styling uses a `text-align: center` rule on the `body` element and sets the `font-size` to 13em, which renders the greeting prominently. It serves as a bare-bones starting point for web-based visualizations, offering a simple foundation for projects that require no JavaScript or data processing.