Skip to main content
SimilarExport ZIP
100%

Fork of Fork of making Scatter plottes

✓ Published0🌍 Public
SSteve_Nashon
Last edited Oct 7, 2022
Created on Oct 7, 2022

This fork of a scatter plot example visualizes harvested crop area per year from a small CSV dataset, drawing a smooth area chart rather than discrete points. The D3 v5 code sorts the data chronologically, then uses `scaleLinear` and `scaleTime` to map area and year values to SVG coordinates. It renders the area with `area()` and `curveBasis`, while grid lines and axis labels are generated via `axisLeft`, `axisRight`, and `axisBottom`. The SVG canvas is 960 by 500 pixels, with the area filled steelblue and black stroke, and the chart includes a title and axis labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of making Scatter plottes

This visualization shows the relationship between years and planted area, with each data point plotted as a steelblue circle. The y-axis scales the area values linearly, while the x-axis uses a point scale for years. Built with D3 v5, the code renders SVG circles, customizes axis ticks and grid lines, and includes axis labels for clarity. Data is loaded from a CSV file using `d3.csv`.

SSteve_Nashon
89% match
Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Rreddysushma994@gmail.com
83% match
Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Rreddysushma994@gmail.com
83% match
Loading thumbnail…

Fork of area chart

This example displays an area chart that visualizes yearly sales data from a CSV file. It uses D3.js to load and parse the data, then builds a chart with a steelblue filled area, axes, and labels for Year and Sales. The chart is rendered as an SVG element, with scales and an area generator created via `d3.scaleLinear` and `d3.area`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Mmadipadiga.raviteja@gmail.com
82% match
Loading thumbnail…

Fork of area chart

This fork of a D3.js area chart visualizes apple fruit yield from 2014 to 2024. The SVG chart uses a fixed y-scale from 25,000 to 35,000 and features a semi-transparent steelblue area. Data is loaded from an external CSV file via `d3.csv`, with the Apple row extracted by matching the fruit name. The visualization employs `d3.scalePoint` for the categorical year axis and `d3.scaleLinear` for the yield axis, while an `d3.area` generator constructs the path. Axis labels are added using standard D3 text elements, with rotated tick labels for readability.

Bbharathavulapati@gmail.com
82% match
Loading thumbnail…

Fork of area chart

This area chart visualizes a dataset loaded from a CSV file, showing the relationship between a numeric Year and Value. The chart is rendered as an SVG using D3 v7, with a linear x-scale for years and a y-scale for values. The code uses `d3.csv` to fetch data, `d3.scaleLinear` for axes, and `d3.area` to create the filled region. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Ssalim.mir@outlook.com
82% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart displays yearly sales data from an embedded sample dataset using D3 v6. It renders a steelblue area path with an SVG canvas, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with an `d3.area` generator. The chart includes labeled axes and axis ticks via `d3.axisBottom` and `d3.axisLeft`, with margins defining the plot area.

Nnishanththouta16@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com
80% match