Skip to main content
SimilarExport ZIP
100%

mRay usage statistics

✓ Published0🌍 Public
Mmegshe
Last edited Aug 6, 2021
Created on Aug 6, 2021
Forked from HTML Starter

A bar chart shows active users per month for mRay at a specific Asklepios clinic over one year, with tooltips on hover. The visualization is built with React and D3 v5, using `d3.scaleBand`, `d3.scaleLinear`, and D3 axes. SVG rendering includes responsive resizing and wrapped x-axis labels, while a custom tooltip appears on mouseover. Data is embedded directly in the script.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Monthly publications

The visualization displays monthly publications as horizontal bars split by category, comparing COVID-19-related output against other publications across months. It uses React with D3 v6 scales (scaleBand, scaleLinear, scaleOrdinal) to render SVG rectangles with tooltips and text labels. Data is loaded via d3.csv from a GitHub gist, with each month showing paired bars in red and orange. A color legend identifies the two categories, and axes are constructed using custom React components with D3 tick generation.

BbeauMarko
64% match
Loading thumbnail…

Migrant Data

This visualization displays the total number of dead and missing migrants over time, using a bar chart where each bar aggregates monthly data. Built with React and D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, and D3's `histogram` to bin the data by month. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with each bar showing a tooltip via a `<title>` element. Data comes from the Data Canvas Sense Your City Dataset.

Ddumbdataguy@gmail.com
63% match
Loading thumbnail…

Missing Migrants

This visualization displays monthly totals of dead and missing migrants from the Missing Migrants Dataset using a bar chart of aggregated counts over time. The React app loads CSV data via the `useData` hook, then uses `d3.histogram` with `timeMonths` thresholds to bin records by reported date. Axes are rendered as SVG components using `scaleTime` and `scaleLinear`, with bars drawn as SVG rectangles. The y-axis sums deaths per bin via `d3.sum`, while tooltips reveal precise totals on hover.

NNelson Kalgushkin
63% match
Loading thumbnail…

Test

This visualization uses D3.js to display percentile trends over time for performance metrics. The view combines multiple SVG areas and a line to represent the 5-95%, 25-75%, and median values across dates from August to September 2014. Animated markers slide upward from the bottom to highlight Client and Server release versions, using D3 transitions with dynamic path lengths. The chart includes axes, a custom clip path for the legend area, and smooth basis interpolation for all drawn shapes.

CCheah Peng Huat
63% match
Loading thumbnail…

Missing migrants

This visualization shows the total number of dead and missing migrants reported per month, using a bar chart where each bar aggregates monthly totals. The code loads a CSV dataset of migrant incidents, bins the reported dates into monthly intervals using `d3.bin` with `timeMonths` thresholds, and sums the "Total Dead and Missing" values per bin. React manages the component state while D3 scales (`scaleTime`, `scaleLinear`) and axes render the SVG output. Axes are formatted with `timeFormat`, and tooltips display raw values via SVG `<title>` elements.

MmohitPassan
63% match
Loading thumbnail…

Top 10 Mobile Apps Visualization

This bar chart displays the average daily usage in minutes for ten mobile apps, with each bar’s height corresponding to the usage value. Built with React and D3.js (v7), it renders as an SVG using `scaleBand` and `scaleLinear` for the axes, with `axisBottom` and `axisLeft` generating tick marks and gridlines. The chart loads its dataset from an embedded array in the HTML, while the React app uses a `ResizeObserver` to adapt the visualization’s dimensions. Interactive hover effects change bar color, and clicking a bar toggles its selection state, adjusting opacity and fill via D3’s join operation.

Kkonudulamanisha@gmail.com
63% match
Loading thumbnail…

Missing migrants p1

A histogram displays the monthly total of dead and missing migrants, with rectangular bars representing cumulative counts over time. The chart uses React with D3 v6, employing d3.bin, d3.scaleTime, d3.scaleLinear, and d3.timeMonths to aggregate data from the Missing Migrants Project subset. Hovering over a bar reveals a tooltip showing the specific count and month/year. The SVG rendering includes custom axes for time and count, with a Poppins font and teal-colored marks.

Ssurikmeetr
63% match
Loading thumbnail…

Tracking Migrant Deaths

This visualization tracks migrant deaths and disappearances over time using a histogram of monthly totals. The bar chart displays the aggregate number of dead and missing individuals per month, with a native tooltip on each bar showing the exact date range and total. The code uses React and d3.v5, leveraging `d3.bin` with `d3.timeMonths` thresholds to bin the data by month, `d3.scaleTime` for the x-axis, and `d3.scaleLinear` for the y-axis. Data comes from a CSV of the Missing Migrants Global dataset, rendered as SVG rectangles with axes built from custom React components.

PPhronesis
63% match