G

Gorantla Vishnusai

@Gorantlavishnusai·29 public vizzes

Loading thumbnail…

Fork of network ICE

This example visualizes a small health data network as a force-directed graph, organizing records by gender, then age, and finally metric values for sleep quality and stress level. Nodes are colored by hierarchy level: purple for gender, gold for age, and teal for metric leaves. The layout is computed with `d3.forceSimulation`, using `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, with draggable nodes via a custom drag handler. Rendering is SVG-based, with node labels and a legend showing the color mapping.

Loading thumbnail…

Tree Graph ICE

This interactive tree diagram displays hierarchical health data, structuring gender, age, and sleep/stress metrics as a branching network. The visualization uses colored nodes—red for gender, blue for age, and green for metrics—with connecting links, and the D3.js library (v7) builds the layout via `d3.tree()`, `d3.hierarchy()`, and `d3.linkVertical()`. Each metric leaf node labels specific sleep quality and stress level values, with the SVG rendering driven by direct DOM manipulation through D3 selections. The chart is populated from hardcoded JSON data embedded in the HTML file.

Loading thumbnail…

ice8

This example shows a small network of nodes and links laid out with a force-directed simulation. It loads JSON data from a raw GitHub gist URL using `d3.json`, then renders the graph as SVG circles and lines. The layout is computed with `d3.forceSimulation`, using `d3.forceLink` for edges, `d3.forceManyBody` with negative strength to repel nodes, and `d3.forceCenter` to keep the graph centered. Node and link positions are updated on each simulation tick by setting the `cx`, `cy`, `x1`, `y1`, `x2`, and `y2` attributes.

Loading thumbnail…

Areachart

This area chart visualizes the relationship between fuel efficiency and engine size for a car dataset loaded from a GitHub-hosted CSV file. The chart uses `d3.area` to generate a filled path, with `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering displays a semi-transparent steelblue region, with labeled axes for "Fuel Efficiency" and "Engine Size". Data values are parsed from strings to numbers before domain scaling, and the area’s baseline is set to the chart’s height.

Loading thumbnail…

Areachart

This area chart visualizes the relationship between fuel efficiency and engine size for a car dataset loaded from a GitHub-hosted CSV file. The chart uses `d3.area` to generate a filled path, with `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering displays a semi-transparent steelblue region, with labeled axes for "Fuel Efficiency" and "Engine Size". Data values are parsed from strings to numbers before domain scaling, and the area’s baseline is set to the chart’s height.

Loading thumbnail…

Piecharticons

This visualization shows the distribution of car types from a CSV dataset as a pie chart with an adjacent legend. It uses d3.pie and d3.arc to generate the slices, each filled with a color from d3.schemeSet2 via a d3.scaleOrdinal. Type labels are placed using labelArc centroids, and the legend is built with D3 selections on HTML divs, listing each car type with its corresponding count. The chart is rendered as SVG, with data aggregated using d3.rollup.

Loading thumbnail…

piechart_linechart

This example shows a line chart depicting the relationship between fuel efficiency and engine size for a car dataset. The SVG visualization uses D3.js v6 to load CSV data from a GitHub gist, parse numeric values, and render a single blue line path via `d3.line()`. Linear scales (`d3.scaleLinear`) map the fixed domains for fuel efficiency and engine size, while axes are generated with `d3.axisBottom()` and `d3.axisLeft()`. The chart includes labeled axes for fuel efficiency and engine size, with margins and dimensions set explicitly in the code.

Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between fuel efficiency and engine size for a dataset of cars, with each point’s radius representing horsepower and its opacity representing price. The chart uses D3 v6 to load CSV data from a GitHub gist, apply linear scales for the axes and point attributes, and render circles in an SVG. Color encodes car type (Sedan, Coupe, SUV, Truck) via `d3.scaleOrdinal`, with a legend included. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity-6-Scatterplot

This scatterplot visualizes the relationship between population and GDP per capita for U.S. cities using D3.js v6. The SVG-based chart plots each city as a steel-blue circle with a black stroke, positioned along linear scales for both axes. The code loads data from a GitHub-hosted CSV file, converts the population and GDP values to numbers, and renders axes with formatted tick labels. Interactive tooltips appear on mouseover, displaying each city's name, population, and GDP per capita. The visualization employs d3.csv for data loading, d3.scaleLinear for mapping, and d3.axisBottom and d3.axisLeft for coordinate axes.

Loading thumbnail…

ICE_6-SCATTER PLOT

This looping scatter plot animates between two views of U.S. city demographics, alternating between circular and triangular/square markers. The visualization compares population against GDP per capita, with color coding indicating which metric is larger. Built with D3.js v7, the example loads CSV data, computes linear scales, and toggles between two SVG charts using symbol generators. Axes and legends are drawn separately for each view, with the display switching via the `style.display` property.

Loading thumbnail…

6-scatterplot

This scatterplot visualizes the relationship between population and average temperature for U.S. cities, with each point labeled by city name. The chart uses d3.csv to load demographic data from a GitHub Gist and d3.scaleLinear to map population (x-axis) and temperature (y-axis) to SVG coordinates. d3.axisBottom and d3.axisLeft render the labeled axes, while circles with d3.selectAll are colored teal and annotated with text elements. The plot combines axis and point rendering to compare city-level climate patterns against population size.

Loading thumbnail…

6-piechart

This example shows the distribution of billionaires across categories using a single pie chart. The chart is rendered as an SVG with colored slices, labels for larger segments, and a legend that displays each category's name and count. The code aggregates the CSV data with `d3.rollup`, generates the pie geometry with `d3.pie` and `d3.arc`, and assigns colors via `d3.scaleOrdinal` with a categorical scheme.

Loading thumbnail…

6-piechart

This visualization shows the distribution of billionaires across categories using a pie chart, with each slice labeled and a legend identifying the categories. The chart is rendered as an SVG element, sized at 600 by 600 pixels, and uses D3.js (v3) APIs such as `d3.select`, `d3.csv`, `d3.rollup`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`. Data is loaded from a CSV file hosted on a GitHub gist, aggregated by category, and visualized with a color scheme from `d3.schemeCategory10`.

