S

SohilaBheemReddy

@SohilaBheemReddy·17 public vizzes

Loading thumbnail…

Social Network

This example visualizes a small social network with seven named people and weighted connections. It uses a force-directed layout via `d3.layout.force` to position nodes and links, rendering them as SVG circles and lines. The thickness of each link corresponds to the `weight` field from the JSON data, and node labels display names. The graph is interactive, allowing nodes to be dragged and repositioned while the simulation updates the layout in response to tick events.

Loading thumbnail…

Family Tree - Colors

This example visualizes a family tree as a set of color-coded nodes, where each generation is represented by a distinct color (orange, yellow, pink, and green) assigned via a custom `setGeneration` function. The tree structure is built using `d3.stratify` and `d3.tree`, with SVG circles for family members and text labels showing their names. Links between generations are drawn as animated paths that transition from the parent to the child node over one second, while circles grow to a radius of 40 pixels upon loading. The rendering uses D3 v6 with SVG and transitions.

Loading thumbnail…

Family Tree

This example shows a family tree with animated connections and labeled circular nodes on a green background. The tree is built from hardcoded parent-child data using `d3.stratify()` and laid out with `d3.tree()`. SVG elements render the visualization, with paths animating from source to target positions via `transition().duration(1000)`, while circles and text labels appear with a shorter transition. The code uses D3 v6 and appends all elements directly to the body.

Loading thumbnail…

Family Tree

A family tree displays ten nodes connected by animated paths, with each circular node labeled by a family member's name. The visualization uses D3 v6's `d3.stratify()` to build a hierarchy from flat parent-child data, followed by `d3.tree()` to compute node positions. SVG circles and text elements are rendered on a black background, with lime-green strokes and light-green fills. Paths between nodes animate from zero length to full connections over one second, while circles expand over 800 milliseconds, creating a sequential reveal of the hierarchical relationships.

Loading thumbnail…

ICE - 8 Making Maps Country

This visualization displays the United States as a single violet country shape on a green background, rendered using an SVG path. It loads world map data from the World Atlas TopoJSON file and uses `d3.geoAlbersUsa` with `d3.geoPath` to project and generate the path. The topojson `feature` method extracts country boundaries, then filters the data to keep only the United States before appending it to the SVG.

Loading thumbnail…

World

This example displays a static world map of all countries using a natural Earth projection. The visualization fetches geographic data from the world-atlas TopoJSON dataset and renders each country as a violet SVG path with black strokes on a green background. The code employs d3.json to load the data, d3.geoNaturalEarth1 for the projection, and d3.geoPath to generate the SVG paths. The topojson.feature method extracts the country geometries from the TopoJSON structure before binding them to the SVG elements.

Loading thumbnail…

Fork of Fork of Line_chart_Tik-Tok_users

This line chart shows TikTok's annual user growth from 2013 to 2022. The visualization uses D3 v5 to render an SVG, scaling time-based year data on the x-axis and user counts on the y-axis with d3.scaleTime and d3.scaleLinear. Data is loaded from a CSV via d3.csv and parsed into Date objects. The chart includes grid lines, axis labels, and a title, with the line path generated using d3.line.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different Iris flower measurements on the x-axis, using petal and sepal dimensions from the classic Iris dataset. The visualization uses D3 v6 to render colored circles for each species, with blue, orange, and green representing setosa, versicolor, and virginica. The plot rotates through four variable combinations at intervals, updating axis labels and titles accordingly. D3's scaleLinear, axisLeft, and axisBottom functions handle scaling and axis generation, while the data loading and SVG rendering are managed through d3.csv and the select API.

Loading thumbnail…

Scatter_plot iris

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width for each sample and coloring points by species (green for setosa, purple for versicolor, red for virginica). It uses D3 v6 with `d3.csv` to load the data, `scaleLinear` for x and y axes, and `axisLeft` and `axisBottom` to render scales. Circles are drawn in SVG with `join('circle')`, and additional sepal dimensions are encoded in the attributes, though the primary visual encoding focuses on petal measurements.

Loading thumbnail…

Iris_scatter_plot

This visualization presents the classic Iris dataset as an interactive scatter plot, mapping petal length and width along the x- and y-axes. Each circle represents a flower, colored by species (green for setosa, purple for versicolor, red for virginica) using a custom marker function. Built with D3 v6, the code loads CSV data via `d3.csv`, scales positions with `scaleLinear`, and renders SVG circles using data joins. Axis labels display sepal length and petal width, while the plot dynamically sizes to the browser window. The example demonstrates fundamental D3 data binding and axis generation.

Loading thumbnail…

Fork of Line_chart_facebook_users

This line chart displays the population of Mumbai over time, with the year on the x-axis and population count on the y-axis. The visualization uses d3.csv to load the dataset and d3.scaleTime, d3.scaleLinear, and d3.line to generate the path. The chart renders as an SVG, featuring styled axes with tick marks, axis labels, a title, and a thick blue line. The code also customizes fonts and colors through CSS, and the data is sourced from a GitHub Gist.

Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

This chart displays Facebook annual users from 2008 to 2017 using both a black line and a pink filled area to emphasize the growth trend. The x-axis shows years and the y-axis shows user counts, with a green tick label style and orange grid lines. The visualization uses d3.csv to load remote data, d3.scaleLinear for both axes, and d3.line and d3.area generators with d3.curveBasis to create the smooth combined line and area paths. SVG rendering with custom margins and axis labels is implemented via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of Scatter Plot Using Iris Data

A scatter plot of the Iris dataset maps petal length and width for individual flowers, coloring each point green, purple, or red based on species. The visualization uses D3 v6 methods including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to set scales and axes, with circles rendered as SVG markers. Data loads from a remote CSV via `d3.csv`, and the plot fills the browser window by dynamically sizing the SVG to `window.innerWidth` and `window.innerHeight`. Axis labels clarify the mapped variables, while raw sepal dimensions are included in the data model but not plotted.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths attributed to air pollution in 2020. It uses d3.pie and d3.arc to generate the chart segments, with d3.scaleOrdinal assigning colors from a predefined array. The chart displays death counts in thousands on each slice and includes a legend listing country names and values. Data is loaded asynchronously via d3.csv from a GitHub gist, and the SVG is rendered with D3 v5.

Loading thumbnail…

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

This example shows a horizontal bar chart displaying subject marks from a CSV file, with subjects on the y-axis and marks on the x-axis. Built with D3.js v7, it loads data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, using `d3.axisLeft` and `d3.axisBottom` for labeled axes with rotated text.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork of the Iris dataset scatter plot maps petal length and petal width to the x and y axes, with each circle’s fill color indicating the species: green for setosa, purple for versicolor, and orange for virginica. The code also binds sepal length and width values to each circle’s rx and ry attributes, though the circles render as uniform points due to the fixed radius. Built with D3 v6, it loads CSV data via d3.csv, uses scaleLinear and extent for scales, and renders axes with axisLeft and axisBottom in an SVG.

Loading thumbnail…

Fork of 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 version 7, displaying the dataset's size, row count, and column count as text. The code calls `d3.csv()` to fetch and parse the data, then uses `d3.csvFormat()` to calculate the total size, and accesses the `length` and `columns` properties. The page also includes a decorative SVG illustration and a custom heading, with the parsed information rendered inside a `<pre>` element.