Skip to main content
SimilarExport ZIP
100%

LineChart

✓ Published5🌍 Public
Ggabrielribeirob
Last edited Nov 23, 2021
Created on Sep 2, 2021
Forked from Temperature in SF

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`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of LineChart

This example shows gross profit per month from a CSV dataset, plotting each month’s value as a smoothed line over a time-based x-axis. The chart uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `axisLeft`/`axisBottom` for labeled ticks. The code also includes a rotated y-axis label and a title, with margins defined for layout.

Ggabrielribeirob
84% 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
78% match
Loading thumbnail…

Teste

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.

Ggabrielribeirob
77% 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
77% match
Loading thumbnail…

Line Chart

This line chart displays the profits of a company from 1955 to 2021, with the x-axis representing the year and the y-axis showing profit values. The visualization uses d3.scaleTime and d3.scaleLinear axes, with grid lines and axis labels styled via CSS. The line path is generated using d3.line and rendered as an SVG path with a blue stroke. Data is loaded from a CSV file hosted on GitHub Gist, parsed to convert the year into a Date object and profits into numbers, before being passed to the rendering function.

TTejaswi@3271
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…

Line Time 2

The chart displays a stepped line tracing a time series of monthly values from a CSV file, with data points highlighted by large circles. The visualization renders to an SVG element, using D3 v7’s `scalePoint`, `scaleLinear`, `line`, and `curveStep` APIs to construct the path, alongside `axisBottom` and `axisLeft` for the axes. Data is loaded via `csv`, sorted by date, and mapped onto the scales with a 0.5 padding factor. A title text element sits above the plotting area.

Ddiegobrivo
75% match
Loading thumbnail…

Fork of Line Chart

This line chart displays company profits from 1947 to 2022, with years on the x-axis and profit values on the y-axis. It uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render a blue polyline with gridlines and labeled axes. The data is loaded from a CSV via `d3.csv`, parsed into numeric and date formats, and drawn as an SVG with a red underlined title. The chart’s axes include rotated labels for readability, and the line path is styled with a 4-pixel stroke.

Bblikitha
75% match