JiaMing

@Vanille-wstar·7 public vizzes

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.

Apr 21, 2020

Loading thumbnail…

北京疫情可视化

This interactive dashboard visualizes COVID-19 case distributions across Beijing districts using a coordinated histogram and pie chart. Hovering over a bar filters the pie chart and legend to show the selected district’s breakdown by infection source, including categories like Chaoyang, Haidian, and imported cases. Built with D3 v3, the example uses d3.svg.axis, ordinal and linear scales, and transition().duration() to animate bar height and color changes, while SVG paths render the interactive pie slices.

Apr 21, 2020

Loading thumbnail…

北京疫情概况

An interactive sunburst chart visualizes Beijing’s daily COVID-19 case increases from February to March. The D3.js partition layout renders hierarchical flare data as radial arcs, colored by category and animated on click to zoom into nested branches. Built with `d3.partition`, `d3.hierarchy`, and `d3.scaleOrdinal`, it uses SVG `path` tweens via `transition.attrTween` for smooth transitions. Font sizes and arc visibility adapt through computed label thresholds, while the top-level root circle resets the view.

Apr 12, 2020

Loading thumbnail…

汇总

This dashboard presents a four-panel visualization of CDC ILINet flu surveillance data, showing weekly patient visit metrics across years and US states. It includes a line chart of annual trends, a choropleth map of state averages, a bar chart of top states, and a colored line chart tracking those states over time. Built with React and D3 v5, the example uses `scaleOrdinal` for color mapping, `geoAlbersUsa` and `geoPath` for map rendering, and `scaleBand`/`scaleLinear` for bar and line axes. Data is loaded via `d3.csv` and `d3.json`, with interaction implemented through React state and D3 event handlers.

Apr 12, 2020

Loading thumbnail…

患病者群像

This visualization presents a scatterplot of college graduate labor force data, with each major represented as a colored circle. The major categories are shown with a color legend, while STEM status is highlighted via a stroke on selected circles. Users can filter the data and update a linked table through dropdown menus and legend clicks. The chart is built with D3 v5, using scaleOrdinal, scalePoint, and transitions to animate circle positions and sizes.

Apr 12, 2020

Loading thumbnail…

群像

A radial chart visualizes on-time performance for the five busiest US airports across the year, with each airport drawn as a distinct colored closed curve. Angular position encodes date while radius represents average departure delay in minutes. Hovering over the interactive color legend highlights the corresponding airport’s loop and fades the others. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.nest`, `d3.pointRadial`, and `d3.curveLinearClosed` to render SVG paths from CSV data on flight delays.

Apr 12, 2020

Loading thumbnail…

Make a Bar Chart

This example demonstrates a simple React component that displays a placeholder message, “Let’s make a Bar Chart with D3.JS,” inside a large centered div. The interface does not yet render any data visualization; instead, it sets up the foundation for building a bar chart using D3 v5 and React 16. The code imports `select` and `csv` from D3, loads the `data.csv` file, and prepares an SVG element, but no bars or axes are drawn. The interaction shows how React and D3 can be integrated in a single-page app.

Apr 5, 2020