R

Radhakrishna246

@Radhakrishna246·33 public vizzes

Loading thumbnail…

Social Network graph

A social network graph visualizes connections between seven named individuals, such as NTR, Ramcharan, and Ram, using circles and labeled text for nodes and green lines for links. The force-directed layout, created with d3.layout.force, positions nodes based on gravity, charge, and distance parameters, while link weights control stroke width. Dragging is enabled via force.drag, and node positions update during the tick event. Data loads from a JSON file containing nodes and links, rendered as SVG elements with inline styling.

Loading thumbnail…

Family Tree

This interactive family tree visualizes genealogical connections using a parent-child hierarchy. Built with D3.js v3, it renders the structure as an SVG diagram with rectangular nodes and labeled links, supporting zoom and drag interactions. The data from `family-data.json` is loaded via `d3.json()`, and the layout is computed using `d3.layout.tree()`. Node colors vary by type, and each node includes a link label with directional information.

Loading thumbnail…

Topojson World Map

This example displays a world map in the Natural Earth projection, rendering countries as green polygons with a blue spherical background. It visualizes the topojson-format country boundaries from the world-atlas dataset. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection to generate SVG paths, while the `topojson` library’s `feature` function converts the topojson data into GeoJSON features.

Loading thumbnail…

USA Map Using TOPOJSON Data

A US map displays state boundaries as thin red lines over teal land masses, with a dark sphere background and graticule grid. The visualization uses `d3.geoPath` with a `geoAlbers` projection to render SVG paths from TopoJSON data loaded via `d3.json` from the US Atlas repository. React manages component state and rendering, while `topojson.feature` and `topojson.mesh` extract nation outlines and state interior borders. The map spans 1000 by 600 pixels, showing the contiguous states with visual emphasis on border delineation.

Loading thumbnail…

Fork of Fork of ICE - 7 Reusable Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, with three species of flowers colored red, orange, or white, mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom to generate axes and SVG circles for data points. The reusable scatterPlot function dynamically updates the x-axis value to cycle through additional iris columns, demonstrating modular chart construction. Data is loaded via d3.csv from a GitHub gist.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This scatter plot visualizes the Iris flower dataset, positioning each specimen by its petal width against sepal length with a fixed channel mapping color to species (red for setosa, orange for versicolor, white for virginica). Built with D3 v6, it leverages the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct axes and render SVG circles. The visualization demonstrates a reusable scatter plot module that updates its x-axis mapping cyclically through the dataset’s numeric columns, though the current example only displays one configuration.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width and sepal length with color-coded species (blue, red, yellow). Built using D3 v6, it employs reusable chart components through `scatterPlot()` with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. The SVG renders animated circles with white strokes, while data is loaded via `d3.csv` from a remote URL. Dynamic resizing adapts to the viewport, and commented code shows potential for cycling through different column pairings over time.

Loading thumbnail…

Iphone Sales

This line chart shows iPhone sales from 2015 to 2021, with years on the x-axis and sales numbers on the y-axis. The data is loaded from a CSV file hosted on GitHub Gist using d3.csv. The visualization uses D3 v5 with SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, d3.extent and d3.max to compute domains, and d3.line to generate the path. Grid lines are added via axis ticks, and the chart includes axis labels and a title, all styled with custom CSS classes.

Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length onto x and y axes with circles colored by species (blue, red, yellow). It uses d3.scaleLinear, axisLeft, and axisBottom to render axes, with the data loaded via d3.csv. The reusable scatterPlot function is configured through chainable setters for dimensions, margins, and radius, then invoked with selection.call(plot). The code also cycles through different column combinations for the x-value, demonstrating the plot’s reusability.

Loading thumbnail…

Fork of ICE 7 Area Chart

