M

mandalasaikrishna007

@mandalasaikrishna007·39 public vizzes

Loading thumbnail…

FORK OF NETWORK GRAPH

This network graph visualizes friendships and mutual connections among a set of named individuals, with node size and link thickness representing connection weights. The force-directed layout uses `d3.layout.force` to position nodes and links, with SVG circles for nodes and lines for edges. Data comes from a local JSON file containing node names, group assignments, and weighted links. The graph renders in an SVG container, with node labels displayed as text elements that update positions during the simulation ticks.

Loading thumbnail…

FORK OF D3: GEOEARTH

This choropleth map displays worldwide brain and nervous system cancer deaths for 2019, using a yellow-to-red sequential color scale to indicate mortality counts per country. It renders geographic boundaries from the World Atlas TopoJSON file via `d3.geoPath` and `d3.geoNaturalEarth1`, joining country codes with a CSV dataset. Hovering over a country appends its name and death total to a div, while a legend built with `d3.scaleSequential` and `interpolateYlOrRd` shows the color range.

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using collapsible nodes, with each person represented as a colored rectangle. Built with D3 v3, it loads data from a JSON file and renders an SVG tree layout. Users can click nodes to expand or collapse branches, with the view supporting both zoom and drag interactions. The code uses `d3.layout.tree`, `d3.behavior.zoom`, and custom tooltip elements to show link details, with node colors distinguishing different relationship types.

Loading thumbnail…

FORK OF ICE-8: FORK OF INDIA MAP WITH D3.js

This choropleth map displays the states of India, with each region filled in a deep maroon color and outlined in a soft silver stroke. Interior boundaries between states are highlighted with a bright cyan line, making the internal divisions stand out clearly. The visualization uses the D3.js `geoPath` and `geoMercator` projection to render GeoJSON features of Indian administrative regions, sourced from a TopoJSON file. It is built within a React framework, and the SVG paths are generated from the `feature` and `mesh` functions of the TopoJSON API.

Loading thumbnail…

Fork of DV ICE-7 krishna

This animated scatter plot displays the Iris dataset, mapping petal width against sepal length and coloring points by species (versicolor, virginica, and setosa). The visualization cycles through four numerical columns—petal width, sepal width, petal length, and sepal length—every five seconds using `setInterval`. Built with D3 v6, the reusable chart component (`scatterPlot`) uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Data loads via `d3.csv` from a GitHub-hosted CSV file, with dimensions and margins configured programmatically.

Loading thumbnail…

Reusable D3 Scatter Plot

This example shows an animated scatter plot of Iris flower data, cycling through different petal and sepal measurements every two seconds. The visualization uses D3.js in a React environment to render SVG circles, with axes that update dynamically as the selected columns change. A reusable scatterPlot function encapsulates the chart logic, while the main script handles data loading from a GitHub Gist CSV and manages the animation interval. The plot includes a color-coded legend for species and uses D3's scaleLinear, scaleOrdinal, axisLeft, and axisBottom APIs to build the visualization.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7 krishna

This animated scatter plot visualizes the Iris flower dataset, cycling through four different measurement pairs on the x-axis while keeping petal width on the y-axis. The visualization uses D3 v6 with SVG rendering, employing a custom `scatterPlot` reusable chart function with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Points are color-coded by species (setosa, versicolor, virginica), and a `setInterval` updates the x-axis mapping every few seconds. The code loads data via `csv` from a GitHub gist and uses `selectAll` with `join` to manage circle elements.

Loading thumbnail…

Fork of Scatter Plot with Iris Data krishna

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width for individual data points, with each point colored by species (setosa in red, versicolor in blue, and virginica in green). It also encodes sepal dimensions in the horizontal and vertical radii of each circular mark, creating a bubble-like effect. Built with React and D3 v6, the code uses `d3.csv` for data loading, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes, rendering everything as SVG circles on a full-window canvas. The data is fetched from a remote GitHub gist.

Loading thumbnail…

