Fork of LineChart

100%

Fork of LineChart

✓ Published0🌍 Public

Last edited Nov 8, 2021

Created on Nov 4, 2021

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes monthly sales data for 2022, plotting sales figures against months. The chart uses D3 v5 and renders as an SVG, with a purple line connecting data points. It employs `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded from a CSV file via `d3.csv`, with axis labels and a title styled through CSS. The visualization includes gridlines via the y-axis tick size.

84% match

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

84% match

Loading thumbnail…

Fork of Line Chart

This line chart visualizes sales figures by month, with data points marking each value along the trend line. The chart uses the D3.js library, specifically `d3.csv` to load the dataset, `d3.scalePoint` for the categorical month axis, and `d3.scaleLinear` for the sales axis. The visualization is rendered as an SVG, featuring a steelblue line and circles for data points, with labeled axes and a title. The code also demonstrates chained methods like `d3.select` and `d3.line` for constructing the graph.

445.saiful@gmail.com

83% match

Loading thumbnail…

Fork of Line chart

This line chart visualizes yearly sales data from a remote CSV file, mapping time on the x-axis and sales values on the y-axis. The code uses D3 v7’s `d3.csv` to load and parse data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` to generate a steelblue path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with custom formatting for years, and the SVG output is sized 800 by 400 pixels. The visualization demonstrates a clean, minimal line chart with labeled axes and no interactivity.

Mmadipadiga.raviteja@gmail.com

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

81% match

Loading thumbnail…

Fork of line chart

This example visualizes yearly total sales with a line chart, plotting date values against sales figures on Cartesian axes. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map the data domain, while d3.axisBottom and d3.axisLeft generate the tick marks and labels. Data loads from a CSV file at a GitHub gist URL, and the line path is drawn using d3.line. The visualization removes axis domain lines, adds axis labels, and styles the path with a black stroke.

Rrohinikotha

81% match

Loading thumbnail…

Fork of Line_Stroke_Death

This example shows a line chart of annual restaurant counts, plotting year against sales figures from a CSV dataset. The line uses a smooth basis curve, with orange styling and an 8-pixel stroke width. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis`. The data is loaded via `d3.csv` from a GitHub Gist, and the chart includes labeled axes and a title.

Mmaheganesh

81% match

Loading thumbnail…

Fork of Line Chart

This line chart displays monthly retail sales for 2023, with months on the x-axis and sales in USD thousands on the y-axis. The SVG renders a red line path using d3.line, with point and linear scales via d3.scalePoint and d3.scaleLinear. Axes are generated with d3.axisLeft and d3.axisBottom, and the data comes from a CSV file loaded through d3.csv. The chart includes labeled axes and a title, with grid lines created by custom tick sizing.

80% match