prince.sahith100@gmail.com

Fork of assignment-2 question 2

This example displays an area chart of Age versus BloodPressure levels, using a steel-blue fill to emphasize the distribution of pressure values across the age range. The visualization is built with D3 v7, leveraging `d3.csv` to load a remote dataset, `d3.scaleLinear` for both axes, and `d3.area` to generate the area path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, with labels appended directly to the axis groups. The SVG output is styled with CSS and rendered within an 800 by 400 pixel container, sourced from a Gist-hosted CSV file.

Fork of assignment-2 question 2

This example displays an area chart of Age versus BloodPressure levels, using a steel-blue fill to emphasize the distribution of pressure values across the age range. The visualization is built with D3 v7, leveraging `d3.csv` to load a remote dataset, `d3.scaleLinear` for both axes, and `d3.area` to generate the area path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, with labels appended directly to the axis groups. The SVG output is styled with CSS and rendered within an 800 by 400 pixel container, sourced from a Gist-hosted CSV file.

Fork of assignment-2 question 2

This area chart visualizes the relationship between age and glucose levels from a CSV dataset loaded via `d3.csv`. It displays the data as a filled area with a steelblue color and 60% opacity, using D3 v7’s `d3.area` generator and linear scales for both axes. The chart includes labeled X and Y axes for Age and Glucose, rendered as an SVG with margins. The `d3.axisBottom` and `d3.axisLeft` functions create the tick marks, while the area path is appended to a grouped SVG element.

Fork of Fork of assigment-2 D3

This visualization displays the distribution of hypertension risk as a two-category pie chart. It distinguishes between individuals with no hypertension risk (labeled 0, shown in orange) and those with hypertension risk (labeled 1, shown in green), with counts displayed directly on the slices. The chart fetches its data from a CSV file hosted on GitHub using `d3.csv`. The code builds the pie with `d3.pie` and `d3.arc`, applies a categorical color scale via `d3.scaleOrdinal`, and includes a legend rendered next to the chart using HTML.

Fork of assigment-2 D3

This example shows the distribution of hypertension risk in a dataset, displayed as a pie chart with two categories: no risk (0) and risk (1). The chart uses D3.js v6 with an SVG rendering approach, loading CSV data from a GitHub gist. It employs d3.pie() and d3.arc() to generate the chart slices, with labels showing category names and counts. A color scale assigns distinct colors to each category, and a legend is generated dynamically from the same data.

Fork of Fork of assigment-2 D3

This visualization displays the distribution of hypertension risk as a two-category pie chart. It distinguishes between individuals with no hypertension risk (labeled 0, shown in orange) and those with hypertension risk (labeled 1, shown in green), with counts displayed directly on the slices. The chart fetches its data from a CSV file hosted on GitHub using `d3.csv`. The code builds the pie with `d3.pie` and `d3.arc`, applies a categorical color scale via `d3.scaleOrdinal`, and includes a legend rendered next to the chart using HTML.

Fork of assigment-2 D3

This D3 pie chart visualizes the distribution of diabetes outcomes from a CSV dataset, showing the count of patients with (1) and without (0) diabetes. The chart uses `d3.pie()` and `d3.arc()` to render slices, with labels positioned via `arc.centroid`. A color scale (`d3.scaleOrdinal`) assigns light blue and red fills. A legend, built with HTML `div` elements, displays each category alongside its frequency. The visualization is rendered as SVG and directly labels each slice with its outcome and count.

Fork of iris-area-chart

This pie chart visualizes the market share of programming languages using D3.js v6. The visualization renders a segmented circular chart where each slice represents a language's proportional share, with distinct colors for each category. The code uses `d3.arc` and `d3.pie` to compute slice geometries, `d3.select` for DOM manipulation, and `d3.attr` to apply styling. The chart is generated entirely from a hardcoded dataset within the JavaScript file, with the rendering driven by D3's SVG path generation for each pie segment.

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows an interactive-free scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis, with points colored by species using a d3.scaleOrdinal. It loads CSV data via d3.csv, then builds a reusable visualization through a custom scatterPlot function that appends an SVG, applies linear scales (d3.scaleLinear), and draws axes with d3.axisBottom and d3.axisLeft. The plot includes labeled axes and three color categories for the flower species.

Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each circle is colored by species using a `d3.scaleOrdinal` with lightblue, lightgreen, and orange ranges. The visualization loads CSV data from a GitHub gist, converts relevant columns to numbers, and uses `d3.axisBottom` and `d3.axisLeft` for axes with custom labels. It is built as a reusable function that appends an SVG with fixed dimensions and margins, rendering all points as circles with a radius of 5 pixels.

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset with a D3.js scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each species—setosa, versicolor, and virginica—appears in a distinct color via a d3.scaleOrdinal color scale. The code loads CSV data with d3.csv, scales the axes using d3.scaleLinear, and renders circles in an SVG container with d3.axisBottom and d3.axisLeft for labeled axes.

Activity

Activity

This example displays a simple text message, “Hello VizHub!”, centered on the page. It demonstrates a minimal D3.js setup where the `select` function from D3 is used to target a div with the ID `message` and set its text content from an imported ES6 module. The styling is handled through an external CSS file, which centers the text and enlarges it to 12em. The code uses D3 v6, imported via a CDN, and ES6 module imports for the message string.