kshravyak.2001@gmail.com

Freelancer_Pie Chart

This visualization displays a pie chart of total freelancer earnings aggregated by experience level. The data is loaded from a CSV file via a `fetch` request, and the chart is rendered using the Chart.js library on a Canvas element. Users select a sleep quality category, which filters the displayed earnings data. A custom legend is generated alongside the chart, using the same background color palette, to identify each experience level. The chart presents earnings in USD for each experience category.

Area_Chart

This area chart visualizes total earnings by payment method for freelancers, using a gradient-filled path with a "mountain" effect to highlight differences across categories. The visualization aggregates earnings from a CSV dataset and sorts them in descending order, with value labels placed above each data point. Built with D3 v7, the chart uses `d3.area()` with `d3.curveMonotoneX`, `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for the legend colors.

Fork of Pie Chart

This fork of a pie chart visualizes freelancer earnings by experience level, aggregating total USD earnings across categories. The chart renders as a standard donut-style pie with white stroke separations, category labels placed at arc centroids, and a color-coded legend. Data is fetched asynchronously from a CSV file hosted on GitHub Gist, then parsed and summed using JavaScript. The visualization is built with D3 v7, using `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and SVG rendering for both the chart and legend.

Fork of Pie Chart Question 1

Fork of ICE - 7 Pie Chart Maanas Katta

This example shows a pie chart of earnings by experience level for three categories—Beginner, Intermediate, and Expert—with a legend displaying each value. Rendered as SVG using D3 v6, the visualization employs `d3.pie()` to compute arc angles from the hardcoded dataset and `d3.arc()` to draw the slices, which are colored via `d3.scaleOrdinal(d3.schemeSet2)`. Labels are positioned using `arc.centroid()`, while the legend is built manually with HTML divs.

Fork of D3 Starter

This donut chart displays the mental health conditions of freelancers based on their work-life balance, with each slice sized according to earnings in USD and colored by experience level. The visualization uses the D3.js library (v5) with the `pie`, `arc`, and `scaleOrdinal` APIs to generate and style the chart. Data is loaded asynchronously from a CSV file hosted on GitHub, and a custom legend maps experience levels to slice colors.

Fork of Pie Chart

This visualization shows the distribution of mental health conditions among remote workers, with each slice of the pie chart representing the count of a specific condition. The chart is rendered as an SVG using d3.pie and d3.arc to generate the slices, with d3.scaleOrdinal and d3.schemeCategory10 assigning colors. A legend below displays the condition names as colored rectangles. The data comes from a CSV file loaded via d3.csv, and the code also logs the condition name to the console on mouseover events.

Fork of Pie Chart

This pie chart shows the count of students from each major at UNT, with each segment labeled with the corresponding value in thousands. The chart is rendered as an SVG using D3 v5, with data loaded asynchronously via `d3.csv` from a GitHub Gist. Slice positions are computed with `d3.pie` and drawn using `d3.arc`, while a legend lists each major alongside its student count. Colors are assigned via `d3.scaleOrdinal`, and values are formatted with `d3.format`.

Fork of Hello VizHub

This pie chart visualizes the distribution of pizza orders by category, with each slice labeled with its count and a legend identifying the categories. The code loads data from a GitHub Gist CSV file using `d3.csv`, calculates category frequencies through manual aggregation, and renders the chart as SVG with `d3.pie` and `d3.arc`. Slices use a `d3.scaleOrdinal` color scale with `d3.schemeCategory10`, and labels are positioned via `arc.centroid`. The legend is built manually, mapping rectangles and text to each category.

Fork of Pie Chart

This fork displays the basic cost of Netflix subscriptions as a pie chart, sourced from a CSV file hosted in a GitHub gist. The visualization uses D3 v5 to render the chart as scalable vector graphics (SVG), with the index.js file fetching and parsing the data from the provided URL. The chart includes a prominent title, bold text labels, and a custom legend that pairs labels with their corresponding values, all styled through an external CSS file. The code leverages D3's core data-driven document API to bind the dataset to the visual elements, producing a clean and readable breakdown of the cost categories.

Fork of scatterplot

This scatterplot visualizes the relationship between sleep duration and age, plotting each data point as a blue circle. It uses d3.csv to load a remote dataset, then applies d3.scaleLinear to map the data to pixel coordinates on an SVG canvas. Axes are generated with d3.axisBottom and d3.axisLeft, and labels for the x-axis, y-axis, and title are added using SVG text elements. The chart fills the entire browser window, with margins defined for the axes and labels.

pizza

This example displays the letter "Pizza" in oversized text at the center of the screen. It loads a CSV file from a GitHub gist using the `d3.csv` method, fetching the data asynchronously. The console output is used to log the parsed data, confirming successful retrieval. The visualization relies on the D3.js library version 6 and is embedded in a simple HTML page. No chart or graphical representation is rendered; the focus is on data loading and verification.

Fork of Hello VizHub

This fork of Hello VizHub displays a scatter plot of pizza data loaded from a GitHub Gist CSV, showing the relationship between quantity and unit price. The visualization uses D3 v6 to parse the CSV, create linear scales for both axes, and render steelblue circles for each data point within an SVG. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with text labels for “Quantity” and “Unit Price” appended directly to the axis groups.

Fork of Let's make a face with D3.js!

A simple SVG face built with D3.js v5 animates its eyebrows in a looping transition. The face comprises circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth, all centered via a translated group. D3's `select`, `arc`, and chained `transition` methods drive the rendering and the two-second eyebrow raise-and-lower cycle. The example demonstrates basic SVG shape construction and declarative animation without external data.

Fork of D3 Starter

This example displays a dataset from a pizza CSV file loaded from a GitHub gist, logging the parsed and numerically converted columns to the browser console. The page renders no visual output, instead demonstrating the initial data-processing step of a D3 project. Using D3 v6 via the `d3.csv` method, it fetches the remote data, coerces two columns to numbers with unary plus operators, and prints the resulting array for inspection. The minimal HTML and CSS center an empty page with oversized text styling, while the JavaScript executes the asynchronous data loading and transformation.

Fork of Fork of Hello VizHub

This example loads a pizza dataset from a GitHub gist using `d3.csv` and `d3.autoType`, then logs the processed data to the console. It shows how to fetch and inspect tabular data with D3 v6, converting numeric columns explicitly with unary plus operators. The page also includes a static message displayed via CSS, demonstrating a minimal setup combining D3 data handling with an HTML/CSS front-end. No charts or visualizations are generated from the data in this code.

Fork of Hello VizHub

This fork of Hello VizHub displays a static message, “Hello VizHub!”, centered on the page in large text. It loads a pizza dataset from a GitHub gist using `d3.csv` with `d3.autoType`, converting numerical columns to numbers and logging the processed data to the console. The visualization does not render charts or interactive elements; instead, it demonstrates data loading and preprocessing with D3 v6 in a minimal HTML and CSS setup.

Fork of D3 Starter

This example demonstrates the minimal setup required to render text using D3.js version 6, showing the string "Hello D3" centered on a blank page. The HTML file loads the D3 library from a CDN and applies large, centered typography through CSS. The accompanying JavaScript imports the `select` function from D3 and uses it to target the body element, setting its text content directly. The code illustrates a basic integration of D3’s DOM selection and manipulation methods without any data binding or complex visualizations.

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page using D3.js. The `d3.select` method targets the `#message` div and sets its content from a separate ES6 module. The text is styled with CSS to appear at a large font size. It demonstrates a minimal setup for combining D3 with modular JavaScript in a VizHub environment.