D3 Graph Example

100%

D3 Graph Example

✓ Published1🌍 Public

Last edited Apr 22, 2020

Created on Apr 21, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Line Chart

This example uses a line chart to show the sales of a company over time, with years on the x-axis and sales values on the y-axis. The visualization includes labeled axes, a title, and a red line path. Built with React and D3 v5, it loads CSV data from a GitHub Gist and renders the chart as SVG. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to map the data to visual elements.

Mmanvithareddykarra

81% match

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

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

80% match

Loading thumbnail…

D3 Blanck Canvas

This example demonstrates a line chart visualization with an orange scatter plot overlay, rendered as SVG within a React framework. Using d3.csv to load data and d3.scaleTime and d3.scaleLinear to map dates and values, it plots a maroon line path and orange circles. The axes are drawn with d3.axisLeft and d3.axisBottom, while CSS styles the chart with large labels and a hidden overflow layout.

DDaniel Rivera

80% match

Loading thumbnail…

Simple bar graph in v5

This example shows a simple bar chart of sales figures by salesperson, with steel-blue bars and labeled axes on both sides. The data comes from a CSV file containing names and numeric sales values. The code creates a band scale for the x-axis and a linear scale for the y-axis, then uses `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to render the axes. Bars are appended as SVG `rect` elements, with widths and heights computed from the scales. The chart uses D3 v5 and is rendered entirely in SVG.

Dd3noob

80% match

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

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

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