S

saipaidipalli

@saipaidipalli·25 public vizzes

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays three categories (category1, category2, category3) across three groups: Economy, Business, and First Class. The visualization uses D3 v7 to render SVG rectangles, with each bar segment stacked vertically using the `scaleBand` and `scaleLinear` scales. The code defines the data in a JavaScript array and applies `d3.axisBottom` and `d3.axisLeft` to generate the x and y axes. Color-coded segments (blue, orange, green) represent each category, showing their proportional contributions to the total value per group.

Loading thumbnail…

D3.js Tree

This example displays a small hierarchical tree of flight classes using D3.js. The visualization separates the data into two main branches, Basic and Premium, each with two child nodes, and lays them out horizontally using the `d3.tree` and `d3.hierarchy` APIs. It renders the structure as an SVG, drawing curved links with `d3.linkHorizontal()` and adding circular nodes and text labels for each element. The tree is generated from a static, embedded JavaScript data object, with all coordinates assigned by the layout algorithm before being drawn on an 800 by 600 canvas.

Loading thumbnail…

World Map with D3.js

This example displays a world map using D3.js version 7, rendering country boundaries as SVG paths with a light gray fill and white stroke. It loads GeoJSON country data from a remote GitHub repository and projects it using the `d3.geoNaturalEarth1` projection defined by a `d3.geoPath` generator. The map is drawn inside a fixed 800×500 SVG element, and the included CSS defines hover states that change country colors to maroon. The implementation demonstrates basic geographic data loading, projection, and SVG rendering with D3.

Loading thumbnail…

World Map with D3.js

This example displays a world map rendered as an SVG using D3.js and the Natural Earth projection. It loads GeoJSON data from a local file and draws each country as a path with a light gray fill and white borders. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate the paths, and `d3.json` to fetch the `world.geojson` data file.

Loading thumbnail…

Reusable Scatter Plot in

This reusable scatter plot displays sample data points as steelblue circles, with x and y positions mapped through linear D3 scales. The visualization constructs axes using d3.axisBottom and d3.axisLeft, applied to an SVG container with configured margins. The d3.v7 code encapsulates the chart creation in a `createScatterPlot` function, which binds data via `selectAll().data().enter().append()` and renders the SVG output with hardcoded example values.

Loading thumbnail…

Bubble Chart

This bubble chart displays three data points as red circles, with each bubble’s horizontal position, vertical position, and radius mapped from the `a`, `b`, and `c` fields of the data array via `d3.scaleLinear` ranges. The SVG rendering uses D3 v7’s selection API (`d3.select`, `.enter().append()`) to create the circles, while `d3.axisBottom` and `d3.axisLeft` add labeled x- and y-axes with explicit pixel translations. The static example demonstrates basic D3 scales, SVG circle generation, and axis construction without interaction or animation.

Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Loading thumbnail…

Untitled

A histogram displays the average body mass index of individuals across different ages, using data loaded from a CSV file via `d3.csv`. The visualization uses `d3.bin` to group ages into bins and `d3.scaleLinear` for both x and y axes, rendered as SVG rectangles with green fills. Customized axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart includes titled axis labels for age and average BMI. The example demonstrates ES6 module imports from the D3 v4 library.

Loading thumbnail…

Untitled

This example uses Chart.js 2.9.4 to render a static bar chart on a Canvas element. It displays a single dataset of four values—100, 50, 20, and 3—labeled by flight class, including Economy, First Class, Business, and Private. The chart’s title, “People travelling in a flight,” appears above the bars, and the legend is hidden. The code creates the chart by passing a canvas ID and configuration object, specifying the chart type, data labels, and visual options directly in the script.

Loading thumbnail…

My bar chart

This bar chart visualizes the distribution of traveler counts across four travel classes: Economy, Business, First Class, and Private, with values of 100, 50, 20, and 3 respectively. The chart uses Chart.js version 2.9.4 and renders to an HTML canvas element. The data is hardcoded as arrays in the script, with the chart configured to display a title describing the dataset as "World Wine Production 2018," though the labels suggest travel categories. The legend is hidden, and the chart is styled responsively with a maximum width of 600 pixels.

Loading thumbnail…

My bar chart

This example shows a stacked bar chart comparing the counts of four travel classes: Economy, Business, FirstClass, and Private, with a title labeling the data as “World Wine Production 2018.” The chart is rendered on a canvas element using the Chart.js library, with its `Chart` constructor configuring the chart type as `stacked` and providing the data arrays for labels and values. The visualization sets the legend to hidden and displays only the title, using the canvas’s default styling for a simple, single-dataset presentation.

Loading thumbnail…

Activity_8-Graph

This social network graph visualizes friendship connections among ten people, with green circular nodes and blue directed edges carrying arrow markers. The visualization uses D3.js v6 with a force-directed simulation (`d3.forceSimulation`) that applies link, charge, collision, and centering forces to position nodes. Nodes are draggable and highlight on hover, while the data comes from a local JSON file containing node and link objects. The SVG rendering includes custom markers defined in the `defs` section, with text labels displayed inside each node.

Loading thumbnail…

Activity_8-Task_5(2)

