Skip to main content
SimilarExport ZIP
100%

Vertical

✓ Published0🌍 Public
AAditya Khandelwal
Last edited May 1, 2021
Created on May 1, 2021

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.

AI-generated description

A histogram to be used in my final project dashboard.

This is the frequency of length of wait Times.

Visualizing the data DefensiveAsylumCases_Dataset1

MIT Licensed

Similar vizzes

Loading thumbnail…

Vertical Bar Chart with React & D3

A vertical bar chart built with React and D3 renders a CSV dataset of activities and their counts as steelblue SVG rectangles. The chart computes a band scale for the categorical x-axis and a linear scale for the numeric y-axis, with axes generated using `d3.axisBottom` and `d3.axisLeft`. A custom `useD3` hook handles SVG selections and updates the bars, while the React component loads the CSV asynchronously via `d3.csv` and passes the data to the chart.

AAditya Khandelwal
82% match
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.
79% 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.
77% match
Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal
77% match
Loading thumbnail…

Stylized Bar Chart

This interactive visualization displays the cumulative count of cases over time as a horizontal bar chart, showing daily recorded values from March to April 2020. The chart uses React to render SVG elements, with d3.scaleBand for the categorical date axis and d3.scaleLinear for the value axis. Each bar includes a tooltip via SVG title elements, while axes are constructed using d3's tick generation through custom React components. The data comes from a local CSV file, parsed with d3.csv, and styled with a custom Poppins font.

PProger666
76% match
Loading thumbnail…

Vertical bars but d3.v3

A vertical bar chart displays monthly values from a two-column CSV, with dates on the x-axis and values on the y-axis. The visualization uses the older d3.v3 API, loading the library from a CDN into the page. It constructs the chart with an ordinal scale for the date categories, a linear scale for the value range, and SVG axes, then renders steelblue rectangles for the bars. The code employs chained methods like `d3.scale.ordinal()`, `d3.svg.axis()`, and `.rangeRoundBands()` to position and size the bars.

SSebastian Barrett
76% match
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.

GGeri D.
75% match
Loading thumbnail…

assign2-5

This interactive scatterplot displays asylum case wait times (in days) versus entry dates, with a dropdown menu to filter by year. The x-axis dynamically switches between yearly and monthly tick formats based on selection. Using React with D3 v5 scales (scaleTime, scaleLinear), the visualization renders SVG circles with hover tooltips showing exact wait times. Data comes from a CSV of defensive asylum cases, processed with d3.csv and time formatting utilities.

Ppardha1411
75% match