Skip to main content
SimilarExport ZIP
100%

Team_Talkative_dashBoard

✓ Published0🌍 Public
JJIN-wj
Last edited Jun 2, 2021
Created on Jun 2, 2021
Forked from HTML Starter

This dashboard visualizes COVID-19 case data for Seoul’s administrative districts, comparing quarterly confirmed cases across multiple charts. It shows both a bar chart of cases per district over time and a map view of the city. Built with React and D3 v3, the bar chart uses `d3.scale.linear()`, `d3.svg.axis()`, and `d3.selectAll()` to render SVG bars with tooltips, while the map uses TopoJSON from a Seoul municipal boundary file. Data comes from a local CSV file with quarterly case counts per district, and a slider and dropdown allow filtering the displayed district.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Team_Talkative_dashBoard

This dashboard visualizes Seoul dining and demographic data through multiple interactive views. Users can toggle between a map view and a detailed graph view, selecting regions like Gangnam or Jongno and adjusting a time range slider. The map uses d3.geoPath with TopoJSON to render Seoul’s municipal boundaries, while line charts and summary statistics update dynamically. Additional lower panels display related charts, and a source toggle reveals a modal listing external references. The implementation relies on D3 v3, React, and SVG for rendering, with data sourced from a Seoul matzip mapping blog and municipal geography files.

Wwqwqwq0911
86% match
Loading thumbnail…

COVID-19 DASHBOARD

This interactive dashboard visualizes COVID-19 trends with multiple linked charts, including a world map showing total cases, line charts for new cases by country, and an income-bracket comparison. It also includes a vaccination chart and a navigator for exploring case timelines. Built with React and D3 v7, the visualization uses `d3.geoPath` with TopoJSON for map rendering, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG with animations for interactive updates. Data is loaded from the Our World in Data COVID-19 CSV files, with country coordinates from a custom JSON file.

Bbhargav83
77% match
Loading thumbnail…

Untitled

This example displays bar charts of pedestrian traffic counts in Seoul districts, with buttons to switch between views by day of the week, time period, and age group. The visualization uses d3.v3 with SVG rendering, loading CSV data via d3.csv and sorting bars by descending count. It applies d3.scale.linear for the x-axis and d3.scale.ordinal with rangeRoundBands for the categorical y-axis.

JJIN-wj
75% match
Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a pie chart and a bar chart to explore COVID-19 case frequency data across Beijing districts by date range. Hovering over a bar updates the pie chart to show the district breakdown for that period, with smooth transitions between updates. Built with React and d3.v3, the example uses d3.svg.arc, d3.layout.pie, and d3.scale.ordinal to render SVG elements with mouseover-driven interactivity. The legend and pie chart adapt their data and colors dynamically, while the histogram bars respond with animated height changes via transition.attr.

Vvans01
75% match
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.

Sshehrbano1248
74% match
Loading thumbnail…

Interactive pie and bar

An interactive dashboard combines a histogram and pie chart to explore COVID-19 case frequencies across Beijing districts over time. The bar chart displays weekly total cases, while hovering over a bar updates the pie chart to show the district breakdown for that week. The visualization uses D3 v3 with SVG rendering and transitions, updating both charts dynamically via mouseover and mouseout events. Data is loaded from a JSON file, with the pie chart segmented by district categories (朝阳, 海淀, 西城, etc.) and the histogram using ordinal and linear scales for axes.

JJiaMing
74% match
Loading thumbnail…

COVID-19

This interactive COVID-19 dashboard displays country-level statistics using horizontal bars. Users select an attribute from a dropdown, and React state updates the chart to show that metric. Driven by a CSV of global pandemic data, the visualization renders bars with SVG rectangles via React components, using D3 scales (`scaleBand`, `scaleLinear`) and axes (`AxisBottom`, `AxisLeft`) to position the data. Tooltips appear on hover through SVG `<title>` elements.

WW9183907
74% match
Loading thumbnail…

barplot_covid

This bar chart visualizes COVID-19 case counts across four quarterly periods, with bars animating upward from the baseline on load. The color scale transitions from light teal to dark green based on count magnitude, and axes display tick labels for both quarters and case numbers. Built with React and D3 v5, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis and color encoding, and SVG `rect` transitions (via `transition().duration().delay()`) to animate bar growth. Data is hardcoded in the React `useEffect` hook.

Ssuji8073
74% match