A

Annie Ulichney

@aulichney·31 public vizzes

Loading thumbnail…

Under Custody

This visualization displays the population of individuals under custody in the New York State Department of Corrections and Community Supervision (DOCCS). It uses a bar chart rendered with D3.js within a React framework, allowing users to filter and explore data on both the x and y axes through dropdown menus. The chart shows counts, average age, and average time served. Tooltips provide additional details, including calculated percentages and cumulative breakdowns when viewing by age. Data is loaded from a remote JSON source and processed using D3’s data aggregation methods.

Loading thumbnail…

Under Custody

Under Custody displays a small dataset of two gender-based population percentages and counts in an HTML table. Built with React and D3 v5, the table supports interactive sorting by clicking column headers, toggling rows between ascending and descending order. Rows and headers are generated dynamically using React components, while D3 handles the underlying data manipulation logic. The table applies custom CSS styling, including hover effects, alternating row colors, and a colored header row, to improve readability. The example demonstrates a straightforward, reusable React table component capable of rendering and sorting simple structured data.

Loading thumbnail…

Under Custody

This interactive visualization displays New York State Department of Corrections and Community Supervision (DOCCS) under-custody data, showing both a bar chart and a choropleth map of county-level incarceration statistics. Users can filter the bar chart by selecting categorical variables like sex, age, or race for the x-axis and choose between metrics such as total count, average age, or average time served for the y-axis. Tooltips on bars reveal detailed breakdowns, including percentages and cumulative age-group totals. D3 v5 handles SVG rendering, scales, and axes, while React manages dropdown selections and updates the visuals dynamically.

Loading thumbnail…

Untitled

This example visualizes the counties of New York State using a Transverse Mercator projection, with state boundaries outlined and counties filled in gray. Hovering over a county highlights it in light blue. The code loads US TopoJSON data via `d3.json`, extracts New York using `topojson.feature`, and applies a clipping path to restrict county paths to the state outline. It uses `d3.geo.path` for rendering and `path.bounds` to auto-fit the projection scale and translation.

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

Loading thumbnail…

Untitled

An interactive choropleth map of Baltimore neighborhoods reveals selected workforce and economic indicators from 2010 to 2013, using a dropdown menu to switch among dozens of variables like employment rates, business counts, and educational attainment. The map uses d3.geo.mercator and d3.geo.path for geographic rendering, with d3.scale.linear and viridis colors for continuous value fills. A checkbox excludes downtown to rescale the color range, and hovering displays neighborhood names and values. Data originates from Open Baltimore.

Loading thumbnail…

Untitled

This example displays an interactive SVG map of New York State’s counties, rendered in light gray with black borders that highlight in light blue on hover. It uses D3 v3 with the Albers projection and `d3.geo.path` to draw the geographic features, filtered from a TopoJSON file by state FIPS code 36. The map loads county boundaries from a remote GitHub-hosted dataset, while an accompanying test file defines a tooltip with `d3.tip` for potential data annotations.

Loading thumbnail…

Untitled

This interactive map of New York State highlights four counties (St. Lawrence, Chemung, Ulster, and Albany) in steel blue based on data from a CSV file. The visualization embeds an SVG map, using D3 v3 with queue.js to load and style the counties. Hovering over any county displays a tooltip with its name and changes the fill color, while clicks can select a county. The code implements these effects using D3's selection and event handlers, transitioning between CSS classes like `.highlight`, `.hover`, and `.active`.

Loading thumbnail…

Map 3

This example renders a React application that displays the text “Map 3” at a large font size. The code uses React and ReactDOM, with the `App` component returning a styled message. The page is built using an external bundle, and the chart or map itself is not implemented in the provided source, showing only placeholder content.

Loading thumbnail…

New York Map

This map of New York census tracts uses a green sequential color scale to show the concentration of white residents per tract, with darker greens indicating higher counts. The visualization fetches census tract boundaries as TopoJSON and demographic data from the American Community Survey API, then joins them by tract ID. The code uses d3.geoPath to render the SVG paths and d3.scaleSequential with interpolateGreens for color encoding, while d3.zoom enables interactive panning and zooming of the map.

