P

priyapravallika44@gmail.com

@Pravallika970·19 public vizzes

Loading thumbnail…

Network Structure

This network graph shows the hierarchical structure of job postings, branching from a central "Jobs" node into employment categories (full-time, part-time, contract, internship), then to geographic locations, and finally to specific job titles. The visualization uses D3.js v7 with `d3.forceSimulation`, `d3.forceLink`, and `d3.select` to create the SVG-based force-directed layout. Nodes are styled with black borders, while light gray links connect the three-tier hierarchy. The data is defined as static JavaScript arrays within the HTML file, and the graph dynamically sizes its width to the browser window.

Loading thumbnail…

Tree2

This visualization presents a hierarchical tree of job listings grouped by work type (Full Time, Part Time, Contract, Internship), location, and job title. The d3.hierarchy and d3.tree layouts structure the data, which is rendered as an SVG using d3.linkHorizontal for curved links and distinct shapes for nodes at different depths. A legend clarifies the shape-to-category mapping. The data appears to be manually structured LinkedIn job information, with colors and symbols differentiating root, work type, location, and title levels.

Loading thumbnail…

Tree 1

This visualization shows a hierarchical tree of job listings, grouped first by employment type (Full Time, Part Time, Contract, Internship), then by location, and finally by job title. The layout uses a horizontal tree structure where each node is a circle colored by depth, with text labels positioned to the left for parent nodes and right for leaf nodes. The code builds the tree using `d3.hierarchy`, layouts it with `d3.tree`, and renders links with `d3.linkHorizontal`. Node circles and text are appended as SVG elements, with colors assigned based on the node’s depth in the tree.

Loading thumbnail…

Fork of Area chart for electronics sale

This area chart displays electronics sales figures across six months, from January through June, with a semi-transparent steel-blue filled region bounded by a dark-blue line. The SVG visualization uses D3 v6 scales and generators, including `d3.scalePoint` for the month axis, `d3.scaleLinear` for the sales axis, and `d3.area` and `d3.line` to produce the filled and stroked paths. Axis labels for "Month" and "Sales ($)" are added via `d3.axisBottom` and `d3.axisLeft`, with styling applied through CSS classes. Sales data is hardcoded in the script, with values ranging from 49,000 to 57,000 dollars.

Loading thumbnail…

Fork of Line chart for electronics sales

This fork shows monthly electronics sales from January through June, with a steel-blue line tracing sales figures that peak in June. The chart uses D3.js v6 to render an SVG path via the line generator, with point and linear scales mapping months and dollar amounts. Axis labels are added using d3.axisBottom and d3.axisLeft, while a fixed dataset is defined inline in the script.

Loading thumbnail…

Fork of pie chart for monthly sales

A fork of a pie chart displays six monthly sales snapshots, each broken into category shares (electronics, clothing, groceries, furniture, toys, books) with slice labels and a legend. The D3.js v6 code flattens monthly objects, applies a d3.pie layout and d3.arc generators to draw SVG paths, and uses d3.scaleOrdinal with schemeCategory10 for colors. Each month’s chart is offset vertically, with text labels positioned via labelArc.centroid, and data is hardcoded in the script.

Loading thumbnail…

Fork of Scatter plot for Electronics sale

A reusable scatter plot displays monthly electronics sales data across six months, with each month's sales shown as a teal circle positioned by month on the x-axis and sales value on the y-axis. The chart uses D3 v6’s `scaleBand` and `scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` for tick labels, and `join` to bind circles to the data. The x- and y-axis labels are added via appended text elements, while the chart’s dimensions, margins, and data mapping are configurable through a builder-style API. The implementation renders to SVG and is a fork of an existing scatter plot template, with the data hardcoded in the script.

Loading thumbnail…

Scatter plot for Electronics sale

This scatter plot displays monthly electronics sales figures as teal circles, with months on the x-axis and sales values on the y-axis. Built with D3 v6, the reusable chart function (using a closure pattern) renders an SVG, employs `d3.scaleBand` for the categorical month axis, and `d3.scaleLinear` for the sales scale. The code defines a reusable scatter plot builder with settable width, height, data, and axis labels, though the visible example is static with six months of sales data.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes monthly sales data across product categories. The chart uses D3’s `scaleOrdinal` and `scaleLinear` to map months and sales values to SVG circle positions, with a color scale distinguishing six categories. An axis and legend are rendered via `axisBottom`, `axisLeft`, and appended SVG elements. The code samples data from a static array, demonstrating a reusable `scatterPlot` function with configurable accessors and margins.

Loading thumbnail…

Fork of act6_Task2

