Skip to main content
SimilarExport ZIP
100%

Fork of Area Chart

✓ Published0🌍 Public
Nneeharika2023@gmail.com
Last edited Mar 27, 2024
Created on Mar 27, 2024
Forked from Script Test

This fork of an area chart visualizes the opening prices of houses over time, with months on the x-axis and price on the y-axis. The visualization combines a smooth line and a semi-transparent red filled area beneath it, using D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis`. Rendered as an SVG within a React app, it loads CSV data from a remote gist. Axis labels and tick formatting are customized via `axisBottom` and `axisLeft`, with distinct styling for ticks and labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart

This example shows the opening price of houses over time as a smooth, curved line chart. The visualization uses D3.js version 7 within a React component to fetch and process CSV data, scaling time on the x-axis and price on the y-axis. The line is rendered using the `d3.line` generator with `curveBasis` for smooth interpolation, while axes are manually drawn with `scaleTime` and `scaleLinear`. The chart includes labeled axes for "Months" and "Opening price," with styled tick marks and a title, all rendered as SVG elements.

Nneeharika2023@gmail.com
86% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes sales data from 1988 to 2006, combining a smooth line and a brown filled area beneath it to emphasize trends over time. The axes display year and sales values, formatted with `d3.format`. The code uses D3 v5 APIs including `csv` for data loading, `scaleTime` and `scaleLinear` for scales, and `line` alongside `area` generators with `curveBasis` for smoothing. The SVG output is styled with CSS, featuring a yellow background and labeled axes.

Rrohinikotha
84% match
Loading thumbnail…

Fork of Area Chart

This example displays an area chart of two ordered numeric variables over time, using a gradient-filled path to show the amount across dates. It loads data from a CSV via `d3.csv`, parses dates with `d3.timeParse`, and maps values using `d3.scaleTime` and `d3.scaleLinear`. The SVG is built with `d3.area` and `d3.axisBottom`/`d3.axisLeft`, while the React-based page styles the title via CSS. The chart renders in a fixed-size SVG with margins and labels for both axes.

Bbugfree55
84% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes trades from 1950 to 2005, with sales values plotted over time using a smooth curve. The rendering uses SVG, with D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate a brown stroke line and pink filled region. Axis labels are formatted with `d3.format`, and the data is parsed from a CSV file hosted on GitHub, with dates converted via `d3.timeParse`. The chart includes custom styles for the tick text, axis labels, and the colored line and area paths.

Kkalyanikotha
84% match
Loading thumbnail…

Fork of Area Chart

This is a fork of an area chart that visualizes electronic sales from 2013 to 2021. The chart combines a black line and a green filled area beneath it, with both rendered as SVG paths using D3 v5’s `line` and `area` generators with `curveBasis`. The x-axis maps years parsed via `d3.timeParse`, while the y-axis shows sales values formatted with `.3s`. Axes are created with `axisBottom` and `axisLeft`, and scales use `scaleTime` and `scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Rrohinikotha
82% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes electronic sales from 2013 to 2021 using D3 v5 with SVG rendering. The view combines a smooth green area path with a black line overlay, both generated via d3.area and d3.line with curveBasis, while scaleTime and scaleLinear map the Year and Sales data. Axes are drawn with axisBottom and axisLeft, and the CSV data is loaded asynchronously from a GitHub gist.

RRahulSai05
82% match
Loading thumbnail…

Fork of Area Chart

This chart displays electronic sales from 2013 to 2021, combining a smooth line and a filled area to emphasize the sales trend over time. The visualization uses a time-scaled x-axis for sales dates and a linear y-axis for year values. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators with a basis curve. The SVG rendering includes styled grid ticks and axis labels, with data loaded from a remote CSV file.

RRahulSai05
82% match
Loading thumbnail…

Fork of Area Chart

The chart shows 15 years of car sales using a combined line and area chart. A black line traces sales over time, while a grey filled area beneath it emphasizes the trend, with axes labeled "Sales" and "Year." It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` for smoothing. The SVG rendering loads CSV data from a remote gist, parses dates, and formats the y-axis tick labels with `format('.3s')`.

Ssudhamshu24
81% match