Project Graph #2

100%

Project Graph #2

✓ Published1🌍 Public

Last edited Apr 27, 2024

Created on Apr 26, 2024

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.

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

82% match

Loading thumbnail…

Fork of Task9_Q1

This interactive area chart visualizes total billing amounts by month, segmented by year, based on a student information dataset. The visualization uses Vega-Lite API to render smooth, semi-transparent areas with white borders for each year, allowing comparison of spending patterns over time. The code filters the CSV data to include only active statuses with billing amounts between zero and 3000, while converting negative discount values to positive. A tooltip displays month names, billing totals, and years, with the visualization resizing to fit the browser window.

SSamir Tarda

78% match

Loading thumbnail…

Activity6_Task2

This chart is a stacked horizontal bar chart showing the percentage of fee payments across four terms and a final payment for individual students. Each bar segment represents a fee category, with its length proportional to the percentage paid. The visualization uses the D3.js v7 library with `d3.axisLeft`, `d3.axisBottom`, and `d3.stack` to construct the chart. The data comes from a static CSV file containing fee payment percentages for each student. Interactive tooltips display the exact percentage for each segment when hovered, and the chart includes a legend and axis labels.

Sshanmukhivasa@my.unt.edu

73% match

Loading thumbnail…

ProjectGraph

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.

Uuzairnaeem15@gmail.com

73% match

Loading thumbnail…

Act_6_Q_2.3

A stacked bar chart displays the percentage of total fee payments made by students across five installments, with each bar representing a student and colored segments showing the proportion paid at each term. Hovering over a segment highlights it and displays a tooltip with the exact percentage for that term. The visualization uses d3.v7 with SVG rendering, employing d3.stack() to process the CSV data and d3.scaleBand and d3.scaleLinear for axes, while d3.scaleOrdinal assigns categorical colors to the payment terms.

Ssairam.amaraneni22@gmail.com

71% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of student data, plotting marks against time spent studying, with color and size encoding the number of courses and an integer attribute, respectively. The tooltip reveals each student’s name. Built with Vega-Lite API and D3, it loads CSV data from the UCI Auto MPG dataset, renders an SVG via Vega, and customizes axes and label styling through a config object.

NNaimisha-M

69% match

Loading thumbnail…

STarda - Activity 9 - Question 1

This example shows a pie chart displaying program contributions to tuition revenue, with dollar amounts abbreviated in thousands and a color-coded legend identifying each program. The visualization is built with D3 v6, using `d3.csv()` to load billing data from a remote GitHub CSV file, `d3.group()` and `d3.sum()` to aggregate billing by program, and `d3.pie()` with `d3.arc()` to generate the arcs. Labels are positioned at arc centroids, and the SVG output includes a bold title and formatted text elements for clarity.

SSamir Tarda

69% match

Loading thumbnail…

Projec2

This example shows how student depression levels relate to their grades using a bar chart and a pie chart. The bar chart visualizes each student's depression level with color-coded bars, while the pie chart displays the distribution of depression levels across the dataset. Both charts use D3 v7's `d3.csv` to load data, `scaleBand` and `scaleLinear` for axes, and `d3.pie` and `d3.arc` for the pie slices. Interactive tooltips appear on hover, and the bar chart uses an event-driven `transition` for the tooltip's opacity changes.

Vvyjayanthimamidipalli@gmail.com

69% match