Skip to main content
SimilarExport ZIP
100%

Fork of Area chart - Prathima

✓ Published0🌍 Public
Ppilliprathimarani@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024

This example shows the sales volumes of various coffee products as a filled area chart, with green borders and pink fill, using data fetched from a raw gist URL and parsed manually by splitting CSV rows. It uses Chart.js to render the line chart on a canvas element, configuring the legend, title, and axis labels. The chart reads coffee names and numeric sales volumes from the dataset, and applies responsive options to display the visualization with a top legend and descriptive axis titles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart - Prathima

This line chart displays the sales volume for each coffee item, using a red line to connect data points across categorical labels on the x-axis. The visualization fetches a CSV dataset from a GitHub gist, parses the rows to extract item names and sales values, and renders the chart with the Chart.js library on an HTML canvas. The chart includes a title, axis labels, and a legend positioned at the top, configured through Chart.js options for the line plot.

Ppilliprathimarani@my.unt.edu
86% match
Loading thumbnail…

Fork of ICE-6-Prathima -coffee

This bar chart visualizes sales volumes for different coffee menu items, displaying each beverage name along the x-axis and its corresponding sales quantity on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values. Bars are rendered as SVG rectangles with a steelblue fill, and axes include rotated labels using `d3.axisBottom` and `d3.axisLeft`.

Kkotlavamsireddy@gmail.com
76% match
Loading thumbnail…

fork of pie chart-prathima

This pie chart visualizes sales volume by item, with each slice representing a product and its corresponding unit count. The chart uses the Chart.js library in a canvas element to render the visualization, pulling data from a remote Gist-hosted CSV file. Each item is assigned a random color, while the legend displays the item name alongside its sales volume in units. The chart includes a title, a right-positioned legend, and custom tooltips that show the item name and unit count on hover.

Ppilliprathimarani@my.unt.edu
76% match
Loading thumbnail…

Fork of area

This visualization displays car sales data over time as a filled area chart, with time on the x-axis and sales volume on the y-axis, rendered as an SVG. It uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.area with curveBasis to create the smooth, orange shaded region. Data is loaded from a CSV file via d3.csv and parsed with d3.timeParse, with formatted tick labels using d3.format. The chart includes styled gridlines, axis labels, and a title, all styled via external CSS.

CCherukuriMilind
76% match
Loading thumbnail…

Fork of Fork of Area Chart

This visualization displays ten years of car sales data as a combination of a line chart and an area chart. The line traces the trend in sales over time, while the shaded area beneath it emphasizes the cumulative magnitude. The chart uses a black stroke for the line and a black fill for the area, with red axis labels and a bold title. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the SVG using `d3.line`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The visualization is built with d3.v5 and uses the `curveBasis` interpolation for smooth curves.

PPrathyusha0304
75% 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
75% match
Loading thumbnail…

Fork of Area Chart

This visualization shows electronic sales from 2013 to 2021 using both a filled area chart and an overlaid line chart to emphasize the trend. It uses d3.csv to load data from a GitHub Gist, then renders SVG paths via d3.line and d3.area with the curveBasis interpolation. Axes are built with d3.axisBottom and d3.axisLeft, while scales employ d3.scaleTime and d3.scaleLinear, with the area fill colored green and the line stroke in black.

Rrohinikotha
74% 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
74% match