Loading thumbnail…

MAP

This interactive bar chart visualizes New York State Department of Corrections and Community Supervision (DOCCS) under-custody data, allowing users to filter and compare counts across selected categorical variables on both axes. Built with React and D3 v5, the chart renders SVG bars with tooltips showing percentages and cumulative age totals. The code uses d3.nest for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and react-dropdown components for interactive filtering. Raw JSON data is fetched via d3.json, with axes and tooltips styled through custom CSS.

Loading thumbnail…

Map

A world map displays events from the Missing Migrants Dataset as semi-transparent circles, with point size encoding the total number of dead and missing per location. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries, graticules, and sphere outlines with `d3.geoPath`. Circle radii are scaled using `d3.scaleSqrt`. The React application loads TopoJSON land and interior mesh data, alongside the dataset, to produce an SVG output.

Loading thumbnail…

Under Custody

Categorized bar chart visualizing the NY DOCCS under custody dataset, with dropdown menus allowing users to dynamically select which categorical variables to display on the X and Y axes. The chart is rendered as an SVG using d3.v5 within a React framework, featuring animated bar transitions when sorting options are applied via radio buttons. Hovering over bars triggers a tooltip showing the exact value and percentage of the total population. Data is loaded from a JSON file and transformed using d3.nest() to compute counts and averages.

Loading thumbnail…

Under Custody

This interactive bar chart explores New York State DOCCS under-custody data, showing population counts, average age, or average time served grouped by categories like sex, race, or age. Users select variables through React dropdown components for both axes, while radio buttons trigger animated re-sorting of bars by value or category. The visualization uses D3 v5 for scales, SVG rendering, transitions, and hover tooltips displaying counts and percentages, with data loaded and transformed via React hooks and D3's nest function.

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart lets users explore a dataset of individuals under custody in the New York DOCCS. The chart renders aggregated counts of people based on categories chosen for the x-axis (e.g., sex, race/ethnicity) and y-axis (e.g., amount, average age). Users dynamically change the variables plotted on each axis through dropdown menus, which update the bars and axis labels via D3.js v5. The visualization also includes a radio button for sorting the bars in descending order, and it builds its aggregated data using the `d3.nest()` API.

Loading thumbnail…

Mouseover

This visualization displays aggregated data about individuals under New York DOCCS custody, showing bar heights that represent the count of records for a selected variable on the x-axis against a chosen y-axis metric. Users can change both axes via dropdown menus, which re-aggregates the underlying dataset and updates the chart accordingly. The implementation uses D3 v5 functions including `d3.nest()` and `d3.rollup()` for data transformation, `d3.scaleBand()` and `d3.scaleLinear()` for scales, and `d3.axisBottom()` and `d3.axisLeft()` for axes. The visualization loads JSON data asynchronously via `d3.json()` and renders SVG rectangles with transitions on selection changes.

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart lets users explore New York State DOCCS under-custody data by selecting different variables for the x and y axes via dropdown menus. The visualization uses d3.nest, d3.rollup, and the general update pattern with enter, update, and exit selections to dynamically rerender bars and axes. It loads data from a JSON file and updates the scales and axes in response to user input.

Loading thumbnail…

Fork 3

This interactive bar chart displays averages of variables for individuals under custody, with both x- and y-axis variables selectable through dropdown menus. Users can rerender the data points and axes by choosing different grouping variables such as age, sex, or race. The visualization uses d3.nest() and rollup to aggregate data dynamically, with the general update pattern handling enter, update, and exit selections for bars and axes. Data comes from a remote JSON endpoint, rendered as SVG.

Loading thumbnail…

UnderCustory3

An interactive bar chart allows users to explore average survey responses for different student interests. The y-axis dynamically switches between variables like average height or stress level through a dropdown menu, recalculating the scale and animating the bars to their new positions. The chart is built with d3.v5 using shape-rendering SVG, and adopts a form-driven input with a data join abstraction to smoothly update existing elements.

Loading thumbnail…

Under Custody Fork

