Skip to main content
SimilarExport ZIP
100%

ProjectGraph

✓ Published1🌍 Public
Uuzairnaeem15@gmail.com
Last edited Jun 13, 2024
Created on Apr 26, 2024

This example shows a line chart of monthly discount amounts aggregated from a CSV file containing daily transaction data. The original data, which includes multiple entries per day, is grouped by month and summed to produce the visualization. Built with Chart.js and rendered on a Canvas element, the chart features a single red line with transparent fill, a legend, tooltips, and zoom/pan controls enabled via the chartjs-plugin-zoom library. The visualization highlights monthly spending patterns, with notable peaks and dips in discount values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Project Graph # 3

This chart uses an area mark with a monotone interpolation to display total billing amounts over the course of a year, with distinct areas for each year overlaid at partial opacity. The data is loaded from a remote CSV via D3’s `csv` function, filtered to exclude zero and large billing amounts, and aggregated by month and year. The visualization is built with the Vega-Lite API, encoding the month on the x-axis, total billing amount on the y-axis, and year as a color grouping, while enabling tooltips to inspect specific values.

Uuzairnaeem15@gmail.com
77% match
Loading thumbnail…

Project Graph #2

This scatter plot visualizes the relationship between billing amount and original charge for active student billing records, with point color encoding the program type and point size encoding the discount amount. The visualization filters the source dataset from a CSV file to exclude refunded or inactive records and caps billing amounts at 3000. Using the Vega-Lite API with D3.js, the chart employs circular marks with a fixed size of 200 units, opacity set to 1, and includes an interactive tooltip displaying multiple data fields such as discount type, charge category, and date. The visualization adapts to the browser window dimensions and applies custom styling for improved readability.

Uuzairnaeem15@gmail.com
73% match
Loading thumbnail…

line chart

This line chart visualizes monthly customer spending across twelve months, with values rising from $200 in January to $550 in December. It uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the monthly x-axis and `d3.scaleLinear` for the spending y-axis. The chart draws a monotone curve line via `d3.line()` with `curveMonotoneX`, marks each data point with circles, and labels the axes "Month" and "Spending ($)" using `d3.axisBottom` and `d3.axisLeft`. The sample dataset is defined explicitly in `index.js` and passed to a global `renderLineChart` function.

Ssrinathkarumuru@my.unt.edu
69% match
Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart that plots monthly values from a JSON dataset, with circular markers at each data point along the path. The chart uses an ordinal x-scale and a linear y-scale to position the points, while a monospace font labels each month below the axis. Hovering over a circle triggers a mouseover event that turns the point red, draws a dashed vertical guide line, and reveals the numeric value as a green tooltip; moving the mouse away removes these temporary elements. The visualization is built with D3 v3, rendering SVG elements like paths, circles, and text, and loads its data from a local `dataset.json` file.

MMohamedZaki
68% match
Loading thumbnail…

simple line chart from dataset

A simple line chart displays monthly values from a small JSON dataset, plotting each data point as a grey circle. Hovering over a circle turns it red, enlarges it, reveals its numeric value above, and draws a dashed vertical line down to the x-axis. The visualization uses D3 v3 with SVG, employing an ordinal scale for x-positions, a linear scale for y-values, and mouseover/mouseout event handlers to animate the transitions.

AAlexdef74307
66% 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
66% match
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a small dataset, with points labeled by month and the most recent value highlighted numerically. The chart is built with D3 v3, using an ordinal x-scale for the named data points and a linear y-scale for values, rendered as an SVG path, circles, and text. Hovering a circle turns it red, enlarges it, shows the value directly, and draws a dashed guide line; moving the mouse away reverts these changes and removes the temporary elements. The data is loaded from a JSON file via `d3.json`.

NNaram22
66% match
Loading thumbnail…

Fork of HTML Starter

This multi-line chart tracks monthly spending across three categories—food, transport, and entertainment—using a CSV dataset. Rendered as SVG paths and circles, it employs the reusable `multiLineChart()` function with D3's `scalePoint`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding. Axis labels, a bold title, and an interactive legend clarify the trends. The chart is built with D3 v7, loading data via `d3.csv` and appending SVG elements.

YYamini Malikireddy
66% match