Geri D.

@trueicesk8ter·24 public vizzes

Multi Plots

This interactive dashboard displays asylum case wait times from a Defensive Asylum Cases dataset, featuring a main scatterplot with multiple mini bar charts showing distributions by nationality, month, and wait time. The main plot uses d3.scaleTime and d3.scaleOrdinal to render SVG circles colored by decision code, with hover interactions filtering data via a color legend. Users can filter by year through a React dropdown, which adjusts the x-axis time format and highlights selected data points.

Jan 4, 2021

Loading thumbnail…

IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot displays the number of wait-time days from when a defensive asylum case entered the system to its exit, plotted against the entry date, with decision codes encoded by color. A dropdown menu filters the data by year, and hovering over the color legend fades unselected decision codes while tooltips show exact wait times. Built with React and D3 (v5), the visualization uses SVG elements, a time-scale x-axis that switches from year to month/day formatting depending on the selected range, and filters the dataset to show a "no data" message when a year has no entries. The dataset is loaded from a CSV URL.

Jan 4, 2021

Loading thumbnail…

Dimas_Visualization 1_Dataset1_Entracne Date for Cases and thier Decisions Over Time Scatterplot

This scatterplot explores the relationship between the date a defensive asylum case enters the system and the time it takes to reach a decision, with each point colored by the case’s decision code and hoverable to reveal the exact wait time in days. The visualization uses the Vega-Lite API and D3 to load and preprocess the data, parsing dates, calculating the wait time in days via `d3.timeDay.count`, and extracting the entry year for the x-axis. The y-axis shows the count of wait times, while the tooltip displays the raw wait-time value from the underlying dataset.

Jan 4, 2021

Loading thumbnail…

Scatterplot using react and D3 with DropDown Menu Filtering WORKING

A scatterplot of asylum case data shows wait time in days against case entry date, with each point colored by decision code. A dropdown menu filters the visualization by year, changing the x-axis tick format from years to months when a specific year is selected. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for axes, SVG circles for marks, and React state management to handle filtering through the `react-dropdown` component. Data comes from a CSV file loaded via D3's `csv` function.

Jan 4, 2021

Loading thumbnail…

Final Project In Progress...

This interactive scatterplot visualizes defensive asylum case wait times by application year, using a dropdown menu to filter between all years or a specific year from 2003–2011. The x-axis displays application date while the y-axis shows wait time in days, with hover tooltips revealing exact dates. Built with React and D3.js v5, the visualization uses `scaleTime` and `scaleLinear` to map data, with custom `AxisBottom`, `AxisLeft`, and `Marks` components rendering SVG circles. Data comes from a CSV file loaded via `d3.csv`, and the dropdown uses `ReactDropdown` to toggle between year groups.

Jan 4, 2021

Loading thumbnail…

Multi Plots With Brushing

This example shows a scatterplot of asylum case wait times with interactive year selection and linked histograms. A dropdown menu filters data by year, while hovering over the color legend highlights matching points and updates three miniature plots showing distributions of wait time, entry month, and nationality. Brushing on the main scatterplot with d3.brushX filters points across all views. The visualization uses React with d3.v6 scales, SVG rendering, and data from a CSV file of Defensive Asylum cases.

Jan 4, 2021

Loading thumbnail…

Scatterplot using react and D3 with DropDown Menu |Filtering for OnChange of data not fully working...yet!

A scatterplot of Defensive Asylum case processing times visualizes wait time in days against the Office of the Chief Counsel (OSC) date of entry. The visualization uses React with D3.js to render SVG circles, with axes generated by custom components. A dropdown menu, implemented with `react-dropdown`, allows filtering by year; however, the filtering logic is incomplete, as the displayed data is not updated based on the selected year. The code includes a `filterYear` function that filters data by year using `d3.timeFormat`, but the `onChange` handler only updates the selected attribute without applying the filter to the plotted marks.

Jan 4, 2021

Loading thumbnail…

Dimas_Dataset1_Defensive_Asylum_Immigration_Court

This example displays metadata about a sample of 100 defensive asylum cases in the U.S. immigration court system, showing the dataset’s size, row count, and column count. It loads a CSV file from a GitHub gist using `d3.csv` and formats the text with `d3.csvFormat`. The visualization summarizes the raw data rather than charting specific attributes, serving as a preliminary data overview for exploring case outcomes, nationality, and case duration.

