SVG

100%

✓ Published1🌍 Public

Last edited Apr 2, 2020

Created on Mar 31, 2020

Forked from Untitled

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

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.

Jjarvis

94% match

Loading thumbnail…

Stacked Bar Chart with D3.js

This stacked bar chart visualizes monthly sales data for ten products, with each bar segmented by month. The example uses D3.js v7 to generate random data, render SVG rectangles for the bars, and apply `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeCategory10` distinguishes months, while axes, labels, and a legend are added using `d3.axisBottom` and `d3.axisLeft`.

Ssaikrishnabussa

82% 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…

3D Bar chart

This example displays monthly sales rates for different fruits as colored 3D bars, with one cluster per fruit and twelve bars per cluster representing January through December. The visualization uses the d3-x3d library to bridge D3.js version 5 with X3DOM for WebGL rendering. Data is loaded from a CSV file via `d3.csv`, then parsed into nested objects where each fruit has an array of month-value pairs. The chart is configured using `d3.x3d.chart.barChartMultiSeries`, which automatically generates scalable vector graphics coordinates and 3D geometry, while axes and scales are handled internally by the chart component.

MMgk1255

80% match

Loading thumbnail…

Fork of Bar Chart

This visualization displays monthly global sales data from January 2017 through December 2018 using an animated bar chart. The bars show sales figures in steel blue, turning orange on hover with a smooth transition, while axes are labeled with month names and sales values. Built with D3 v6, the example loads data from a local CSV file and uses `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the SVG chart. Mouse interactions use standard D3 event handlers with a 250-millisecond transition effect.

Sshahedabdullhadi

80% match

Loading thumbnail…

Untitled

A bar chart displays monthly revenue from a JSON dataset, with each bar representing one month from January to July. The visualization uses D3 v6 to draw SVG rectangles scaled by a linear y-axis and a band x-axis, with axis labels for "Month" and "Revenue." The code loads data via `d3.json`, formats revenue values as numbers, and renders the chart using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs.

EEmanuel Alvarado Perez

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

80% match

Loading thumbnail…

Stacked Bar Graph with D3.js

This stacked bar graph visualizes yearly sales, expenses, and profit data from 2015 through 2033 using D3.js v7. The chart employs `d3.stack()` to layer the three categories, with `d3.scaleBand()` for the x-axis and `d3.scaleLinear()` for the y-axis. Each bar segment is rendered as an SVG `rect`, colored via `d3.scaleOrdinal()`, with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. The data is embedded as CSV strings, parsed with `d3.csvParse()`, and displayed within a React framework using SVG rendering.

Ssaikrishnabussa

79% match