This example displays a single country, India, as a static SVG map rendered from TopoJSON world data. The code extracts the India geometry from the world-atlas dataset using the topojson-client API, then applies a Mercator projection with d3.geoPath to draw the country’s boundaries. The map is centered and scaled to fit a 960×500 pixel viewport, demonstrating a minimal setup for geographic visualization with D3 v5.

Loading thumbnail…

Activity 8_Task-4

This area chart shows the cost of sales from 2000 to 2013, with a smooth curve and a light green filled region beneath the line. The visualization uses D3 v5’s `area()` and `line()` generators with `curveBasis` to create the path, while `scaleTime` and `scaleLinear` map the year and cost values. Axes are rendered via `axisBottom` and `axisLeft`, with tick formatting using `format('.3s')`. Data is loaded from a CSV file using `csv()`, and the SVG is positioned within a fixed 920x400 viewport.

Loading thumbnail…

Activity_8-Task_3

This line chart displays the cost of sales from 2000 to 2013, using a light green stroke to trace the trend over time. The chart, rendered as an SVG, uses a band scale for the x-axis (years) and a linear scale for the y-axis (cost), with data loaded from a local CSV file. The code leverages D3 v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to construct the visualization, with red axis labels for clarity.

Loading thumbnail…

Activity_8-Task_2

This pie chart displays the count of students from each major at UNT, using a color-coded circular layout with proportional slice sizes. The data is fetched from a CSV file hosted on a GitHub gist. The visualization is built with D3 v5, using the `pie` function for data encoding, `arc` for generating the pie segments, and `scaleOrdinal` for categorical color mapping. The chart includes a legend on the right, with each entry showing the major name and its corresponding student count. A title and axis tick formatting complete the presentation.

Loading thumbnail…

Activity_8-Task_2

This visualization displays the count of students from each major at UNT using a pie chart with an interactive legend. The data is loaded from a remote CSV file using D3 v5’s `csv` function, and the pie layout (`d3.pie`) computes arc segments from the student counts. Each slice is rendered as an SVG path with `d3.arc`, colored via `d3.scaleOrdinal`, and labeled with formatted values. A legend to the right lists majors with their corresponding colors and student totals.

Loading thumbnail…

Activity 8_Task_1

This animated scatterplot cycles through four Iris flower measurements, using petal width on the x-axis and sepal length on the y-axis, with points colored by species. It is built with D3 and uses the `csv` loader to fetch the Iris dataset, then repeatedly updates the plot’s x-value via `setInterval`. Each frame, the axes and labels redraw, while a custom legend and title remain static. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to handle scaling and axis rendering.

Loading thumbnail…

MARVEL

This example displays the first ten rows of a Marvel Cinematic Universe dataset, which includes film details like title, phase, release date, and box office figures. The rendered output is a text-based preview of the CSV data, shown as JSON objects. The code uses D3 v5’s `csv` method to load the data from a remote gist, converts it to a readable format with `JSON.stringify`, and appends it to the page using selections. A `pre` element displays the header and rows, with a `csvFormat` function used to calculate the data size.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position corresponds to its horsepower and torque values, while its size encodes highway MPG and its color represents the car manufacturer. Built with D3.js (v7), the SVG renders axes, labeled scales, and animated bubbles with hover tooltips showing the make. A legend displays bubble size values and color-coded car brands, using `d3.scaleLinear`, `d3.scaleOrdinal`, and D3's `join` API for data binding.

Loading thumbnail…

Activity_7

This example shows a horizontal bar chart of the top 20 countries by 2020 population, using green bars against blue tick marks. The visualization is built with React and D3 v5, employing `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements for the marks. Population values are loaded from a CSV via `d3.csv` and displayed with `d3.format` to abbreviate numbers (e.g., "B" for billions). The chart includes custom axis components and a tooltip using SVG `<title>`.

Loading thumbnail…

Task4

This example shows a scatter plot of the iris dataset, displaying sepal length against petal length with species encoded by the shape of each data point. A legend maps each species to its corresponding symbol. The visualization loads the dataset from a remote CSV file using `d3.csvParse` and renders the plot using D3 v7 scales, axes, and symbol generators.

Loading thumbnail…

Activity 6 - Task 2,3

This example loads a CSV file from a GitHub gist and displays the first 10 rows as JSON in a pre-formatted text block on the page. It uses D3 v5 via UNPKG, specifically the `csv` and `csvFormat` functions, along with `select` to manipulate the DOM. The visualization is rendered with SVG and WebGL, though the main output is textual, showing the data structure without additional graphical encoding.

Loading thumbnail…

Activity_6-Task_4

This example displays the average sepal length for each iris species in the classic Iris dataset, presenting the computed summary as a formatted JSON list in a `<pre>` element. The visualization first loads and parses `data.csv`, then uses the `flatRollup` API with a custom `sum` aggregation to group records by species and calculate the mean. It relies on D3 v7's `select`, `csvParse`, and `flatRollup` functions to transform the raw measurements into a concise textual summary.

Loading thumbnail…

5 Buddhas

Five diamond-shaped polygons scatter across a black screen, each rendered in vibrant, randomized RGB colors. The polygons are generated through nested React map functions, with positions and fill values determined by the `Math.random()` method. The visualization uses React and ReactDOM to render SVG elements, with each polygon rotated 45 degrees via an SVG transform. A large buddha face path is also drawn in the center, layered beneath the scattered shapes, creating a juxtaposition of chaotic geometry and a distinct figure.