Jan 4, 2021

Loading thumbnail…

Final Project: Mini Chart 2: Bar Chart Month Of Entry

This histogram displays the distribution of defensive asylum cases by the month of entry. Built with React and D3 v6, it uses `d3.histogram` to bin cases into monthly intervals, with `d3.scaleLinear` mapping the numeric month values to x- and y-axes. The SVG rendering includes custom axis components and purple bars, with tooltips showing the case count for each month. Data comes from a CSV file loaded via `d3.csv` from a GitHub gist.

Oct 23, 2020

Loading thumbnail…

Final Project: Mini Chart 3: Bar Chart Freq of Nationality_Vertical

This bar chart displays the frequency of asylum cases by nationality, with counts plotted along the y-axis and nationality categories along the x-axis. The visualization uses React with D3 v6 to render SVG elements, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the count values. Data is sourced from a CSV of Defensive Asylum cases, aggregated using `d3.nest()` to count cases per nationality. Custom React components (AxisBottom, AxisLeft, Marks) handle chart rendering, and the dataset is filtered to exclude specific entries before visualization.

Oct 23, 2020

Loading thumbnail…

Final Project: Mini Chart 3: Bar Chart Freq of Nationality

This bar chart displays the frequency of nationalities among defensive asylum cases, with nationality on the y-axis and case count on the x-axis. The chart uses React with D3.js v6, employing `scaleBand` and `scaleLinear` for the axes and SVG `<rect>` elements for the bars. Data is aggregated from a CSV file using D3's `nest()` and `rollup()` functions, sourced from the United Nations World Population Prospects 2019. Tooltips reveal the exact count for each bar on hover.

Oct 23, 2020

Loading thumbnail…

Final Project: Mini Chart 1: Bar Chart Freq Wait Times

A histogram displays the distribution of wait times in days between an asylum case's OSC and completion dates, counting how many cases fall into each time bin. The chart uses a linear x-scale and y-scale to position bars, with green rectangles rendered as SVG marks. Built with React and D3 v6, it loads data from a CSV of DefensiveAsylumCases, bins values using `d3.histogram`, and computes frequencies with the `count` function. Axis components generate tick marks and labels, while a native SVG `<title>` element provides hover tooltips.

Oct 20, 2020

Loading thumbnail…

Multi Plots_FirstStep

This scatterplot visualizes 200 sampled asylum cases, plotting wait time in days against the date each case entered the system. A dropdown menu filters the data by year, while a color legend categorizes points by decision code; hovering over legend items highlights the corresponding cases and fades others. The visualization uses React with D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `extent` to render SVG axes, circles, and interactive elements. Data comes from a CSV file loaded via `d3.csv`, and filtering is handled through custom year-grouped attributes.

Oct 20, 2020

Loading thumbnail…

Final Project: Mini Chart 1: Nationality

This bar chart shows the count of asylum cases grouped by nationality. The visualization, built with Vega-Lite and rendered via the vega-lite-api, displays the distribution of cases across different countries. The data is loaded from a CSV file using d3.csv, with dates parsed into year and wait-time calculations. The chart is configured with custom styling for axis labels and a dark color scheme.

Oct 14, 2020

Loading thumbnail…

Dimas_Visualization 1_Dataset1_Application of Cases and thier Decisions Over Time Scatterplot

This scatterplot visualizes defensive asylum cases by plotting the count of cases against the date applications were received, with color encoding the decision code. Hovering over a circle displays the total case count via tooltip. The visualization uses the vega-lite API with d3.v5 to render SVG marks, configuring axes, zero suppression, and a dark color scheme. Data is loaded asynchronously from a CSV file of DefensiveAsylumCases using d3.csv.

Sep 25, 2020

Loading thumbnail…

Dimas_Tweak a Face Assignment

This example combines D3.js and React to construct a stylized pumpkin face, built from layered SVG shapes. It arranges five orange circles to form the pumpkin body, adds a green stem, and uses black polygons for the eyes and nose. The mouth is created with D3's `arc` function, which generates a semicircular path with a specified radius and width. Additional orange rectangles serve as teeth, completing the carved jack-o'-lantern effect. The visualization demonstrates declarative SVG composition within a React component, utilizing `d3.arc` for geometric path generation.

