Skip to main content
Log in
C

cshm407

@cshm407·15 public vizzes

Loading thumbnail…

Points on a Map

This visualization displays a world map with cities plotted as scaled circles representing population. The map uses the Natural Earth projection with graticules, country boundaries, and interiors rendered via D3's `geoPath` and `geoNaturalEarth1` projection. City positions come from a CSV file, and circle radii are scaled using D3's square-root scale (`scaleSqrt`) based on population data. The visualization is built with React and renders SVG marks, including land masses, a sphere outline, and graticule lines, all styled with a clean grayscale aesthetic.

Aug 28, 2021
Loading thumbnail…

Multiple views with brushing

A choropleth-style bubble map displays global migrant deaths and disappearances, with a coordinated histogram showing the same data over time. Brushing a time range on the histogram filters the map’s circles in real time, highlighting temporal patterns. The visualization uses React for component structure, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin`, rendering SVG marks. Data comes from the Missing Migrants Project, with country boundaries sourced from World Atlas TopoJSON.

Aug 27, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV dataset of COVID-19 vaccination trends in the US, displaying a summary of the data‘s size, row count, and column count. The visualization uses d3.csv to fetch and parse the data from a GitHub Gist, then formats the statistics with d3.csvFormat. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, illustrating different approaches to asynchronous data loading in D3 v5.

Jul 20, 2021
Loading thumbnail…

Making Line Chart

This line chart shows the daily total number of COVID-19 vaccine doses administered in the US over time, with time on the x-axis and daily doses on the y-axis. The visualization is built using React, D3 v5, and SVG rendering. It uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.csv` to load the dataset from a GitHub gist. Tooltips on each circle mark display the date.

May 6, 2021
Loading thumbnail…

HIV / AIDS Choropleth Map

This interactive choropleth map displays the global prevalence of HIV/AIDS in 2017, using a yellow-orange-red sequential color scale to encode the number of people living with the disease per country. Built with React and D3 v5, it projects country boundaries using `geoNaturalEarth1` and renders them via `geoPath`, with missing data shown in light blue. Data comes from the Missing Migrants Dataset and World Atlas TopoJSON, with country codes matched through a CSV lookup table.

Apr 17, 2021
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot displays events from the Missing Migrants Dataset, plotting reported dates against the total number of dead and missing per incident. The visualization uses a logarithmic y-scale to accommodate the wide range of casualty counts, with each circle representing a single event. Built with React and D3 v5, the code employs `scaleTime` and `scaleLog` for axes, renders marks as SVG circles, and provides tooltips via `d3.csv` data loading.

Apr 16, 2021
Loading thumbnail…

Missing Migrants on a Map and Histogram

The visualization combines a world map and a time-series histogram to show the locations and monthly counts of missing migrants. The bubble map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land and graticules, with circle sizes scaled by `d3.scaleSqrt` based on the ‘Total Dead and Missing’ value. The histogram uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.histogram` with monthly bins, displaying the same metric over time. Data comes from a CSV of Missing Migrants, and the SVG is rendered using React with D3 v5.

Apr 15, 2021
Loading thumbnail…

Missing Migrants on a Map

This visualization maps reported incidents of missing migrants worldwide, with circles sized by the total number of dead and missing at each location. The map uses a natural Earth projection rendered with SVG via `d3.geoPath`, with country boundaries and graticules drawn from TopoJSON data. Circle radii are scaled using `d3.scaleSqrt` based on the maximum reported casualties. The dataset comes from the Missing Migrants Project, and the visualization is built with React and D3 v5.

Apr 14, 2021
Loading thumbnail…

Missing Migrants Records

This histogram displays the monthly total of dead and missing migrants from the Missing Migrants Global dataset. The time axis spans from early 2014 to late 2019, with bar heights representing the aggregated count for each month. The visualization uses D3’s `scaleTime`, `bin` with `timeMonths` thresholds, and `sum` to aggregate data, rendered as SVG rectangles via React. Data is loaded asynchronously with `d3.csv`, and axes are generated using custom `AxisBottom` and `AxisLeft` components, with tooltips showing the month’s start date.

Apr 14, 2021
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. It uses React and d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color scale, and SVG circles for marks. Hovering over a species in the color legend highlights the corresponding points while dimming others, implemented through React state and opacity transitions. The chart is rendered with SVG and includes axis labels, a color legend, and tooltips.

Apr 13, 2021
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers, with color encoding species. Built with React and D3 v5, it renders SVG circles positioned by D3's scaleLinear, colored via scaleOrdinal, and detailed with custom Axis, Marks, and ColorLegend components. A D3 CSV loader parses the data, and the HTML embeds a YouTube tutorial on building the chart.

Apr 12, 2021
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the X and Y axes via two dropdown menus. The visualization is built with React and D3.js, using d3.scaleLinear for axes and D3’s csv loader to fetch data. SVG circles represent the flowers, with hover tooltips provided by native SVG title elements. Axes are rendered as custom React components, and the interface includes axis labels and a polished Poppins font styling.

Apr 11, 2021
Loading thumbnail…

Scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length/width, petal length/width) appear on each axis via dropdown menus. The chart uses React state to track selected attributes, updating the axes and circles accordingly. Built with D3 scales (d3.scaleLinear, d3.extent) and custom SVG axis components, each data point renders as a circle with a tooltip showing its x-value. The CSV data loads asynchronously via d3.csv from a GitHub gist.

Apr 10, 2021
Loading thumbnail…

Fork of Menus with React

This example demonstrates a pet-selection dropdown menu built with React and D3. It shows a styled `<select>` element populated with pet options, where the currently chosen value is tracked and displayed via React state. The implementation uses React’s `useState` and the custom `Dropdown` component, embedded in a simple app rendered with `ReactDOM`. D3 version 5 and React 16.9 are loaded via CDN, while the UI is styled through CSS, highlighting the integration of React for interactivity and D3 for visualization support.

Apr 10, 2021
Loading thumbnail…

Menus with React

This example shows an interactive dropdown menu for selecting a pet, with the chosen option displayed in a label. The interface is built with React’s `useState` hook to manage the selected value, while a custom `Dropdown` component renders the `<select>` element and its options. D3 is loaded but not directly used in the interaction logic, serving only as a dependency in the page setup. The code imports React and ReactDOM, maps over an array of pet options, and updates the selection state via the `onSelectedValueChange` callback.

Apr 10, 2021