This interactive bar chart compares the aggregate minimum sentence lengths for different sexes in 2020, using data from a CSV file loaded via D3’s `csv` method. The visualization employs React components to render SVG bar marks, with scales created by `scaleBand` and `scaleLinear` for positioning. Axes are drawn using custom `AxisBottom` and `AxisLeft` components, and tooltips are provided via SVG `<title>` elements. The chart is filtered to show the top 10 entries from the United Nations World Population Prospects 2019 dataset.

Loading thumbnail…

RightAxis

This example displays an empty SVG canvas with visible margins, demonstrating a reusable React and D3 container component called `VizContainer` that abstracts SVG grouping and follows the margin convention. The component renders an outer and inner rectangle to highlight the plotting area, with conditional `showMargins` prop controlling their display. It uses `React.createElement` and JSX, with dimensions and margins defined as variables, and leverages the `d3` library version 6 for future charting. The setup includes CDN links for React, ReactDOM, and d3, providing a boilerplate foundation for adding custom visualizations.

Loading thumbnail…

AggregatedDeaths

This chart visualizes the total number of dead and missing migrants each month, aggregating the data into a date histogram. The y-axis displays the average age of death per month, while the x-axis shows time. The visualization uses React and D3 v5, specifically leveraging `d3.bin` to group the data into monthly bins and `d3.mean` to calculate the average age. The chart is rendered as an SVG and pulls data from a CSV file hosted in a GitHub gist.

Loading thumbnail…

DeathHistAggregation

This interactive scatter plot visualizes the age at death against the time of death using data from the Data Canvas Sense Your City dataset. The visualization clearly shows how mortality rates fluctuate over time, with each circle representing an individual death event. Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` functions for axis scaling and SVG rendering for the visual output. The implementation includes custom axis components and tooltips that display time information when hovering over individual data points.

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes age at death over time using the Data Canvas Sense Your City dataset. The visualization uses React with D3 v5 scale functions to map death dates on the x-axis and average age at death on the y-axis, rendering SVG circles with tooltips. The code implements custom React components for axes and marks, loading data through d3.csv from a GitHub-hosted CSV file.

Loading thumbnail…

Table of Contents

This example shows a collapsible table of contents for a book’s chapters and sections. Clicking a chapter heading toggles the visibility of its nested subsections, with a plus or minus sign indicating the expanded state. The page uses jQuery’s `click` handler, `fadeToggle`, and DOM traversal to animate the hide-and-show behavior, while CSS controls the heading colors, margins, and dotted borders. The content is hardcoded in the HTML, and no external data source is loaded.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for three flower species. Hovering over a species in the color legend highlights only those data points while fading the rest. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and SVG circles for marks.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot of the Iris Dataset maps petal length on the x-axis and sepal width on the y-axis, with each point colored by species via d3.scaleOrdinal. A color legend lists the three species using the same color scale, and axes are rendered as SVG ticks with formatted labels. The visualization is built with React components and d3’s scaleLinear for positioning, with the data loaded asynchronously via d3.csv.

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal color scale, with axes rendered as React components. The code loads CSV data via d3.csv, applies linear scales for positioning, and uses React with SVG to render the visualization with tooltips on each mark.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses D3.js scaleLinear for axis scaling and extent for domain calculation, with React managing the interactive dropdown menus. Users can select which attributes to plot on the X and Y axes via react-dropdown components, triggering state changes that update the SVG circles and axis labels accordingly. The plot renders using SVG elements, with each data point displayed as a circle with a tooltip showing its value.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the Iris dataset, allowing users to select any of four measurements—sepal length/width and petal length/width—for both the X and Y axes via dropdown menus, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, then renders circles via SVG marks with tooltips. The code relies on the `useData` hook to asynchronously load the CSV from Curran’s Gist, and custom `AxisBottom`/`AxisLeft` components generate ticks.

Loading thumbnail…

Fork of Menus with React

This interactive example demonstrates a reusable dropdown menu component built with React. It displays six pet options—dog, cat, hamster, parrot, spider, and goldfish—with hamster selected by default, and logs each user selection to the browser console. The code uses React hooks (useState) to manage the selected value, and passes options, the current value, and an update callback into a custom Dropdown component. The interface pairs a large label and select element styled via CSS, and renders through ReactDOM.render into the #root div.