Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
LL1EO
Last edited Dec 29, 2019
Created on Dec 29, 2019
Forked from HTML Starter

A bar chart displays sales figures for individual salespeople, with each bar’s height proportional to the numeric value in the `sales.csv` dataset. The visualization uses D3 v4’s `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are rendered as SVG rectangles, colored steelblue via a CSS class, within a React-compatible HTML page.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This bar chart visualizes total car sales across different locations, with each location represented by a vertical bar scaled against a fixed y-axis range of 0 to 13. The chart uses D3.js v4 to fetch data from a CSV file hosted on GitHub, then renders the visualization as an SVG. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Bars are drawn as SVG rectangles with a teal fill color, and x-axis labels are rotated 45 degrees for readability.

MManideeprenikindi
86% match
Loading thumbnail…

Untitled

This example builds an interactive bar chart from tabular sales data using D3.js v2 and React. It displays the data as vertical bars with drop shadows, using ordinal and linear scales for positioning and height. The SVG rendering includes axis labels, tick formatting that maps to captions, and a y-axis scaled to the maximum value. The chart is embedded in a styled container and updates programmatically via a `Plot()` function when the page loads.

Aachalasam
85% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
84% match
Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices over multiple years, with steel-blue bars representing annual values. The visualization includes labeled axes: a rotated "Stock Price" y-axis formatted with dollar signs and a "Year" x-axis. Built with React and D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG elements, loading data from an external CSV file via `d3.csv`.

Jjshujaa2
84% match
Loading thumbnail…

Untitled

A bar chart displays population values for categorical X-axis entries, with bars extending upward from a baseline. The visualization uses D3 v5's `scaleBand` for the X axis, `scaleLinear` for the Y axis, and renders SVG rectangles with a steelblue fill. Data loads from a CSV file via `d3.csv`, with population values converted to thousands. Grid lines use `d3.axisBottom` and `d3.axisLeft` with custom tick formatting that abbreviates large numbers (e.g., "B" for billions), and the chart is built within a React-compatible HTML page.

Ssalwdata
83% match
Loading thumbnail…

Untitled

A bar chart displays population values for categorical X-axis entries, with bars extending upward from a baseline. The visualization uses D3 v5's `scaleBand` for the X axis, `scaleLinear` for the Y axis, and renders SVG rectangles with a steelblue fill. Data loads from a CSV file via `d3.csv`, with population values converted to thousands. Grid lines use `d3.axisBottom` and `d3.axisLeft` with custom tick formatting that abbreviates large numbers (e.g., "B" for billions), and the chart is built within a React-compatible HTML page.

Ssalwdata
83% match
Loading thumbnail…

Untitled

This interactive stacked bar chart displays the sales distribution across cities for a selected customer segment, using data from a CSV file of store transactions. A dropdown menu filters by segment, while a checkbox toggles city sorting by total sales value. Built with D3 v5 and React, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the bars, with smooth transitions animated via `transition().duration()`. SVG elements and axes update dynamically in response to user selections.

SSarahKiyani
83% match
Loading thumbnail…

Untitled

This example shows a bar chart displaying sales data with drop-shadowed bars and axes, animated in an SVG container. The chart uses a hierarchical caption system for tick labels and is built with D3 v2 scales and axes, including ordinal and linear scales. It also employs jQuery for DOM selection and element sizing. The code structures the visualization within a React framework, using D3’s SVG rendering and a filter with feGaussianBlur and feOffset for the shadow effect.

NNaveed945
83% match