Loading thumbnail…

Fork of Fork of 6-scatterplot

This scatter plot displays the relationship between billionaire rank and final worth, with each circle colored by industry category. The visualization uses D3.js v6 to load CSV data from a GitHub gist and render SVG elements. It employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring, and `d3.axisBottom`/`d3.axisLeft` for labeled axes. Interactive tooltips appear on mouseover, showing each person’s name, worth, category, and age.

Loading thumbnail…

Fork of 6-scatterplot

This scatter plot shows the relationship between the rank and final worth of billionaires, with each point colored by category and displaying tooltips on hover. The chart, rendered as an SVG using D3 v6, loads CSV data from a GitHub gist. It maps rank to the x-axis and final worth to the y-axis using `d3.scaleLinear`, draws circles, and applies `d3.axisBottom` and `d3.axisLeft` for axes. Interactivity is implemented through mouseover and mouseout events that toggle a tooltip showing the person’s name, worth, category, and age.

Loading thumbnail…

6-scatterplot

This visualization presents a scatter plot of billionaire data, mapping each individual’s rank along the x-axis against their final worth in billion dollars on the y-axis. Circles are colored by category, with a tooltip revealing the person’s name, worth, category, and age on hover. Built with D3 v6, it loads a CSV from a gist, uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The SVG rendering includes labeled axes and interactive mouseover events.

Loading thumbnail…

6-Scatter Plot

This example visualizes the relationship between fixed acidity and volatile acidity in wine samples, with each point’s label derived from residual sugar values. The visualization is built using Chart.js, which renders a scatter plot onto an HTML Canvas element. The code loads a CSV file via Papa Parse, dynamically typing the columns, then maps the parsed data to x and y coordinates for the chart. The plot uses a linear scale for both axes, with axis titles displayed, and applies a custom background color to the data points.

Loading thumbnail…

6-scatterplot

