Skip to main content
SimilarExport ZIP
100%

SVG

✓ Published0🌍 Public
Jjarvis
Last edited Mar 31, 2020
Created on Mar 31, 2020
Forked from SVG

This example visualizes monthly sales data as a bar chart, with bars colored dark gray or red depending on whether sales exceed 20. It loads data from a local `sales.json` file and renders both bars and labels using SVG. The chart includes a linear y-axis for sales and a band-scaled x-axis for months, both created with `d3.scaleLinear` and `d3.scaleBand`, and formatted via `d3.axisLeft` and `d3.axisBottom`. The code is written for D3 v5 within a React-ready HTML page.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG

This example visualizes monthly sales data as a bar chart rendered with SVG. Three bars represent January, February, and March, with sales values of 25, 10, and 15, colored red or gray based on a threshold. The code uses D3 v5’s `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and `d3.axisLeft`/`d3.axisBottom` to generate axes. Raw JSON data is loaded via `d3.json`, and bars are drawn using SVG `rect` elements with labels appended as `text` elements.

VVishwas2629
94% match
Loading thumbnail…

sales data

This visualization displays monthly sales data as a bar chart, with the x-axis representing the month and the y-axis showing sales figures. The bars are rendered in steel blue and turn orange on hover, providing interactive feedback. The chart is built using the D3.js library (d3.v7) with SVG rendering, and data is loaded from a CSV file hosted on GitHub via `d3.csv` with `d3.autoType` for type conversion. Axes are generated using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`.

Aadithiarikatla@gmail.com
83% 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
81% match
Loading thumbnail…

test

This example presents a bar chart of sales figures for nine retail stores, sourced from a JSON file. The visualization encodes each store’s sales value as a horizontal bar’s width, with a fixed height and blue fill. Built with D3 v4, the code loads the data via `d3.json`, then appends SVG rectangles to a canvas using the `data`, `enter`, and `append` methods, mapping the `Sales` field to a scaled width.

TTCSMFrogdance
81% match
Loading thumbnail…

D3 Graph Example

This example visualizes sales and efficiency data over time from a CSV file. It uses D3.js v5 with a React framework to render an SVG chart with steelblue bars for sales and a line for efficiency. The chart features dual y-axes, with sales on the left and efficiency on the right, using `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `line` for the visualization.

DDaniel Rivera
81% match
Loading thumbnail…

Rendering marks and channels with D3.js and SVG

This example displays a bar chart of store data, showing the relationship between store size and type. Written in React, the visualization uses D3.js to load CSV data from a remote URL, then maps the data to SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with axis ticks and labels generated via `xScale.ticks()`.

Ddivyagunuguntla
81% match
Loading thumbnail…

dataq2

This example shows a monthly sales area chart rendered as an SVG, with labeled x- and y-axes. It uses D3 v6 `scaleBand` and `scaleLinear` to map months and sales values, while `d3.area` generates the filled path from the provided dataset. Axis labels are drawn manually as SVG text elements, and the chart is embedded directly in the HTML page without a separate data-loading step.

Pp99vijaya@gmail.com
80% match
Loading thumbnail…

Untitled

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.

LL1EO
80% match