Fork of ReusablE Scatter Plot- ICE7 KRISHNA

This example presents an animated scatter plot of the Iris flower dataset, cycling through different feature pairs on the x-axis while the y-axis displays sepal length. The visualization uses D3.js via the VizHub platform, loading data from a CSV file and rendering with SVG. It demonstrates modular code by importing a reusable `scatterPlot` function, and creates a static color legend for the three species. An interval timer updates the x-axis attributes, and custom styling is applied using the Share Tech font.

Loading thumbnail…

Fork of ReusablE Scatter Plot- ICE7 KRISHNA

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal measurements to Cartesian coordinates. The visualization cycles through different x-axis variables—petal width, sepal width, petal length, and sepal length—using a timer interval, while the y-axis remains sepal length. Data points are color-coded by species (setosa, versicolor, virginica) with orange, blue, and black fills. The example demonstrates a reusable scatter plot component built with React, D3.js’s `csv` parser, and SVG rendering, with a legend and axis labels dynamically updated during the animation.

Loading thumbnail…

Fork of ReusablE Scatter Plot- ICE7 KRISHNA

This animated scatter plot visualizes the Iris dataset, cycling through four flower measurements on the x-axis while mapping petal width to the y-axis. Points are colored by species—setosa in orange, versicolor in blue, and virginica in black—with a static legend and rotating axis labels. Built with React and D3, the example uses `d3.csv` for data loading, `d3.select` and `selectAll` for SVG rendering, and `setInterval` to trigger periodic axis updates. The code also includes custom circular markers with adjustable radii and a title, demonstrating reusable scatter plot patterns.

Loading thumbnail…

Fork of ReusablE Scatter Plot- ICE7 KRISHNA

This animated scatter plot explores the Iris dataset, cycling through different measurements on the x-axis to reveal relationships between sepal and petal dimensions. Data points are color-coded by species using orange, blue, and black markers, with a custom legend and rotating axis labels. Built with D3 v6, the visualization uses the reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. A `setInterval` timer switches the x-axis variable every few seconds, smoothly updating the chart to compare all four measurement combinations.

Loading thumbnail…

Fork of Reusable Scatter Plot- ICE 7

This animated scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species appears as a distinct color—orange, blue, and black—with a custom legend and labels. Built with D3 v6, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `setInterval` to cycle through measurement columns. Circles are rendered as SVG elements with custom `rx` and `ry` attributes, and axes are drawn using `axisLeft` and `axisBottom`.

Loading thumbnail…

ICE 7 AREA CHART

This area chart visualizes perfume sales over time, using a smooth curve to connect annual data points and a green filled region beneath the line to emphasize sales volume. The chart includes labeled axes for Year and Sales, with gridlines and formatted tick values. Built with React and D3 v5, the code uses `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate the SVG paths, while `axisLeft` and `axisBottom` add the scales. Data is loaded from a CSV file using `d3.csv` and parsed with `d3.timeParse`.

Loading thumbnail…

ICE 7 AREA CHART

This area chart displays sales of perfumes over time, with the data sourced from a CSV file. The visualization combines a smooth black line and an orange filled area beneath it, using D3 v5’s `line` and `area` generators with `curveBasis`. Axes are rendered via `axisBottom` and `axisLeft`, with scales from `scaleTime` and `scaleLinear`, and the SVG output is styled through CSS.

Loading thumbnail…

Fork of ice 7 krishna

This visualization shows car sales in India from 2009 to 2019 using a combined line and area chart. A black line traces the annual sales trend while an orange filled area beneath the curve emphasizes the magnitude of sales. The chart uses d3.scaleTime for the temporal x-axis, d3.scaleLinear for the sales y-axis, and d3.area with d3.curveBasis for the smooth area fill. Data is loaded from a CSV file and parsed with d3.timeParse, with sales values formatted using d3.format.

Loading thumbnail…

ice 7 krishna

This example visualizes car sales in India from 2009 to 2019 as a combined line and area chart. The black line traces yearly sales totals, while the orange area beneath it emphasizes the magnitude of sales over time. Using D3 v5, the code applies `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for smooth curves, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded via `csv` from a GitHub gist, and the SVG rendering includes gridlines and styled axis labels.

