G

GARIDIDEEKSHITHREDDY

@GARIDIDEEKSHITHREDDY·20 public vizzes

Loading thumbnail…

Social Network graph

This example shows a social network graph of nine people, with blue, purple-outlined circles representing individuals and labeled with their names. The visualization uses a force-directed layout to position the nodes and displays the relationships between them as blue lines, where the line thickness corresponds to the connection weight. Built with D3.js v4, the code loads the network structure from a JSON file and leverages the `d3.forceSimulation` API for the layout physics, along with custom SVG styling for node and link appearance. The implementation creates the graph as an SVG element and supports dragging nodes with the mouse.

Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchical dataset of family members across several generations, with nodes colored by generation and connected by animated green links. Built with D3.js v6, the code uses the `d3.stratify()` utility to structure the parent-child data and `d3.tree()` to compute the layout. Nodes are rendered as SVG circles with a 1.5-second path-drawing transition, while text labels identify each person. Generation colors are assigned via a custom `setGenerations()` switch function, ranging from orange for the root to teal for deeper levels.

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example shows a world map rendered in an SVG using D3 v5, with countries filled in orange and outlined in red against a skyblue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON data from a remote gist into GeoJSON for country boundaries. The visualization loads the world map data asynchronously via `d3.json` and appends each country path to the SVG. The sphere background and country styling are defined in the accompanying CSS.

Loading thumbnail…

Fork of Fork of Country map

This visualization renders a choropleth map of United States territories, using a light orange fill for land areas and a contrasting teal stroke for internal state boundaries. The map is built with React and D3 v5, leveraging the `geoAlbersUsaTerritories` projection and `geoPath` to display geographic features, while TopoJSON’s `feature` and `mesh` functions process the US Atlas dataset. The SVG output is styled via CSS classes, with a separate graticule layer available for reference.

Loading thumbnail…

Fork of ICE-8 world map

This fork of ICE-8 displays a world map with countries rendered as orange shapes outlined in red, set against a sky-blue sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the geographic features from a TopoJSON file loaded via `json()`. The map is rendered as SVG, with each country appended as a path element, while the sphere background is drawn separately. The styling applies low stroke opacity to create a subtle border effect.

Loading thumbnail…

Fork of Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, with points colored by species and animated to cycle through four feature combinations as the x-axis variable changes every few seconds. The visualization uses D3 v6 with a reusable scatterPlot module that relies on scaleLinear, axisLeft, and axisBottom to render SVG axes and circles. Data loads from a CSV via the d3.csv parser, while a setInterval drives the animation, updating the x-axis mapping between petal width, sepal width, petal length, and sepal length.

Loading thumbnail…

Fork of Fork of Pie Chart For Low Income In United States

This visualization shows the distribution of low-income reading scores across U.S. states using a pie chart, with each slice colored and a corresponding legend listing state names and values. The data is loaded from a CSV file via D3’s `csv` method. The chart is rendered in SVG using `d3.pie`, `d3.arc`, and `scaleOrdinal` for coloring, while text labels are positioned with `arc.centroid`. The legend is built with appended rectangles and text elements.

Loading thumbnail…

Fork of Pie Chart For Low Income In United States

This example presents a pie chart visualizing low-income reading scores across U.S. states, with each slice’s size and color representing a state’s value. The chart uses D3 v5 to fetch CSV data from a GitHub gist, then applies `d3.pie` and `d3.arc` to generate and position the slices, while `scaleOrdinal` assigns categorical colors. A legend with colored rectangles and formatted numbers accompanies the SVG rendering, and slice labels are placed using arc centroid calculations.

Loading thumbnail…

Fork of Line chart For Car Sales

This example shows the evolution of car sales from 2013 to 2021 as a red line chart, with a time-scaled x-axis for years and a linear y-axis for sales figures. It uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the path. The SVG rendering includes grid lines and rotated axis labels, with data parsed via d3.timeParse.

Loading thumbnail…

Fork of Area Chart For Car sales

This chart visualizes car sales from 2013 to 2021, combining a smooth line and a filled red area to show sales trends over time. The data is loaded from a CSV file and parsed with `d3.csv` and `d3.timeParse`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, with `d3.line` and `d3.area` generators employing `d3.curveBasis` for smoothing. SVG rendering includes gridlines, axis labels, and formatted tick values using `d3.format`.

