Evan Misshula

@EvanMisshula·8 public vizzes

nests1

This visualization presents a filterable bar chart of data on individuals under custody, using a nested hierarchy to organize records by status and priority. The interactive page, built with React and rendered as SVG, loads JSON data from a GitHub Gist and processes it through the `d3.nest()` API to create the structured dataset. The code imports `nest`, `select`, and `remove` from D3 v5, with data cleaning and transformation handled by custom functions in `prepareData.js`, while the `d3.json` method fetches the remote source.

Mar 15, 2021

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

A bar chart explores New York State DOCCS under-custody data, allowing users to select which categorical variable (such as sex or race/ethnicity) appears on the x-axis and which aggregate metric (such as count, average age, or average time served) appears on the y-axis. The visualization uses d3.nest() to group and roll up records, and d3.scaleBand and d3.scaleLinear to position bars. Data loads as JSON from a GitHub gist, and the SVG rendering updates dynamically via d3 transitions and axis redraws.

Mar 12, 2021

Loading thumbnail…

NY DOCCS Under Custody Data Visualization with Filters

This interactive bar chart visualizes New York DOCCS under-custody data, allowing users to filter and explore distributions across categorical variables. The visualization plots the number of individuals, average age, or average time served against a chosen demographic field like sex or race/ethnicity. Built with React and D3 v5, the example uses `d3.nest()` and `d3.rollup` to aggregate CSV data, while `d3.scaleBand` and `d3.scaleLinear` handle positioning. User selections dynamically update the axes and bars via form inputs, with the SVG rendering driven by D3 data joins.

Mar 12, 2021

Loading thumbnail…

Fork of Menus with ReactEM

This example demonstrates an interactive pet-selection menu built with React. It shows a dropdown list of six animal options, with the currently selected value displayed and logged to the console. The code uses React’s `useState` hook to manage the selected value and passes it to a reusable `Dropdown` component, which renders a native `<select>` element. ReactDOM renders the app, while the interface is styled with plain CSS for large text and hidden page overflow.

Feb 6, 2021

Loading thumbnail…

Smiley Face Part III

A yellow smiley face is rendered as an SVG graphic, featuring circular eyes, an arc-based mouth, and a blue rectangle labeled “Math.” The example demonstrates integrating React with D3 by using the D3 `arc` generator to create the mouth path, while React manages the SVG elements. The face is drawn with a yellow circle, black stroke, and text symbols for eyes, all positioned via SVG transforms within a fixed 960x500 viewport.

Jan 22, 2020

Loading thumbnail…

Q1 graphs

This interactive bar chart visualizes survey responses from incarcerated individuals, broken down by category (Services, Procedure, Economics, Health and Well Being). A dropdown menu lets users switch between these categories, updating the displayed questions and their corresponding "Yes" percentages. The chart uses a horizontal bar layout where each bar represents a survey question, with length proportional to the affirmative response rate. Built with D3 v5, it leverages `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and `axisLeft`/`axisBottom` for axes, rendering as SVG.

Jan 16, 2020

Loading thumbnail…

Q1 graphs

This interactive visualization displays survey results from incarcerated individuals, showing the percentage of "yes" responses for various questions across five service and procedure categories. Users select a category from a dropdown menu to filter the horizontal bar chart, which orders questions by their yes-percentage values. The visualization uses D3 v5 with SVG rendering, leveraging `scaleLinear` and `scaleBand` for the bar dimensions, `axisLeft` and `axisBottom` for the axes, and a custom dropdown menu component. Data comes from the aggregated CSV file containing survey counts and percentages.

Jan 15, 2020

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries from a 2019 UN dataset, using horizontal bars sorted by country name. The visualization renders in SVG via React, with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis) and includes axis components and tooltips showing formatted population values. Data is loaded asynchronously with `d3.csv`, with population values computed from the dataset’s “2020” column. The chart’s styling uses Poppins font and teal bars against a minimal, clean background.

Jan 13, 2020