Sep 21, 2020

Loading thumbnail…

Dimas_Chicago Cubs Wins and Losses Scatter Plot

A scatter plot visualizes Chicago Cubs season results, with wins on the x-axis and losses on the y-axis, while color encodes the team’s final place finish. Hovering reveals the season year and games behind (GB), contextualizing performance relative to division standing. The visualization uses Vega-Lite’s API and D3.js to load CSV data from a GitHub gist, rendering circles with an opacity of 0.5.

Sep 21, 2020

Loading thumbnail…

Dimas_Chicago Cubs Wins and Losses by Team Name over Years with PCT_Square Vertical Plot

This visualization uses a square scatter plot to compare the historical wins and losses of the Chicago Cubs across different team names and seasons. Each square represents a year, positioned by team name on the x-axis and total wins on the y-axis, with color encoding the team’s winning percentage (PCT). The tooltip reveals the season year and games behind (GB). Built with Vega-Lite API and D3, the chart loads CSV data from a GitHub gist and applies a custom dark-themed configuration to improve readability.

Sep 21, 2020

Loading thumbnail…

Dimas_Chicago Cubs Wins and Losses ScatterPLot with Boxs and PCT Scale

This visualization uses a scatterplot to compare Chicago Cubs wins and losses across seasons, with the winning percentage (PCT) encoded through the color of each square mark. The plot is built with Vega-Lite API (v4) and D3 v5 for data loading via `d3.csv`, rendering the dataset from a GitHub gist. Tooltips display season year, games behind (GB), and PCT for each data point, while axes are customized through the `config` object to improve readability.

Sep 21, 2020

Loading thumbnail…

Dimas_NYC Homeless Shelter Data_Number of adults in shelter by date Area Chart

This area chart displays the total number of adults in New York City homeless shelters on a nightly basis from 2013 to 2019, using data from the DHS Daily Report. The visualization encodes the census date on the x-axis and the shelter population on the y-axis. It renders with Vega-Lite and d3.v5, applying the `csv` loader to fetch the dataset and styling the chart with a custom config for larger, darker labels and a light gray tick color.

Sep 21, 2020

Loading thumbnail…

Dimas_NYC Homeless Shelter Data_Number of adults in shelter by date Line Chart

A line chart displays the nightly total number of adults in New York City homeless shelters from 2013 to 2019, averaging values by month for smoother trends. Built with Vega-Lite and d3.v5, it uses `vl.markLine` and encodes dates as a temporal field with `yearmonth` aggregation. Data comes from the DHS_Daily_Report CSV loaded via d3.csv, with a custom dark-color config and tooltip handler for interactivity.

Sep 21, 2020

Loading thumbnail…

Dimas_Dataset3_CubsData

This example displays basic metadata about the Chicago Cubs yearly statistics from 1874 to 2016, loading a CSV file from a GitHub gist. It shows the file size in kilobytes, the number of rows, and the number of columns in the dataset, which includes wins, losses, and games behind. The code uses the D3 v5 library, specifically `d3.csv` and `d3.csvFormat`, to fetch and parse the data, then updates an HTML `<pre>` element with the computed summary. The visualization itself is minimal, serving as a data-loading preface rather than presenting any charts or graphs.

Sep 21, 2020

Loading thumbnail…

Dimas_Dataset2_DHSHomelessData

This example loads the New York City DHS Daily Report dataset, reformatted into a tidy CSV, and summarizes its size using the browser. The page fetches the data asynchronously with the Fetch API and parses it with d3.csv, then writes the file size in kilobytes, row count, and column count into a large text element. It demonstrates both a promise-based d3.csv workflow and a commented-out async/await alternative, making the initial data loading and inspection step explicit.

Sep 21, 2020

Loading thumbnail…

Dimas_Dataset2_DHSHomelessData_NEW_09_21_2020

This example loads a CSV of daily New York City DHS shelter census data and displays a summary of the dataset’s size and structure, showing the file size in kilobytes, row count, and column count. Using d3.csv to fetch and parse the remote file, the code formats the results into a large pre-formatted text block. The dataset tracks nightly counts of families and individuals, broken down by unit type and whether children are included, sourced from the City of New York’s public DHS Daily Report.

Sep 21, 2020