Loading thumbnail…

Fork of ICE 7 area chart

This example visualizes car sales in India from 2009–2019 using a combined line and area chart rendered with SVG. The line traces yearly sales values, while the filled area beneath it uses an orange gradient to emphasize volume trends over time. The code employs D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, and `line()` with `area()` generators using `curveBasis` for smooth interpolation. Data is loaded from a CSV via `d3.csv` and parsed with `d3.timeParse`; a grid pattern is created by `tickSize` on both axes.

Loading thumbnail…

Fork of line chart section 3

This line chart displays perfume sales totals from 2015 to 2021, with time on the x-axis and sales values on the y-axis. The visualization uses React and D3 v5, employing d3.csv to load external data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the path. SVG rendering includes gridlines via axis tick marks, with axis labels added manually. The data is parsed using d3.timeParse to convert date strings.

Loading thumbnail…

ICE - 7 Pie Chart krishna

This pie chart displays the top football players and their goal counts. Built with D3 v5 and rendered as an SVG, it visualizes data fetched from a GitHub Gist CSV file. The chart uses d3.pie to compute arc segments, d3.arc to generate the paths, and d3.scaleOrdinal for colors. Each slice is labeled with a formatted goal value, and a legend lists player names and corresponding goal totals. The chart is drawn on a 960x500 pixel SVG canvas centered on the page.

Loading thumbnail…

ICE - 7 Pie Chart Maanas Katta

This visualization displays a pie chart comparing the top 10 countries by deaths attributable to air pollution in 2020. Each slice represents a country, with the chart rendered as SVG elements sized and positioned using D3's `d3.arc` and `d3.pie` APIs. The code uses `d3.select` and `d3.attr` to style the slices, while legend text is positioned using `d3.text` with explicit coordinates.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example shows the top 10 countries by deaths from air pollution in 2020 using a pie chart, with each slice labeled with the death count in thousands and a legend listing country names and values. The code fetches CSV data from a GitHub gist, parses it with the `csv` method from d3-fetch, and renders the chart as SVG. It uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute, draw, color, and label the segments, while legend items are appended as groups with rectangles and text elements.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example shows the top 10 countries by deaths from air pollution in 2020 using a pie chart, with each slice labeled with the death count in thousands and a legend listing country names and values. The code fetches CSV data from a GitHub gist, parses it with the `csv` method from d3-fetch, and renders the chart as SVG. It uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute, draw, color, and label the segments, while legend items are appended as groups with rectangles and text elements.

Loading thumbnail…

Fork of ICE - 7

This example uses a pie chart to visualize the top 10 countries by deaths in 2020 attributed to air pollution. The D3.js v5 code loads CSV data from a gist, converts the figures with the `csv` function, and renders the chart using `pie`, `arc`, and `scaleOrdinal`. Each slice is labeled with a short formatted value, and a legend lists the countries with their corresponding counts, all displayed as SVG elements.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example shows the top 10 countries by deaths from air pollution in 2020 using a pie chart, with each slice labeled with the death count in thousands and a legend listing country names and values. The code fetches CSV data from a GitHub gist, parses it with the `csv` method from d3-fetch, and renders the chart as SVG. It uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute, draw, color, and label the segments, while legend items are appended as groups with rectangles and text elements.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered on the screen. The page uses a CSS class to set the font size to 13em and align the text in the middle. JavaScript is not used in the code, as the page relies purely on static HTML and CSS for its rendering. The styling is defined in a `<style>` block within the `<head>` section, while the content lives in a `<div>` element in the body.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and coloring each point by species (blue, red, or yellow). The visualization is implemented as a reusable D3 module, `scatterPlot`, which uses `scaleLinear` to compute axes and `axisBottom`/`axisLeft` to render them. Data is loaded via `csv` and drawn as SVG circles with white strokes. The chart adapts to the full window size and includes axes labeled with the data values.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris Dataset using D3.js v6, displaying petal length against petal width for three species of iris flowers. The visualization encodes species membership through color, with setosa points in blue, versicolor in red, and virginica in black. The code loads comma-separated data from a GitHub gist, then uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot with labeled axes. The SVG rendering uses `<circle>` elements with a fixed radius, while axis text is styled with a 24-pixel font size for readability.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of the top 10 novelists ranked by their book counts, using React to render SVG marks and D3 scales to map data to positions. The code loads CSV data with `d3.csv`, slices it to 10 entries, and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Blue gridlines and tick labels are generated manually via `.ticks()` and `.domain()`. React state and effects (`useState`, `useEffect`) manage asynchronous data loading and re-rendering.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

