Skip to main content
SimilarExport ZIP
100%

Line Chart FOR TIME AND MARKS

✓ Published0🌍 Public
Aakhilgupta11
Last edited Mar 11, 2023
Created on Mar 11, 2023
Forked from HTML Starter

This visualization displays a line chart tracking GPA against time spent studying, with hours on the x-axis and GPA (out of 5) on the y-axis. The chart uses d3.scaleTime for the temporal axis, d3.scaleLinear for the GPA axis, and d3.line to generate the path. Data is loaded via d3.csv from an external gist, parsed with d3.timeParse, and rendered as an SVG with gridlines, axis labels, and a green line. The code also leverages d3.axisBottom and d3.axisLeft for tick marks.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Chart Area for ICE 7

This example visualizes student GPA versus time spent studying, using a smooth area chart with a red line and blue fill to emphasize the trend in the data. The visualization is built with React and D3 v5, employing `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smooth paths, and SVG rendering. Axis labels are styled via CSS, and the data is loaded from an external CSV using `csv`, then parsed for GPA values.

Aakhilgupta11
79% match
Loading thumbnail…

Line Chart

This line chart visualizes student growth rates from 1980 to 2005, with years on the x-axis and growth rate on the y-axis. The chart uses d3.csv to load external data, then d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.extent and d3.max for path generation. Rendered as SVG, the chart includes axis labels and a title, with the line path styled in red via CSS.

SSravaniPosina
78% match
Loading thumbnail…

Assignment

This scatter plot visualizes the relationship between students’ study hours per week and their GPA, with each circle representing a single student. The x-axis shows study hours, the y-axis shows GPA, and hover effects increase circle opacity and radius. The visualization loads CSV data from a GitHub Gist, uses d3.csv for parsing, and positions marks with d3.scaleLinear and d3.axisBottom/axisLeft. Grid lines are generated using a modified axis with tickSize, while circle color and size are fixed channels. The chart is rendered as SVG with D3 v7.

HHarshithaAru06
78% match
Loading thumbnail…

Line Chart

This line chart displays student growth rate from 1980 to 2005, plotting year on the x-axis and per capita mobile usage on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to create the SVG path, with gridlines from tick size and rotated axis labels. Data is loaded via `csv()` from a GitHub gist, and the chart includes a title and styled axes using CSS classes.

DDineshK2602
77% match
Loading thumbnail…

Simple Line Chart

This visualization displays a simple line chart mapping student marks (x-axis) against the number of students achieving those marks (y-axis), with axis labels clarifying the relationship. The chart is rendered as an SVG element using D3 v7 within a React-adjacent HTML page. The code uses `d3.scaleLinear` to map data coordinates to pixel positions, `d3.line()` to generate the path, and the `axisLeft` and `axisBottom` functions from D3 to draw labeled axes. Data is provided as a static array of x/y pairs, and the line itself is stroked in orange with no fill.

Ss-pranathi
76% match
Loading thumbnail…

ACT6_TUT3_TASK1

This scatterplot explores the relationship between daily study hours and GPA for students across three academic tracks (CS, Data, AI). The visualization uses colored symbols—circles, squares, and triangles—to distinguish tracks, with tooltips revealing individual student details. Built with D3 v7, the chart employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color and shape encoding, and `d3.symbol` to generate the point markers. The data comes from a local CSV file, rendered as SVG with custom axes, title, and a legend.

RRevanth putta
76% match
Loading thumbnail…

Activity6_Question3

A scatter plot shows the relationship between study hours per day and GPA for 30 students, with points shaped and colored by academic track (CS, Data, or AI). The code uses D3 v7’s `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to render SVG paths with circles, triangles, and diamonds. Axes include grid lines, and a custom legend maps each track to its shape and color. Data is loaded via `d3.csv` from a remote gist.

Mmohanalaharic@gmail.com
75% match
Loading thumbnail…

ICE-6 Creating Marks And Channels

This bar chart visualizes the relationship between time invested in studying and marks scored for 15 students, using a horizontal bar layout. The chart maps time spent studying to the y-axis against a blue horizontal rectangle for each student, whose width encodes the marks obtained. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.max` to determine the scale domain. The SVG rendering includes custom axis lines and labels, with data sourced from a CSV file.

Aakhilgupta11
75% match