This scatter plot visualizes the rank and final worth of billionaires, using color to distinguish their industry categories. Built with D3 v6, it renders circles as SVG elements, with axes for rank and final worth in billion dollars. The code employs `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. Hovering reveals a tooltip with the individual's name, worth, category, and age. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

Loading thumbnail…

6-Scatter Plot

This scatter plot displays the relationship between billionaires’ net worth (in thousands) and their age, with each circle representing an individual and hovering to reveal the person’s name via a SVG title tooltip. The visualization uses D3 v7’s reusable chart pattern, configuring linear scales for both axes and rendering axes with formatted tick labels. Data is fetched asynchronously from a CSV file hosted on GitHub Gist, while the chart’s width, height, and accessor functions remain customizable through getter-setter methods.

Loading thumbnail…

ScatterPlot

This scatter plot visualizes the relationship between BMW sales and price, with each point representing a model. The code loads data from a CSV file and maps sales to the x-axis and price to the y-axis using d3.scaleLinear. Rendered as SVG circles with hover effects, the chart displays axes via d3.axisBottom and d3.axisLeft, and includes text labels for both dimensions. The visualization uses D3 v7 and applies CSS styling for dot appearance.

Loading thumbnail…

Barchart

This bar chart visualizes BMW sales figures by model, using a static, vertical bar layout. Built with D3.js v7, the chart loads data from a CSV file via `d3.csv`, converts the sales values from strings to numbers, and renders the bars as SVG rectangles. The visualization includes a band scale for the categorical x-axis (`d3.scaleBand`) and a linear scale (`d3.scaleLinear`) for the y-axis, with axes generated using `d3.axisBottom` and `d3.axisLeft`. Hovering over a bar changes its fill from steel blue to orange.

Loading thumbnail…

sclatterplot

This scatter plot visualizes coffee sales quantities over time, with each circle representing a daily sale. The chart maps dates along the x-axis and sales quantities on the y-axis, making it easy to spot trends and outliers in the data. Built with D3.js v7 using an SVG rendering approach, the visualization loads a CSV file containing the sales records and applies the `scaleBand` and `scaleLinear` methods for axes positioning. The circles are styled with a steelblue fill and black stroke, while the x-axis labels are rotated for readability.

Loading thumbnail…

Fork of Question 2

This chart shows daily coffee sales quantities as a vertical bar chart, with dates on the x-axis and sales quantity on the y-axis. The code loads CSV data via `d3.csv`, parses the Quantity field into numbers, and renders bars using `d3.scaleBand` and `d3.scaleLinear`. It appends SVG rectangles, styled with a steelblue fill, and adds axes using `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability. The visualization relies on D3 v7 and renders entirely in SVG.

Loading thumbnail…

Ice6

This bar chart visualizes average horsepower for different car brands, sourced from a car models dataset hosted on GitHub. Built with D3 v7 and rendered as SVG, it uses `d3.csv` to load data, `d3.rollup` with `d3.mean` to aggregate, and `d3.scaleBand`/`d3.scaleLinear` to map brands and values. Hovering highlights bars in orange, and axis labels are rotated for readability.

Loading thumbnail…

Ice-6

A bar chart displays the sales of various coffee products from a CSV dataset. It uses D3.js v3, loading data with `d3.csv` and rendering the chart with SVG. The x-axis uses `d3.scaleBand` for product categories, while the y-axis uses `d3.scaleLinear` for sales values. Bars are drawn as `rect` elements filled with steelblue and labeled with rotated text on the bottom axis. The visualization directly shows comparative sales figures across the coffee product lineup.

Loading thumbnail…

Fork of DV5

This example demonstrates how to load and parse a CSV dataset using D3.js, displaying basic information about the file’s size, row count, and column count in a styled HTML page. The code fetches a remote CSV file containing laptop data via `d3.csv`, then formats the resulting parsed data with `d3.csvFormat` to estimate its kilobyte size. The retrieved statistics are written into a `<pre>` element using standard DOM manipulation, while the page’s vibrant blue and red styling is applied through regular CSS.

Loading thumbnail…

DV5

This example demonstrates how to load and parse a remote CSV dataset using D3’s `d3.csv` function, displaying the file’s size in kilobytes, the number of rows, and the number of columns in a styled HTML `<pre>` element. The visualization retrieves the dataset from a GitHub Gist URL, then formats the loaded data with `d3.csvFormat` to calculate the byte size. The page applies bold background colors and styling via CSS, while JavaScript updates the message container with concise summary statistics about the dataset’s structure.

Loading thumbnail…

Fork of meditation

This visualization depicts a stylized meditating figure constructed from abstract, geometric SVG shapes. Built with React, the SVGCanvas component renders a gradient-background scene, incorporating a vibrant orange body, a red head with purple hair, and simplified facial features conveying serenity. The figure’s pose is static, composed of layered paths for the head, body, arms, and legs against a blue ground. The code defines all visual elements directly via JSX, using standard SVG tags like path, circle, and rect within a linear gradient.

Loading thumbnail…

Fork of meditation

This visualization depicts a stylized meditating figure constructed from abstract, geometric SVG shapes. Built with React, the SVGCanvas component renders a gradient-background scene, incorporating a vibrant orange body, a red head with purple hair, and simplified facial features conveying serenity. The figure’s pose is static, composed of layered paths for the head, body, arms, and legs against a blue ground. The code defines all visual elements directly via JSX, using standard SVG tags like path, circle, and rect within a linear gradient.