deepakvowel@gmail.com

@deepak13092002·8 public vizzes

ice7_task3

This area chart visualizes the relationship between hours studied and exam scores from a `studentscores.csv` dataset. The blue area shape, with a monotone-x curve, shows a general upward trend where more study hours correspond to higher exam performance. The visualization is built with D3 v7, using `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.area` with `d3.curveMonotoneX` to render the smooth area. Data points are marked with dots, and a tooltip is implemented for interaction.

Oct 27, 2025

Loading thumbnail…

ice7_task2_2

This line chart visualizes the relationship between study hours and exam scores for a small dataset of students. The chart renders a smooth monotone curve through the data points, using blue dots to mark individual observations and a matching blue line to emphasize the overall trend. Built with D3.js v7, the visualization loads CSV data from a GitHub gist, applies linear scales with nice tick marks, and draws axes with labels. The tooltip functionality on hover is implemented but not fully connected in the visible code.

Oct 27, 2025

Loading thumbnail…

ice7_task2_1

A pie chart displays the distribution of student grades from a CSV file, showing how many students received each grade. The D3 v7 code uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG paths for each slice. Labels are positioned using a second arc generator, and a separate legend is built alongside the chart, with colors assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`.

Oct 27, 2025

Loading thumbnail…

ice7_task1

This example presents two interactive scatter plots comparing student performance metrics: hours studied versus exam score, and sleep hours versus exam score. Using D3 v7, the visualization displays data points as circles with tooltips showing details on hover. The code implements a reusable `ScatterPlot` function that builds SVG charts with linear scales, axes, and axis labels, while reading data from `studentscores.csv`. Dark tooltips with rounded corners provide additional context for each data point.

Oct 27, 2025

Loading thumbnail…

Ice-6 of Deepak Reddy Punuru (BAR GRAPH)

This bar chart shows the number of scientists by country, using a dataset that lists each scientist's field and major discovery. The chart is built with D3 v7 and rendered as an SVG. It uses `d3.rollups` to count occurrences per country, then `scaleBand` and `scaleLinear` to map the data to bar positions and heights. The visualization includes labeled axes, a title, and a legend, and is centered on a light blue background with a custom margin and styling.

Oct 20, 2025

Loading thumbnail…

Ice-6 of Deepak Reddy Punuru (Scatter Plot)

This scatter plot shows the relationship between math and science scores for five students, with each point colored tomato red and positioned according to its two academic metrics. The chart renders as an SVG centered on a light teal background, using D3 v7’s scaleLinear for axes and d3.axisBottom/axisLeft to draw the coordinate grid. Data is loaded from a local CSV file (studentscores.csv) and parsed with d3.csv, then bound to circle elements via data joins. Axes and labels use green and dark gray fills, while a small legend identifies the single series.

Oct 20, 2025

Loading thumbnail…

Ice-6 of Deepak Reddy Punuru ( Multi-Series Chart )

This multi-series chart compares student performance across three subjects: Math (shown as green bars), Science (orange line), and English (blue line). The D3.js visualization loads data from a CSV file and uses the `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. It renders bars with `svg.append('rect')` and lines using `d3.line()` paths, within an SVG canvas. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while a legend and labels clarify the series.

Oct 20, 2025

Loading thumbnail…

Ice-6 of Deepak Reddy Punuru

This example displays the static text “Hello VizHub” in large, centered type. It uses D3 v6 to select the `#message` div and set its text content from a local ES6 module. The page is styled with CSS, setting the font size and alignment. The visualization demonstrates a minimal setup for combining an HTML template, external stylesheet, and JavaScript module within a D3-based project.

Oct 19, 2025