Skip to main content
SimilarExport ZIP
100%

MyDataScatterPlot

✓ Published0🌍 Public
Ddleoenri
Last edited Apr 25, 2022
Created on Apr 25, 2022

This bar chart displays the number of downloads for various mobile devices, using a horizontal bar layout where the length of each bar corresponds to the download count. The visualization includes interactive elements like file upload and date picker inputs, though the data itself is fetched from a remote CSV file. The chart is built with React and rendered as SVG, utilizing D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Hovering over a bar reveals a tooltip with the precise download value, and the bars are styled with a color transition on hover.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Barchart Test

This stylized bar chart displays mobile app download totals across devices, with the dataset filtered to two rows and the x-axis scaled beyond the maximum value to expand tick labels. The visualization is built with React (v18) and D3 v7, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. Hovering changes bar color via CSS transitions, while `<title>` tooltips show formatted values. Data loads from a CSV via `d3.csv`, and axes are generated from D3 scales rather than D3 axis components.

Ddleoenri
83% match
Loading thumbnail…

Refactored Barchart Test

This example shows a horizontal bar chart comparing mobile app downloads across devices, using a filtered dataset of two rows extracted from a CSV file. The visualization renders SVG rectangles scaled by download counts, with axis labels generated through React components. The code builds the chart using D3 v7’s `scaleBand` and `scaleLinear` for positioning, while React manages component state via hooks like `useState` and `useEffect` to load and slice the data asynchronously.

Ddleoenri
80% match
Loading thumbnail…

Barchart Test

This example shows a horizontal bar chart comparing the number of downloads for two mobile device categories. The bars are rendered as SVG rectangles using React, with scales created by `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. It uses `d3.csv` to load data from a GitHub gist, filtering the dataset to two rows. The chart includes grid lines and tick labels generated from `xScale.ticks()`, while y-axis labels are positioned manually from the scale’s domain.

Ddleoenri
79% match
Loading thumbnail…

Converge

This visualization displays mobile app download counts per device using a horizontal bar chart. The chart filters data by a specific date, showing only entries from 02/09/2022. Bars are rendered as SVG rectangles using React components, with scales from D3 v7 (`scaleLinear`, `scaleBand`) mapping download values to widths and devices to vertical positions. The visualization includes an X-axis with formatted tick labels and an interactive file upload input that appears intended for loading custom datasets.

Ddleoenri
78% match
Loading thumbnail…

Bar chart using react and d3

This gallery example demonstrates a horizontal bar chart that visualizes population data for various countries. The chart uses D3's `scaleBand` and `scaleLinear` functions to map country names to the y-axis and population values to bar widths, rendering the results as SVG rectangles. The data is loaded asynchronously from a CSV file via `d3.csv` and managed through React's `useState` and `useEffect` hooks. The visualization leverages React's declarative component model alongside D3's scaling utilities to produce a clean, interactive-free static chart.

MmohitPassan
74% match
Loading thumbnail…

DV Assignment 2

This example shows a horizontal bar chart of application names against their number of users, sourced from a CSV file, with data limited to the first 50 records. The visualization uses React components and d3.scaleBand and d3.scaleLinear for scaling, while d3.max and d3.format handle data aggregation and tick label formatting. Bars are rendered as SVG rects with tooltips, and custom AxisBottom and AxisLeft components place ticks and labels. The CSV is loaded asynchronously with d3.csv, and styling is applied via CSS classes for ticks and marks.

NNagateja99
73% 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
73% match
Loading thumbnail…

Bar chart

This bar chart displays the top 20 smartphone models by units sold, with each bar’s length representing millions of units and its color indicating the brand. Hovering reveals a tooltip with price, rating, and battery life. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `scaleOrdinal` with `schemePastel1` for color, and parses a single-line CSV dataset via `csvParse` after normalization. The SVG renders with grid lines, tick labels, and value annotations.

Llohitsai.nikkil@gmail.com
73% match