Converge

100%

✓ Published0🌍 Public

Last edited Apr 25, 2022

Created on Apr 25, 2022

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.

AI-generated description

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

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

79% match

Loading thumbnail…

MyDataScatterPlot

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.

Ddleoenri

78% 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

77% 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

74% match

Loading thumbnail…

Activity 7

This visualization displays a horizontal bar chart comparing the number of users across various applications. Built with React and D3 v5, it renders data from a remote CSV file, loading and displaying the first 50 entries. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars rendered as SVG `<rect>` elements. The code includes custom axis components and formatting, converting large numbers to abbreviated forms with `format('.2s')`, and provides tooltips showing the formatted user counts.

JJayanthKumarkoni

69% match

Loading thumbnail…

graph3

A horizontal bar chart displays mobile operating system market share for 2009, 2014, and 2020, animating transitions between years when selected from a dropdown menu. Bars re-sort by value, while labels show each platform’s percentage of the total. The D3 v5 code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, `d3.axisTop` and `d3.axisLeft` for tick marks, and `transition().duration()` with staggered delays for animation. Data is embedded directly in the HTML, with SVG rendering for all graphical elements.

JJoseph D. Galloway II

69% match

Loading thumbnail…

Fork of DV Assignment 2

This visualization displays a horizontal bar chart comparing the number of users across different applications. Each bar’s length represents the user count for a specific application, with data loaded from a remote CSV file using d3.csv. The React-based implementation uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering bars as SVG rectangles. Axes are generated through custom React components, and d3.format with SI prefixes formats tick labels into readable abbreviations.

NNagateja99

69% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays mobile sales figures for ten brands as horizontal bars, using a bar chart format. The React component manages the application state, loading CSV data through d3.csv from a GitHub-hosted dataset. D3's scaleBand and scaleLinear functions map the categorical brand names and numeric sales values to screen coordinates. The chart is rendered as an SVG, with axes and tick marks generated through d3's axis utilities, while React creates the SVG elements declaratively. The chart includes green grid lines and a title, "Mobile Sales," within a web page styled with CSS.

YYbg99g

68% match