Skip to main content
SimilarExport ZIP
100%

FP: Line Chart

✓ Published2🌍 Public
JJingxuan Yang
Last edited Apr 17, 2024
Created on Apr 17, 2024

This line chart displays the average sale price of items per year. The chart uses a white plotting area with black axes and a black line connecting data points. Built with D3.js, the visualization aggregates data by year using `rollup` and `mean`, then renders the series with `line`. It leverages the `@drbagwell/responsive-viz-axes` library for the axes and includes labeled x and y axes. Data points are marked with semi-transparent circles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

line

A line chart displays the average sale price of items by year, with each point connected to show trends over time. The visualization uses D3's `scaleTime`, `scaleLinear`, and `line` generators to map data, while the `rollup` and `mean` functions aggregate the source dataset by year. It renders an SVG with axis labels, a white inner rectangle, and black line segments.

Aanushapodapati99@gmail.com
82% 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
73% match
Loading thumbnail…

vehicles Line Chart

This line chart shows the average price of vehicles across different years, highlighting overall price trends over time. The visualization uses a blue monotone curve with circular markers for each year's data point, and hovering over a point reveals the exact year and average price in a tooltip. Built with D3.js (v7.8.5), it loads CSV data from a GitHub gist, groups and aggregates entries by year using `d3.rollup` and `d3.mean`, and renders the result as an SVG with axes using `d3.axisBottom` and `d3.axisLeft`. Grid lines and formatted y-axis labels (in thousands) help contextualize the price values.

Ssaisathwikaguntupalli@gmail.com
72% match
Loading thumbnail…

Online Sales for Purchases Line chart

This example shows a line chart of online sales purchases over time, plotting the number of purchases against the year. The visualization uses a D3 v5 SVG render, with a time-scaled X-axis and a linear Y-axis. It loads CSV data from a GitHub gist, parsing the year with `d3.timeParse` and scaling the line with `d3.line`. Styled with a purple stroke and custom tick formatting, the chart includes axis labels for "Year" and "N_Purchases," with gridlines. The code demonstrates modular D3 imports and axis construction.

MManideeprenikindi
71% match
Loading thumbnail…

Line Chart

This line chart visualizes annual sales data, displaying the trend of sales values over time on a red path. The SVG chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the axes and line generator. It parses dates with `d3.timeParse` and loads data from an external CSV file. Grid lines are styled through tick marks, with blue tick labels and a rotated Y-axis label for clarity.

KKiran3295
71% match
Loading thumbnail…

Fork of Line Chart

This visualization shows a line chart of annual sales data, with the x-axis representing time in years and the y-axis representing sales figures. The chart includes labeled axes with gridlines and the line itself rendered in red. Built with React and D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the visualization from CSV data. The SVG rendering approach separates React integration concerns from D3’s data joins, following a starter pattern for scalable complexity.

VVenkata Sai Preetham
71% match
Loading thumbnail…

Line Chart

This line chart displays sales figures across the months of January through August, with data points marked by red circles and connected by a green line. The visualization uses D3 v7 APIs including `d3.csv` to load data from a CSV file, `d3.scalePoint` for the categorical month axis, `d3.scaleLinear` for the sales axis, and `d3.line` to generate the path. The chart also includes axis labels and a title within an SVG canvas, using `d3.axisBottom` and `d3.axisLeft` for tick marks.

Ppvvaishnavi93@gmail.com
71% match
Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with yearly values plotted as a thick light-green line. The chart uses an SVG rendering with D3 v7, employing `d3.scaleBand` for the categorical year axis and `d3.scaleLinear` for the cost axis. Data is loaded from a local CSV file via `d3.csv`, and the line path is generated with the `d3.line` API, with red axis labels and tick styling defined in embedded CSS.

Aanith462@gmail.com
71% match