This scatter plot visualizes the relationship between two quantitative variables across data points, with each point colored by its categorical label and a corresponding legend. Built using D3.js, it employs `scaleLinear` for the x and y axes, `extent` to compute domains from the data, and `axisLeft`/`axisBottom` for the coordinate axes. Circles are rendered with `selectAll`/`join`, and the legend is constructed with appended `rect` and `text` elements. The plot derives its categories from the data’s `category` field, assigning colors via a `scaleOrdinal`.

Loading thumbnail…

Area chart for electronics sale

This area chart displays electronics sales figures across six months, from January through June, with a semi-transparent blue fill and a darker boundary line. The visualization uses D3.js v6 with SVG rendering, employing `d3.scalePoint` for the month-based x-axis and `d3.scaleLinear` for the sales values on the y-axis. The area and line paths are generated using the `d3.area()` and `d3.line()` generators, while axes are created with `d3.axisBottom` and `d3.axisLeft`. Sales data comes from a hardcoded array with monthly dollar amounts.

Loading thumbnail…

Line chart for electronics sales

This line chart displays electronics sales over six months, from January to June, with monthly sales values ranging between $49,000 and $57,000. A single steelblue line connects the data points, plotted using d3.line with a point scale for months on the x-axis and a linear scale for sales on the y-axis. The visualization, rendered as an SVG, includes labeled axes for month and sales amount, with data hardcoded in the script rather than loaded externally. Axis ticks are generated via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

pie chart for monthly sales

This example shows monthly sales data for six product categories across six months using a series of pie charts, each labeled with its corresponding month. It displays proportional slices for electronics, clothing, groceries, furniture, toys, and books, with a legend for the categories. Each pie chart is rendered as an SVG using D3.js v6, with the `d3.pie()` layout generating the arc angles and `d3.arc()` creating the paths. The code uses `d3.scaleOrdinal` with `d3.schemeCategory10` for colors and positions the charts vertically with month labels below each slice.

Loading thumbnail…

Fork of Fork of area chart

This area chart visualizes the fruit yield of apples from 2014 to 2024, drawn from a CSV file. The SVG chart uses d3.area to create a semi-transparent steelblue region, with d3.scalePoint for the year axis and d3.scaleLinear for the yield axis. Axes are rendered with d3.axisBottom and d3.axisLeft, with custom tick marks and rotated year labels.

Loading thumbnail…

Fruit Nutrition

This scatterplot visualizes the nutritional relationship between sugar content and calories across various fruits. Each circle represents a fruit, plotted on a Cartesian coordinate system with sugar grams on the x-axis and calories per 100g on the y-axis. The visualization uses d3.csv to parse the external fruit dataset, d3.scaleLinear for axis scaling, and d3.axisBottom/d3.axisLeft for labeled axes. Rendered as an SVG, the chart employs d3.select to append circles with a fixed radius, while axis titles clarify the measured variables.

Loading thumbnail…

Sales Data

This grouped bar chart displays sales data for six product categories (Electronics, Clothing, Groceries, Furniture, Toys, Books) across six months (January through June). The chart shows monthly comparisons using color-coded bars, with dollar amounts on the y-axis and months on the x-axis. The visualization is generated using D3.js v5 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for category colors. Data is hardcoded in the script, and axes are labeled with "Month" and currency-formatted tick values.

Loading thumbnail…

Sales Data

This grouped bar chart displays sales data for six product categories (Electronics, Clothing, Groceries, Furniture, Toys, Books) across six months (January through June). The chart shows monthly comparisons using color-coded bars, with dollar amounts on the y-axis and months on the x-axis. The visualization is generated using D3.js v5 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for category colors. Data is hardcoded in the script, and axes are labeled with "Month" and currency-formatted tick values.

Loading thumbnail…

Fork of A8: Force-Directed Diagram

This fork of "A8: Force-Directed Diagram" actually renders a horizontal bar chart of student performance. It shows the average test score from 2010 to 2023 for each named student, with bars sorted along a categorical y-axis. The visualization loads a CSV from a GitHub gist, computes per-student averages, and draws the chart using D3’s `scaleBand`, `scaleLinear`, and axes within a React component managed via `useState` and `useEffect`.

Loading thumbnail…

Cute Teddy Bear

This example uses D3.js (d3.v6) to render a decorative SVG scene of a teddy bear on a beige background. The bear is composed of basic geometric shapes, including circles for the head, ears, and body, with a curved path for a smile and a blue rectangle and path for a cap. A red balloon, with a line for its string, and a pink flower with a green stem are added to complete the illustration. The code directly appends shapes to an SVG canvas using d3.select and attributes like circles, polygons, paths, and rectangles.