quratulain01

@quratulain01·7 public vizzes

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents influenza surveillance data from the CDC's ILINet dataset across four linked panels. A line chart displays annual trends in patient visit percentages by week, a choropleth map shows the geographical distribution of average values across US states, a horizontal bar chart ranks the top N states by value, and a multi-line chart reveals yearly patterns for those selected states. Built with React and D3.js v5, the visualization uses `geoAlbersUsa` for map projection, `scaleBand` and `scaleLinear` for bar and line charts, and `scaleSequential` with `interpolateYlOrRd` for the map's color encoding.

Jun 14, 2020

Loading thumbnail…

Smoothed Daily Coronavirus Deaths Line Chart

A line chart displays smoothed daily COVID-19 death counts for the top 50 countries by cumulative deaths, using a logarithmic y-scale and time-based x-axis. Each gray line represents a country; hovering via a d3.Delaunay Voronoi overlay highlights the corresponding line and shows a tooltip with the country’s total deaths and date. Data comes from the Johns Hopkins Coronavirus dataset, processed with d3.csv and a moving-average blur function, and rendered as SVG paths using d3.line, d3.scaleTime, and d3.scaleLog within React.

Jun 14, 2020

Loading thumbnail…

World Countries Tree

This visualization uses a hierarchical tree layout to organize world countries by continent and subregion, with each country name rendered as a text label. The code builds the tree with `d3.hierarchy` and `d3.tree`, draws curved link paths using `d3.linkHorizontal`, and applies zoom via `d3.zoom`. Labels scale in font size based on depth. Data comes from the local `data.json` file, and the SVG output uses a custom Playfair Display font.

Jun 14, 2020

Loading thumbnail…

Covid Cases Hover

This visualization displays worldwide aggregated COVID-19 confirmed cases over time as a bar chart, with the date on the x-axis and case count on the y-axis. Hovering over a bar reveals a tooltip showing the exact date and number of confirmed cases. The chart uses D3 v5 with an SVG renderer, employing `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and the d3-tip library for interactive tooltips. Data comes from the GitHub datasets/covid-19 repository's worldwide-aggregated CSV file.

Jun 13, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal setup for integrating D3.js within a VizHub project. The page renders a static "Hello World!" message by using the `select` function from D3 to target a `div` element and update its text content. The message originates from an ES6 module, showcasing modular JavaScript, while the styling centers the text with a large font size. The implementation relies on D3 v5 and a simple HTML structure with a linked stylesheet.

Jun 3, 2020

Loading thumbnail…

Cars Report

This interactive React-based report visualizes car data, presenting a dynamic overview of vehicle statistics. The example uses a starter template that renders a simple “Hello React!” message via the ReactDOM API, with no actual data or charts implemented. The visualization framework is React, while the HTML entry point loads a bundled JavaScript file. As a placeholder, it demonstrates the basic project structure for building a data-driven dashboard, relying on React’s component model for future integration of charting libraries and datasets.

May 18, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” centered on the page. It uses React 16.10 and ReactDOM to mount a functional component into the `#root` div, with styling controlled via a CSS class. The code shows the basic structure of a React project, including the entry HTML and JavaScript files, without incorporating any external data or visualization libraries.

May 18, 2020