Loading thumbnail…

Area Chart For Car sales

This area chart displays car sales from 2013 to 2021, with the x-axis representing years and the y-axis showing sales figures. The chart combines a black line with a red filled area beneath it, using a smooth basis curve to connect the data points. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for the chart elements, and `csv` to load the data from a GitHub gist.

Loading thumbnail…

Line chart For Car Sales

This line chart displays car sales from 2013 to 2021, with time on the x-axis and sales count on the y-axis. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file and parsing dates with `d3.timeParse`. It implements `scaleTime` and `scaleLinear` for axes, and a `line` generator to draw the red trend line. The code adds labeled axes and removes default tick domains, with gridlines shown via `tickSize` on both axes.

Loading thumbnail…

Pie Chart For Low Income In United States

A pie chart visualizes low-income reading levels across U.S. states, with each slice colored by its corresponding value and labeled with the state name and numeric reading. The chart uses D3 v5’s `pie` and `arc` generators to compute segment angles and paths, while `scaleOrdinal` maps data values to a fixed color palette. A legend lists each state with its color swatch and formatted value, and the data is loaded from a CSV via D3’s `csv` function and rendered as SVG elements.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

A pie chart depicts the top ten cricketers by runs scored, with each slice's area proportional to the player's total. It shows each player's name and runs in a legend, using a categorical color palette assigned to the data values. The visualization is created using D3 v5, employing the `d3.pie` function to compute arc segments and `d3.arc` for rendering the SVG paths, with `d3.scaleOrdinal` for color mapping. Data is loaded from a JSON file and rendered inside an SVG element, with legend text and values styled via CSS.

Loading thumbnail…

Reusable Scatter Plot

This example animates the classic Iris dataset in a reusable scatter plot, cycling through four different feature pairs on the x-axis while keeping sepal length fixed on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a custom legend, and the plot updates every few seconds using `setInterval`. Built with D3 v6, it uses `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for scales, and SVG circles for marks. The `scatterPlot` factory function encapsulates the chart’s dimensions, margins, and scales, making the visualization modular and reusable.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries using React and D3 to render marks and channels. It fetches 3D scatter dataset CSV data from a Plotly GitHub repository via `d3.csv`. The code defines two 3D scatter traces, using `scatter3d` plot type with custom marker sizes, colors, and opacity settings, though the actual plotting call references `Plotly.newPlot` without the required DOM element. The dataset contains x1, y1, z1 coordinates for the first series and x2, y2, z2 for the second.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The SVG rendering uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Though the circles include `rx` and `ry` attributes, the visual output remains circular with a fixed radius. Data loads from a GitHub-hosted CSV, and the chart fills the browser window with no explicit legend, relying on orange, purple, and green markers to distinguish species.

Loading thumbnail…

ICE -6

This visualization displays COVID-19 data for ten countries, using a horizontal bar chart where bar length represents each country's population based on latitude values from the CSV data source. The React application uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and renders SVG rectangles with orange stroke styling. D3's csv parser loads the external data, while d3.max computes the domain for the linear scale, and tick marks are generated programmatically with custom grid lines.

Loading thumbnail…

ICE5

This visualization displays a summary of used car data loaded from a remote CSV file, showing its size in kilobytes, row count, and column count. The page also embeds an external SVG image. The code uses the D3.js library, specifically the `d3.csv` function to fetch and parse the data, along with `d3.csvFormat` to calculate the data size. The message is rendered into an HTML `<pre>` element. The visualization utilizes D3 v7 within a React framework, though the displayed content focuses on basic data characteristics.

Loading thumbnail…

Let's make a face with D3.js

This example shows a simple smiley face built with SVG shapes positioned around a central point. The face uses two circles for eyes, a red circle with a black stroke for the head, and a D3-generated arc path for the mouth. The code relies on React for component rendering, while D3’s `arc()` generator defines the mouth’s inner and outer radii and start/end angles. D3’s `select` is imported but not used, and the SVG is rendered directly into the DOM with a fixed 960x500 viewport.