shehrbano1248

@shehrbano1248·8 public vizzes

COVID Deaths Linked Views with Brushing

An interactive map of Georgia county-level COVID-19 death counts, where a linked time-series histogram below the map filters the displayed circles via brushing. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` for world atlas landmasses, while circles are scaled by `d3.scaleSqrt` based on total dead and missing. The histogram uses `d3.bin` and `d3.brushX` to select date ranges, with React updating the filtered data in real-time. Data comes from a CSV of reported dates and coordinates.

Jun 15, 2020

Loading thumbnail…

Crona Cases 2020 tree of Pakistan

This tree diagram visualizes COVID-19 case data across Pakistani regions for 2020. It displays a hierarchical structure with the root node "Pakistan" branching into individual provinces, each showing total cases, deaths, and recoveries. The visualization uses a horizontal tree layout implemented with d3.forceSimulation and d3.zoom, rendering SVG paths and text elements. Data is loaded from a local JSON file via d3.json, and the Playfair Display font from Google Fonts styles the text labels.

Jun 15, 2020

Loading thumbnail…

node tree of countries

This visualization shows a hierarchical tree of world countries, grouped by continent and subregion, with each node labeled with its geographic area name. The tree is generated from a JSON data structure using D3.js v5’s `d3.hierarchy` and `d3.tree` layouts, and rendered as SVG paths and text elements. Users can pan and zoom the diagram via `d3.zoom`. Node labels use varying font sizes that decrease with depth, and the layout uses `d3.linkHorizontal` for curved connector paths.

Jun 15, 2020

Loading thumbnail…

node tree of Pakistan

A node tree visualizes the administrative hierarchy of Pakistan, starting from the root "Pakistan" and branching to a single child node "AJK". The tree layout is generated using D3 v5's `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` functions, with nodes represented as text labels and edges as styled SVG paths. The visualization renders in a `width` 960 by `height` 500 SVG canvas, uses a custom zoom interaction via `d3.zoom`, and applies a Playfair Display font with text shadows for readability.

Jun 14, 2020

Loading thumbnail…

Covid Data 2020 Visualization

This interactive dashboard explores COVID-19 data through four coordinated panels: a line chart of yearly trends, a choropleth map of state averages, a bar chart of top states, and a multi-line chart of state patterns. Built with React and D3 v5, it uses `scaleOrdinal` for color mapping, `geoAlbersUsa` and `geoPath` for the map, and `scaleBand` for bars. Hovering highlights selections across panels, with data loaded from a CSV file.

Jun 14, 2020

Loading thumbnail…

环境性能数据随时间变化线性图

This line chart tracks the environmental performance metrics of I/O, network, and CPU usage over 45 timestamps, with each metric color-coded and overlaid with circular data points for precise value identification. The visualization uses D3 v5 to create a smooth, monotone-curved line chart via the `d3.line` and `d3.curveMonotoneX` APIs, with axes generated through `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV with timestamp and metric columns, and the SVG rendering includes hover tooltips displaying percentage values for each point. A legend distinguishes the three data series.

Jun 1, 2020

Loading thumbnail…

Delitos por provincia en Costa Rica

This example uses a line chart and dropdown menu to compare monthly crime counts across Costa Rican provinces from 2016 to 2019. The chart displays a selected province’s crime data over time, with separate lines for each year colored via a categorical scale. Users select a province from the dropdown, triggering a smooth 1.5-second transition of the line paths. It uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line with curveBasis, and d3.nest to group data by year, all rendered as SVG with CSS styling.

Jun 1, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This visualization animates the growth of COVID-19 confirmed cases across multiple countries, using stacked line paths that extend day-by-day. The y-axis applies a random multiplier to China’s data after day 52, creating a visual distortion. Built with D3 v5, it uses `scaleLinear`, `nest`, and `line` with `curveBasis` to generate smooth trajectories, while `transition` animates the lines. Country labels and color-coded legends are rendered as SVG text and circles, with data sourced from CSV files.

Jun 1, 2020