Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
GGeri D.
Last edited Oct 23, 2020
Created on Oct 13, 2020

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.

AI-generated description

A histogram to be used in my final project dashboard.

This is the frequency of cases entering by Month.

Visualizing the data DefensiveAsylumCases_Dataset1

MIT Licensed

Similar vizzes

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.

GGeri D.
85% match
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.

GGeri D.
85% match
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.

GGeri D.
84% match
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.

GGeri D.
78% match
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.

GGeri D.
76% match
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of monthly incident counts, sorted by month from January through December. The code uses D3's `scaleLinear` and `scaleBand` to map incident values to bar widths and month labels to vertical positions, with `axisLeft` and `axisBottom` for the chart axes. Data is loaded asynchronously from a CSV file via `csv()`, and rendered as SVG rectangles within a 960x500 canvas. The visualization is built in a React environment, with styles defined in an external CSS file.

PPaolaAntonicoli
76% match
Loading thumbnail…

Vertical

This vertical bar chart displays the frequency of wait times from a defensive asylum cases dataset, showing the count of activities against categorical activity types. The visualization uses React with D3 v6 scales (`scaleBand` and `scaleLinear`) to map data to SVG rectangles, with custom `AxisBottom` and `AxisLeft` components generating ticks and gridlines. Data is loaded asynchronously via `csv()` from a GitHub-hosted CSV file, and each bar includes a native SVG `<title>` tooltip showing the count value.

AAditya Khandelwal
75% match
Loading thumbnail…

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.

GGeri D.
75% match