Skip to main content
SimilarExport ZIP
100%

Prosty wykres liniowy

✓ Published1🌍 Public
Jjwr2023
Last edited Nov 3, 2023
Created on Nov 3, 2023
Forked from AI1.02.11

This example demonstrates a simple line chart plotting five data points with x-values from 0 to 4 and corresponding y-values. The visualization uses D3 version 6 to create an SVG rendering, featuring a steelblue line with axes labeled on the left and bottom. The code constructs the chart by applying `d3.scaleLinear` for both x and y axes, using `d3.extent` and `d3.max` to determine domains, and generates the line via `d3.line`. Axis labels are added with text elements, and the y-axis is rotated to display "Wartość".

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dot & Line Chart Method

This example demonstrates a dot and line chart that plots five data points with varying radii, connecting them with a blue line while rendering each point as a red-stroked white circle. The chart includes linear scales for x and y axes, with axis labels generated via `axisLeft` and `axisBottom`. Built with D3 v7, the visualization uses `scaleLinear`, `extent`, `line`, and `select` to map data values to screen coordinates, drawing SVG paths and circles at full window dimensions. The data is hardcoded as an array of objects with `xVal`, `yVal`, and `rVal` properties.

Fferneyhoughedward@gmail.com
74% match
Loading thumbnail…

Simple line graph in d3.js

This simple line graph visualizes a small dataset of numeric date-value pairs loaded from a CSV file. It shows a single steel-blue polyline plotted against linear x and y axes, with five ticks per axis. The example uses d3.js v3 to parse the CSV, apply linear scales, and render the chart as SVG. It defines axes with d3.svg.axis and constructs the line path with d3.svg.line, demonstrating core D3 data-binding and scaling techniques for teaching purposes. The graph focuses on the essential structure of a D3 chart without additional interactivity or annotations.

MMNoichl
74% match
Loading thumbnail…

Wykres Słupkowy

This example presents a bar chart depicting product sales across five categories, labeled as Kategoria A through E. The chart renders sales values as steelblue bars within an SVG container, with axes and value labels. The visualization uses D3 version 7, applying the `d3.scaleBand` and `d3.scaleLinear` for axis mapping, and `d3.axisBottom` and `d3.axisLeft` for rendering the axes. Data is hardcoded in the script and displayed using D3's selection and `.enter()` methods.

Jjwr2023
74% match
Loading thumbnail…

D3 v4 Line Chart

This example shows a basic line chart built with D3 v4, plotting a randomly generated dataset of 21 points against a linear x-axis and y-axis. The visualization uses an SVG canvas and follows the standard margin convention, with the line rendered via the `d3.line()` generator and a `curveMonotoneX` smoothing curve. Axis components are created using `d3.axisBottom` and `d3.axisLeft`, while circles representing each datapoint are appended using the `enter().append()` method. The chart demonstrates core D3 data-binding and scale APIs within a minimal, self-contained HTML file.

663anp3ca
72% match
Loading thumbnail…

Line Chart Method

This example demonstrates how to build a basic line chart using D3 v7. It plots a small dataset of five points with varying radii, rendering a single steelblue path using the `d3.line()` generator alongside axes created with `d3.axisLeft()` and `d3.axisBottom()`. The scales are defined with `d3.scaleLinear()` and `d3.extent()` to map data coordinates to the full browser viewport. Circle radii from the data are divided by 2.5 and stored in marks but are not rendered. The SVG output fills the entire window.

Fferneyhoughedward@gmail.com
72% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
72% match
Loading thumbnail…

simple line chart without dataset

This example shows a simple line chart that uses vertical bars to represent a static dataset of ten numeric values, with the values labeled above each bar. The visualization is rendered as an SVG inside an HTML page, using D3.js v4 to bind the data array to rectangle elements and scale the bar heights proportionally to the maximum value in the dataset. The code defines linear scales for the x- and y-axes, then appends the bars and text labels to a translated group element, with a fixed width for each bar derived from the data length.

EEnzoTheBrown
71% match
Loading thumbnail…

Basic Chart, simple dataset

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

NNoWizards
71% match