anonymous5776

@anonymous5776·5 public vizzes

Working Title

An interactive four-panel dashboard visualizes CDC ILINet flu surveillance data, displaying annual trends of patient visits, a choropleth map of state-level averages, a bar chart of the top states, and state-specific yearly curves. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, `d3.geoPath`, and `d3.curveCardinal` for rendering. Brushing and clicking allow selection and highlighting across linked panels with synchronized transitions and tooltips.

May 13, 2020

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit production from 2006 to 2015, with four series (Red Delicious apples, McIntosh apples, oranges, and pears) drawn as colored rect layers. The chart uses d3.layout.stack to transform the data, d3.time.format to parse years, and ordinal and linear scales to position the bars and axes. A legend maps colors to fruit names, and a tooltip—created as an SVG group with rect and text elements—displays the numeric value of each segment on mouseover. The SVG is rendered inside a React framework, with axes drawn using d3.svg.axis.

May 13, 2020

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Auto MPG dataset, letting users explore relationships between numeric columns. Two dropdown menus allow selection of which variables map to the X and Y axes, triggering animated transitions of circles via D3 v5’s `transition().duration(2000)`. The visualization uses SVG rendering with `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` from D3. Axis labels update dynamically, and circles fade from the center as data points reposition, demonstrating interactive data exploration through reusable menu and scatter plot modules.

May 13, 2020

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart shows the gender distribution of students (female vs. male) across various university modules, using data from a CSV file. It displays the count of each gender per module, with a radio-button toggle that switches the y-axis between absolute counts and percentage-based proportions. The visualization is built with D3.js, using the `d3.layout.stack` API to stack the bars and `d3.svg.axis` for axes. Smooth transitions animate the change between count and percent views via the `.transition()` function.

May 13, 2020

Loading thumbnail…

Total Disbursements Per Year by School

A multi-line chart displays monthly food pantry disbursements per school at Columbia University from May 2016 through April 2020. Users select a school from a dropdown menu, and the chart updates with animated lines, one per year, colored via `d3.scaleOrdinal`. The visualization uses `d3.nest` to group data by year and `d3.line` with `curveBasis` for smoothing, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. Data originates from the Food Pantry at Columbia.

May 12, 2020