Skip to main content
Log in
P

pillliarun79

@pillliarun79·7 public vizzes

Loading thumbnail…

GAV Performance : Age vs Mark vs Attendance

This scatter plot visualizes the relationship between student age, attendance, and marks across various GAV animation courses. Each circle’s x-position maps to age, y-position to mark, and radius to attendance, revealing patterns in student performance. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes and circles as SVG elements. Data comes from a CSV file loaded via D3’s `csv` method, with numeric values parsed for plotting.

May 23, 2020
Loading thumbnail…

GAV Performance : Age vs Mark vs Attendance

This scatter plot maps student age against mark and attendance for the GAV department, with each point representing an individual course record from the provided CSV data. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis (Age) and `scaleBand` for the y-axis (Mark), while attendance values are encoded but not directly shown in the current rendering. The chart displays axes via `axisLeft` and `axisBottom`, with rectangular bars sized by age and positioned by mark. Data preprocessing converts age, attendance, and mark strings to numbers before rendering.

May 23, 2020
Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between student age and exam marks across various university courses. Each point represents an average mark for a specific age group within a course, with the x-axis scaled linearly and the y-axis using a band scale for discrete age values. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the SVG chart, with margins and formatting applied to the axes. Data comes from a CSV file containing department, course, age, attendance, and marks columns.

May 23, 2020
Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between student age and exam marks across various university courses. Each point represents an average mark for a specific age group within a course, with the x-axis scaled linearly and the y-axis using a band scale for discrete age values. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the SVG chart, with margins and formatting applied to the axes. Data comes from a CSV file containing department, course, age, attendance, and marks columns.

May 23, 2020
Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

May 23, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays population estimates for the top 10 most populous countries from the 2018 United Nations World Population Prospects. It demonstrates customized D3 axes, using `d3.scaleLinear` and `d3.scaleBand` with `d3.axisBottom` and `d3.axisLeft`. Axis tick labels are formatted with `d3.format` (converting billions to "B"), grid lines are styled, and the left axis’s domain and tick lines are removed. The SVG rendering highlights red tick lines and custom axis label styling.

May 22, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal web page displaying the static text “Hello HTML” centered in the browser window, styled with a very large 13-em font size. It serves as a baseline for comparison with other starters, illustrating the simplest possible rendered output. The implementation uses plain HTML and CSS within a single `index.html` file, with no external libraries or JavaScript. The page's content and styling are defined directly in the document's `<style>` block, demonstrating a foundational structure for more complex visualizations.

May 21, 2020