Denise Mauldin

@denisemauldin·10 public vizzes

Fork of Let's Make a Face Part I

This example shows a simple face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes, arranged on a 960-by-500 canvas. The view renders through static SVG markup embedded directly in the HTML page, with React loaded via a UMD script tag but not used for drawing. The code also includes a video embed and a JavaScript console log statement.

Aug 5, 2022

Loading thumbnail…

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

A multi-line chart tracks cumulative COVID-19 deaths per country over time, using a logarithmic y-axis. Hovering over any point uses a Voronoi overlay to highlight that country's line and display a tooltip with the exact date and death count. Built with React and D3 v5, the visualization leverages `d3.Delaunay` for the Voronoi diagram, `scaleLog` and `scaleTime` for axes, and loads data from the Johns Hopkins Coronavirus dataset via `d3.csv`.

Apr 1, 2022

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization shows monthly air quality measurements in London from 2010 to 2018, displaying pollutant levels as a multiple line plot. A dropdown menu lets users select which pollutant to display, from options like PM2.5, PM10, and nitrogen dioxide. Each year is represented by a colored line, with a color legend identifying the annual series. The visualization uses D3 v5 with SVG rendering and animated transitions, loading data from the London Datastore via the `csv` method, and employing `d3.nest` for data grouping.

Aug 30, 2021

Loading thumbnail…

Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements and species. Two dropdown menus, built with a custom D3 reusable menu component, change the x and y axes. The scatterPlot uses `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `selection.join` with `d3.transition` to animate points as scales update, with circles entering by growing from radius zero and exiting removed.

Aug 26, 2021

Loading thumbnail…

Fork csv data

This example shows a simple bar chart of annual population data for XYZ Foods, displayed as text paragraphs and an SVG title. The code loads a CSV file using `d3.csv` and appends an SVG element with `d3.select` and `attr`. It binds the parsed data to paragraphs with `data` and `enter().append()`, while also adding a styled text label. The rendering uses SVG and d3.v5, though no visual bars are actually drawn despite the `fill: steelblue` style rule.

Jun 3, 2021

Loading thumbnail…

Force Grid

This visualization displays a dataset of fermented food projects, using a force-directed layout to organize items by month and type. Each circle represents a fermentation project, with its size indicating the fermentation length and its color corresponding to the food category, such as grain, vegetable, or protein. The chart separates projects into monthly vertical bands using a band scale for the x-axis while a physics simulation distributes the circles. The animation uses d3.forceSimulation with forceManyBody, forceCollide, and forceX to position the nodes, rendering the result as an animated SVG.

Jan 20, 2021

Loading thumbnail…

Lab 1: Line Chart

A line chart visualizes annual CO2 emissions from 1990 to 2014 for selected countries using UN Data, with interactive country selection via dropdown and tooltips. Built with React and D3 v4, it uses d3.nest for data grouping, d3.scaleLinear and d3.axisBottom/Left for scales, and d3.line for path generation. Animated transitions update lines when the selection changes, with colors from d3.scaleOrdinal(d3.schemeCategory10).

Jan 15, 2021

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents one flower sample, with hover tooltips revealing the precise x-value. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` to set domains, and `format` for tick labels. The SVG rendering includes custom axis components with tick marks and labels, while data loading relies on D3’s `csv` method with type coercion for numeric values. The chart’s teal circles and Poppins typography give it a modern, stylized appearance.

Dec 15, 2020

Loading thumbnail…

Untitled

This React application visualizes student academic histories and predicts future course performance by comparing a selected student's grades against peers. It displays a history table of courses by semester and uses a Sankey diagram to show grade distributions across terms for similar courses. The app parses CSV data with PapaParse, queries a backend with axios, and renders the Sankey visualization using d3-sankey with React SVG components.

Dec 11, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates D3's general update pattern with special cases for enter, update, and exit selections. The code uses `d3.scaleOrdinal` to map fruit types to colors and radii, while `selection.data` with a key function tracks fruit identities across transitions. As apples are eaten, replaced with lemons, or removed, `transition.attr` animates circle radii and fill colors, with exiting elements shrinking and turning blue before removal. The example renders SVG with animated transitions in d3.v5, using `selection.merge` to handle entering and updating elements uniformly.

Sep 19, 2018