This chart shows iPhone sales over time, combining a smooth line with a shaded area beneath it to emphasize the trend in annual sales figures. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with a `curveBasis` interpolation. Data is loaded from a CSV file and parsed with `d3.timeParse`, while axes are rendered via `axisLeft` and `axisBottom`. The SVG includes formatted tick labels and rotated axis titles, with the area fill styled in blue and the line in black.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris dataset, plotting petal width against sepal length for individual flowers. The reusable `scatterPlot` module uses D3 scales, axes, and SVG circles to render the data, with colors distinguishing the three iris species. The chart runs inside a full-screen green page, and the axes and circles are drawn with white strokes for contrast on dark backgrounds.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows a pie chart of the top 10 countries by deaths from air pollution in 2020. Each slice is labeled with its death count in thousands, and a legend lists each country with its corresponding value and color. The chart uses d3.pie and d3.arc for slice generation, with d3.scaleOrdinal for colors. Data is loaded as CSV via d3.csv and rendered to SVG elements.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020, displayed as a pie chart with each segment labeled in thousands and accompanied by a color-coded legend. The chart uses D3 v5’s `pie` and `arc` functions to generate the segments, with `scaleOrdinal` assigning colors from a hardcoded array. Data is fetched via `d3.csv` from a GitHub gist, and SVG elements are created using `select`, `append`, and `attr`. Text labels are positioned using `arcGenerator.centroid`, and legends are rendered as grouped rectangles and text elements.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020, displayed as a pie chart with each segment labeled in thousands and accompanied by a color-coded legend. The chart uses D3 v5’s `pie` and `arc` functions to generate the segments, with `scaleOrdinal` assigning colors from a hardcoded array. Data is fetched via `d3.csv` from a GitHub gist, and SVG elements are created using `select`, `append`, and `attr`. Text labels are positioned using `arcGenerator.centroid`, and legends are rendered as grouped rectangles and text elements.

Loading thumbnail…

Fork of Fork of line chart section 3