A bar chart displays the goals scored by the nine most popular football players, with player names on the y-axis and a blue horizontal bar for each, scaled linearly by goal count. The visualization is built with React and D3, where D3's `scaleBand` and `scaleLinear` compute positions and widths, and React's `useState` and `useEffect` manage asynchronous loading of CSV data via `d3.csv`. Axis ticks and labels are rendered as SVG elements within a translated group.

Loading thumbnail…

forked iris dataset

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length and width on the x- and y-axes while coloring each point by species. It uses D3 v6 with `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct the plot. The code also reads sepal measurements for each datum but does not use them visually. Data loads asynchronously via `d3.csv` from a gist URL, and circles render in SVG with fixed radius, colored blue, red, or black for the three iris species.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to x/y positions while encoding sepal dimensions through circle radius and species via color. It uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG chart. The code assigns fixed radii but also sets non-standard `rx` and `ry` attributes from sepal measurements, creating elliptical marks. The visualization updates dynamically to fill the browser window, with species colored blue, red, or black.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to x/y positions while encoding sepal dimensions through circle radius and species via color. It uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG chart. The code assigns fixed radii but also sets non-standard `rx` and `ry` attributes from sepal measurements, creating elliptical marks. The visualization updates dynamically to fill the browser window, with species colored blue, red, or black.

Loading thumbnail…

Fork of Iris Dataset

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length and width on the x- and y-axes. Each circle’s color encodes the iris species (setosa, versicolor, or virginica). The code uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, loading CSV data via `d3.csv`, and renders SVG circles with attributes for position, radius, and fill.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to x/y positions while encoding sepal dimensions through circle radius and species via color. It uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG chart. The code assigns fixed radii but also sets non-standard `rx` and `ry` attributes from sepal measurements, creating elliptical marks. The visualization updates dynamically to fill the browser window, with species colored blue, red, or black.

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes, with points colored by species (blue for setosa, red for versicolor, black for virginica). It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale coordinates, and render axes. Although the circles are drawn using `selectAll` and `join`, the code also sets non-standard `rx` and `ry` attributes from sepal measurements, though these do not affect the circular shape. The plot fills the entire window and is rendered as SVG.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to x/y positions while encoding sepal dimensions through circle radius and species via color. It uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG chart. The code assigns fixed radii but also sets non-standard `rx` and `ry` attributes from sepal measurements, creating elliptical marks. The visualization updates dynamically to fill the browser window, with species colored blue, red, or black.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

A bar chart displays the top 10 most populous countries in 2019, with country names on the y-axis and population counts on the x-axis. The visualization uses React to structure the SVG output and D3's `scaleBand`, `scaleLinear`, and `csv` to load and map the data. Axes are manually rendered using D3's `ticks()` and SVG elements, with bars drawn as `<rect>` elements scaled by population values.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js version 7. It fetches a remote NBA dataset via `d3.csv` and displays summary statistics about the data, including file size in kilobytes, number of rows, and column count, in a styled HTML page. The visualization also includes an embedded SVG illustration. The code uses D3’s `csvFormat` and `data.columns` to compute these metrics, with results rendered into a `pre` element.