Skip to main content
SimilarExport ZIP
100%

Teste

✓ Published0🌍 Public
Ggabrielribeirob
Last edited Nov 5, 2021
Created on Nov 5, 2021
Forked from LineChart

This example visualizes daily e-commerce sales data, showing gross profit and quantity sold over time from January to May 2021. A line chart displays the gross profit trend, while circles represent individual data points, revealing patterns in sales performance. The visualization uses D3 version 7, loading data from a CSV file and rendering the chart as an SVG. The code leverages D3’s `csv` import function for data parsing and is styled with custom CSS for circles and line paths.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

LineChart

This line chart displays monthly gross profit across a date range, with data imported from a CSV file. The visualization uses D3 v7 to construct scales, axes, and a line generator, rendering the chart as inline SVG. The y-axis is labeled "Lucro bruto," and the chart includes a title and axis labels. The code applies `d3.scaleTime` and `d3.scaleLinear` for positioning, `d3.line` for the path, and `d3.axisLeft` and `d3.axisBottom` for ticks, with dates formatted using `d3.timeFormat`.

Ggabrielribeirob
77% match
Loading thumbnail…

Testando tooltips 2.0

A time-series line chart displays monthly gross profit from November 2020 to September 2021, based on Dib's database records. An animated gradient stroke transitions smoothly using D3's `transition` with `easeSin`, while hoverable circles reveal tooltips. Built with React, the visualization uses `scaleTime`, `scaleLinear`, and SVG paths, with data loaded via D3's `csv` parser from a GitHub repository.

Ggabrielribeirob
76% match
Loading thumbnail…

Line chart

This line chart visualizes yearly sales data using a time-series line graph. The SVG rendering uses D3.js v7 with `d3.csv` for data loading, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes, and `d3.line` to generate the path. Data comes from a remote CSV file accessed via a gist URL.

Rr79162810@gmail.com
76% match
Loading thumbnail…

Working with Time

This example shows monthly gross profit and units sold over time, with two line charts sharing a time axis. It uses D3 v5 and React, loading data from a CSV file via `d3.csv`. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while `line` draws the paths. The visualization compares two metrics across the same 2020–2021 period, with points and lines styled from the data.

Ggabrielribeirob
75% match
Loading thumbnail…

line chart using d3

This example uses D3.js v7 to create a line chart visualizing restaurant profit trends over recorded years. It loads CSV data from a GitHub gist and maps the year and profit columns to a linear x-axis and y-axis, rendering the line as an SVG path with a steelblue stroke. The chart includes axes labeled "Recorded Year" and "Profit In Million," plus an interactive tooltip that displays the data values on mouse movement. The SVG container is configured with custom margins, and the entire chart is styled with a black background and white text via CSS.

Bbhavana.bayyapu@gmail.com
74% match
Loading thumbnail…

test

This example shows weekly sales figures for Walmart over a 52-week period, with the line chart tracking sales trends against calendar weeks. The visualization uses D3 v5 to render an SVG, employing `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.line` to generate the path. Data is loaded as CSV from a GitHub gist, with sales values converted to numbers. The chart includes labeled axes, a title, and a styled stroke, while gridlines are created from tick sizes extending across the plotting area.

BBryanA999
74% match
Loading thumbnail…

Online Sales Line chart

This example shows online sales revenue over time as a line chart, with the x-axis representing years and the y-axis representing total revenue. It uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render the visualization in SVG. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to construct the chart, with gridlines styled via tick marks and a styled purple stroke for the data path.

MManideeprenikindi
73% match
Loading thumbnail…

ICE-7 Line Chart

This line chart displays annual sales for an e-commerce site from 2009 to 2019, with a blue line tracing the trend over time. Using D3 v5, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and constructs the visualization with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. The SVG includes gridlines from tick marks, axis labels, and a styled path, with sales values formatted using `format('.3s')`. The chart is rendered entirely in SVG with axes positioned inside a margin-defined area.

PPrasanth Damarla
73% match