This example displays car sales data from 2013 to 2021 as a single red line chart. The visualization uses D3 v5 with SVG rendering to plot years on the x-axis and total sales on the y-axis, incorporating linear and time scales. The code loads CSV data from a GitHub gist, then applies d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisLeft/axisBottom to construct the chart with grid lines and axis labels. The data parsing converts string years into date objects using d3.timeParse for proper time-based scaling.

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales data from 2013 to 2021 as a red line chart, with years on the x-axis and total sales on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG. Data is loaded from a CSV file hosted on GitHub, parsed with `csv`, and formatted by converting sales values to numbers and extracting years. Gridlines are drawn via tick sizes, and both axes include custom labels.

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes car sales in India from 2009 to 2019, with the x-axis showing years and the y-axis representing sales figures. The chart uses a red line to depict the trend over time, with grid lines and axis labels styled in a matching color scheme. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` to map data to the SVG canvas, `axisBottom` and `axisLeft` for the axes, and the `line` generator to draw the path. Data is loaded from a CSV file via `csv`.

Loading thumbnail…

ICE-7 PIE Chart

This example shows the sales of various fruits as a D3 pie chart with a corresponding legend. The chart uses d3.csv to load data from a remote GitHub gist, then d3.pie and d3.arc to compute and draw the slices. A d3.scaleOrdinal maps sales values to a hardcoded color palette. The legend displays each fruit name and its sales total formatted with d3.format. The SVG rendering approach is used throughout, with the chart centered and the legend positioned to the right.

Loading thumbnail…

Bar Graph shows Sales of Fruits in USD

This example shows a horizontal bar chart of fruit sales in USD, with bars extending from left to right to compare each fruit’s revenue. The code loads data from an external CSV file and multiplies the sales values by ten during preprocessing, then renders SVG rectangles using D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The visualization is drawn as SVG elements within a fixed 960×500 viewport, with axis labels for “Fruits” and “Sales in USD” added via text elements.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) via a custom color function. The circles also encode sepal length and width as non-visual properties (rx and ry), though only a fixed radius is rendered. Built with D3 v6, the code loads CSV data using `d3.csv`, applies `scaleLinear` and `extent` for scaling, and renders axes via `axisLeft` and `axisBottom`. The SVG canvas fills the window, with a bottom margin accommodating custom axis labels for sepal length.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020, displayed as a pie chart with each segment labeled in thousands and accompanied by a color-coded legend. The chart uses D3 v5’s `pie` and `arc` functions to generate the segments, with `scaleOrdinal` assigning colors from a hardcoded array. Data is fetched via `d3.csv` from a GitHub gist, and SVG elements are created using `select`, `append`, and `attr`. Text labels are positioned using `arcGenerator.centroid`, and legends are rendered as grouped rectangles and text elements.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example visualizes the Iris Dataset using a reusable D3 scatter plot. Points are plotted based on selected flower measurements, cycling through petal width, sepal width, petal length, and sepal length every two seconds with animation. The code uses d3.csv to load data, d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for scales, and d3.selectAll with the join pattern to update SVG circles. Rendering relies on SVG elements and a setInterval-driven refresh to swap the x-value mapping.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris flower dataset across four measurable attributes: petal width, sepal width, petal length, and sepal length. Using D3’s scaleLinear, axisBottom, and axisLeft functions, it renders data points as circles in an SVG canvas, with axes updated every two seconds as the x-axis variable cycles through the dataset columns. The chart is built as a reusable function via a scatterPlot closure, adapting to the browser window’s dimensions and drawing on the CSV data loaded with d3.csv.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example showcases the classic Iris dataset as an animated scatter plot. It cycles through the four numeric columns (petal and sepal measurements) on the x-axis every two seconds, while the y-axis displays sepal length. The visualization uses D3.js v6, specifically leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a custom reusable `scatterPlot` function. It renders as an interactive SVG, with animated axes and circular marks that update as the data mapping changes.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and petal width along the axes while coloring each circle by species (setosa in green, versicolor in orange, and virginica in brown). The chart uses D3 v6 to load CSV data, apply linear scales, and render SVG circles and axes. Though circles are drawn with a fixed radius, the code also reads sepal dimensions, and axis labels indicate petal length and sepal length. The visualization fills the browser window with a minimal margin-based layout.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart ranks fruit sales in descending order along a vertical band scale, with horizontal bars extending proportionally to each fruit’s sales value. The visualization loads data from a CSV file, multiplies the sales figures by 10, and renders the result as an SVG using D3 v7. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles, with fixed margins and a steely-blue fill for all bars.

Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts (household floors and common areas). The data comes from CSV files processed with `d3.group` and `d3.stack`, mapping account numbers to stacked segments per reading date. Rendered in SVG, it uses `scaleBand` for months on the x-axis and `scaleLinear` for kilowatt-hours on the y-axis, with `scaleOrdinal` and `d3.schemeCategory10` assigning colors. Rectangles include hover opacity changes and SVG `<title>` tooltips showing segment amounts. Colors are green and blue, with a title and vertical axis label.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates how to load and parse CSV data using D3.js version 5. It fetches an electric accounts dataset from a GitHub-hosted CSV file and displays basic statistics about the data, including file size in kilobytes, row count, and column count. The implementation uses `d3.csv` to asynchronously retrieve and parse the data, then formats the information with `d3.csvFormat`. The result appears as large text in an HTML `<pre>` element, showing how fetched tabular data can be summarized and presented.

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption across multiple household accounts, broken down by month. It uses `d3.stack` to transform the data into stacked series, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The visualization employs SVG rendering, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and axis generators to label months and kilowatt-hour usage. Tooltips are commented out, but each bar segment includes a `<title>` element showing its kilowatt-hour value.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against petal width for individual flowers, with each species color-coded (setosa in green, versicolor in orange, and virginica in brown). The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to compute scales and render axes, while circles are drawn in SVG via `selectAll` and `join`. The data is fetched as CSV from a GitHub gist and parsed with numeric coercion, with labels for petal length and sepal length added as text elements.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes while coloring each point by species. Built with D3 v6, it renders circles as SVG elements, using `d3.scaleLinear` for coordinate scaling and `d3.axisLeft`/`d3.axisBottom` for axes. The code loads CSV data via `d3.csv`, parses numeric fields, and positions points within a full-window SVG.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries as a horizontal bar chart using React and D3. The code loads CSV data from a GitHub gist, processes the population values, and renders SVG rectangles with scaleBand and scaleLinear for the y and x axes respectively. It manually constructs ticks and gridlines, leveraging React’s state management with useEffect and useState alongside D3’s csv and max functions.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data from a remote URL using D3.js. It displays a dataset about trains and flights, showing the file size, row count, and number of columns in a preformatted text element. The visualization uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` to measure its length. The page includes an ornamental SVG illustration and is built with plain HTML, CSS, and the D3 v7 library.