Team_Talkative_dashBoard

100%

Team_Talkative_dashBoard

✓ Published0🌍 Public

Last edited May 27, 2021

Created on May 23, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Team_Talkative_dashBoard

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.

JJIN-wj

86% 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

76% match

Loading thumbnail…

분기별 유동인구, 매출

An interactive bar chart comparing quarterly foot traffic and sales across Seoul districts. A dropdown menu, generated from the data fields using a data join, lets viewers switch the y-axis variable, triggering a selection change that updates both the bar positions and the d3.axisLeft scale. The visualization loads survey data via d3.json, prepares nested aggregates with d3.nest and d3.mean, and renders the dynamic bars with SVG rectangles, applying the general update pattern to adjust attributes in place.

Ssuji8073

72% match

Loading thumbnail…

Untitled

This interactive choropleth map displays a wide range of socioeconomic indicators for city neighborhoods, selectable via a dropdown menu. Built with React and D3.js, it renders neighborhood polygons as SVG paths, with colors encoding the chosen variable. A tooltip reveals the neighborhood name and its exact value on hover. A checkbox toggles the inclusion of the downtown area. The map data is visualized from a linked dataset, allowing for dynamic exploration of employment, education, and business statistics.

KKelsey Xu

70% match

Loading thumbnail…

Lets make a map

An interactive choropleth of South Korea lets users click any district to see its vote distribution rendered as a pie chart. The map is drawn with `d3.geoPath` and a Mercator projection, while district names come from a CSV mapped by `SIG_CD`. Clicking a city triggers a pie chart built with `d3.pie` and `d3.arc`, populating a second SVG. The visualization relies on TopoJSON for district boundaries, D3’s `select`, `csv`, and `json` loaders, and encodes vote counts from a separate CSV file.

KKimHanWoolHandong

69% match

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard presents NYC crime data through a coordinated set of SVG views: a map, a pie chart, and bar charts. Users can click the reset button to restore the initial state. The visualization is built with React and D3 v6, using d3.geoMercator and d3.geoPath for the map, d3.arc for the pie, and d3.scaleBand and d3.scaleLinear for the bar charts, with animations and a tooltip for details.

SSelena Ding

69% match

Loading thumbnail…

Untitled

This interactive choropleth map displays neighborhood-level economic and demographic data for a city, with a dropdown menu to select among over 40 metrics such as employment rates, business counts, and commercial property statistics. A checkbox toggles whether downtown neighborhoods are included in the visualization. Hovering over a neighborhood updates a tooltip showing the area’s name and its value for the selected metric. The map is rendered using D3.js with SVG paths from a GeoJSON file, and the dropdown dynamically updates the choropleth’s color scale using the viridis color palette.

KKelsey Xu

69% match

Loading thumbnail…

KoreaMap

This example displays a choropleth map of South Korea’s provinces, rendered as SVG paths. The visualization uses d3.geoMercator and d3.geoPath to project and draw the geographic features, while React manages the component structure. Data is loaded from a TopoJSON file via d3.json and processed with topojson.feature. Static styling defines the map’s stroke and fill colors. The visualization waits for data to load, showing a loading message until the map is ready.

SSeheeP1217

69% match