T

Tejucmandava

@Tejucmandava·36 public vizzes

Loading thumbnail…

Fork of Country Map

A fork of a country map visualizes the 50 U.S. states using an SVG projection. It displays landmasses in pink with black state borders, and hovering over a state highlights it in purple. The code fetches geo-data from a TopoJSON URL and uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw features and interior mesh boundaries. React manages the component state and rendering, while D3 handles the data loading and geographic path generation.

Loading thumbnail…

Social Network Graph --> ICE-8

A force-directed social network graph displays nine people as pink circles connected by directed links, with a fixed layout centered in the SVG and uniform node styling. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while d3.drag enables interactive repositioning. Arrows are added via SVG markers, and hover effects change node stroke width. Data comes from a local JSON file with explicit source, target, and relationship fields, rendered using D3 v6 with SVG elements and a simple color scale.

Loading thumbnail…

Fork of Famil Tree

This example shows a family tree visualization built with D3.js v6 and React, rendered as an animated SVG. Nodes represent family members with pink circles and blue strokes, connected by maroon lines that grow into place over a one-second transition. The tree layout is computed using `d3.stratify` and `d3.tree`, with node data hardcoded in the script. Text labels appear with a depth-based delay, and circles expand to their full radius over 800 milliseconds.

Loading thumbnail…

Fork of ICE - 8 Family Tree (Generations) Maanas Katta

This interactive family tree visualizes relationships across multiple generations using animated connections and color-coded nodes that represent generational depth. The D3.js v6 visualization uses `d3.stratify()` to build the hierarchical structure from a flat list of parent-child pairs, while `d3.tree()` computes the layout. Nodes are rendered as lime-stroked circles on a black background, with each generation assigned a distinct color through a custom `setGeneration` function. Paths animate between nodes via chained transitions over 1000 milliseconds, and node labels display names in bold black text.

Loading thumbnail…

Fork of Social Friends

This example renders a small family tree as an animated SVG diagram. Using D3 v6’s `d3.stratify()` and `d3.tree()` layout, it converts a flat array of parent–child relationships into a hierarchical structure. Each person is drawn as a green circle with a bold black label, while lime-colored paths connect parents to children with a 1-second transition that grows each edge from the parent’s position to the child’s. The visualization highlights branching connections among named characters, with all nodes and links animated into place on a black background.

Loading thumbnail…

Fork of Country Map

A fork of a country map visualizes the 50 U.S. states using an SVG projection. It displays landmasses in pink with black state borders, and hovering over a state highlights it in purple. The code fetches geo-data from a TopoJSON URL and uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw features and interior mesh boundaries. React manages the component state and rendering, while D3 handles the data loading and geographic path generation.

Loading thumbnail…

My Family Tree

This interactive family tree visualizes three generations of a family, with each node displaying a person's name and colored circles (fill and stroke) to distinguish branches and levels. Using D3 version 3’s `d3.layout.tree` and `d3.svg.diagonal`, the SVG diagram renders hierarchical connections as curved links, with smooth transitions (`duration`) animating node positions on click. The hierarchical data is hardcoded as a JavaScript array, and clicking a node toggles its children, dynamically updating the tree layout.

Loading thumbnail…

My Family Tree

This visualization displays a family tree as an interactive, collapsible hierarchy using D3.js v3. The tree presents family members as colored rectangular nodes, with each person’s name and type indicated by color-coding (e.g., type1 through type4). The layout uses `d3.layout.tree` to position nodes and links, with SVG rendering for the connections and nodes. Users can click nodes to collapse or expand branches, and the view supports zooming and panning via `d3.behavior.zoom`. The data comes from a local JSON file, and the visualization includes tooltips and animated transitions for node updates.

Loading thumbnail…

Fork of ICE8 - Family Tree

This example displays a family tree as an animated, zoomable node-link diagram, using color-coded rectangles to represent different generations and branches. Built with D3.js v3, it reads hierarchical family data from a JSON file and renders it as an SVG using `d3.layout.tree`. Nodes open and close on click with a smooth transition, while links are drawn with arrow markers and tooltips show additional details. The layout adjusts dynamically to prevent node collisions.

Loading thumbnail…

World Map

This example displays a purple spherical projection of the world with pink country boundaries rendered as SVG paths using D3’s geoEquirectangular projection and geoPath. It loads country geometries from a TopoJSON world-atlas file and converts them to GeoJSON via the topojson feature method. The visualization highlights each country with an orange hover fill, while strokes define national borders.

Loading thumbnail…

Fork of Fork of ICE - 8: Visualizing Tree MAYUa

This example visualizes a hierarchical tree of car companies and their brands, with the root “Car Company” branching into groups like General Motors, Volkswagen, and Stellantis. The code uses D3.js v3’s `d3.layout.tree` and `d3.svg.diagonal` to compute and draw the node-link layout. Nodes appear as white circles with steelblue strokes, connected by orange curved links, and each node’s name is displayed in sans-serif text. SVG rendering and a 750ms animated transition are implemented, with static data defined inline in the script.

Loading thumbnail…

Fork of Fork of ICE - 8: Visualizing Tree MAYUa

This interactive tree visualization maps a branching dataset of names from Song of Ice and Fire, rendering each node as a circular marker linked by orange SVG paths. Users can click nodes to collapse or expand subtrees, with transitions animating nodes between positions over 750 milliseconds. The code uses D3.js version 3.5’s `d3.layout.tree` and `d3.svg.diagonal` to compute the hierarchical layout and draw curved links, while SVG circles and text labels display the tree structure with collapsible behavior.

Loading thumbnail…

Fork of Tree Example

This interactive tree diagram visualizes a hierarchical family tree using D3.js. Users can click on nodes to collapse or expand branches, with smooth animated transitions between states. The visualization uses D3’s tree layout and diagonal path generator to render SVG links, while node positions animate via `transition()` calls. Data is structured as a nested JSON array, and the code employs `d3.layout.tree`, `d3.svg.diagonal`, and event handlers for node toggling.

Loading thumbnail…

Fork of computer tree

This visualization shows a branching tree diagram of computer-related terms in Arabic and English, organized into categories like hardware, software, CPU components, and related terminology. The tree uses collapsible nodes, allowing viewers to expand or collapse sub-branches by clicking. Rendered as an SVG with animation, the layout is built with `d3.layout.tree` and `d3.svg.diagonal` for the curved links. The data is defined as a static JavaScript object, and node positions update with a smooth transition on each interaction.

Loading thumbnail…

Fork of Tree Example

This example shows an interactive tree diagram with expandable and collapsible nodes. The visualization displays hierarchical data, including named nodes like "Swarna Kumari" and "Lakshmi," with clickable circles that toggle child visibility. Built with React and D3.js v3, it uses `d3.layout.tree` to compute positions and `d3.svg.diagonal` for curved links. SVG elements render nodes and text, while transitions animate node and link movement over 750 milliseconds when collapsing or expanding branches.

Loading thumbnail…

Fork of Map with D3.js!

This example displays a world map with countries rendered in green and outlined in black, highlighted in orange on hover. Built with D3.js v5 and TopoJSON, it uses the `geoEquirectangular` projection and `geoPath` to draw the sphere and country boundaries from a world-atlas GeoJSON file. The SVG output includes a static blue ocean background, with interactive hover states defined via CSS.

Loading thumbnail…

Country Map

This interactive map visualizes the fifty United States using a pink fill for each state and black borders, with a hover effect that changes the fill color to purple. Built with React and D3 v5, it renders geographic data as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories` projection. The code loads US state boundaries from a TopoJSON file via `us-atlas@3.0.0`, applying `feature()` and `mesh()` from TopoJSON to extract land polygons and interior borders.

Loading thumbnail…

Fork of ICE 8 country map

This example presents an interactive choropleth map of India, rendered as SVG paths using the Mercator projection. The visualization colors each state based on a categorical scale, with hover effects highlighting regions in orange. Built with D3 v5, the code loads TopoJSON data from a GitHub gist and uses `d3.geoPath` and `d3.geoMercator` for geographic rendering. The implementation leverages `d3.json` for data loading and `d3.schemeCategory10` for color assignment, with CSS controlling the hover interaction.

Loading thumbnail…

Fork of Fork of World Map with D3.js!

This example displays a world map with countries rendered in pink and a purple sphere, using an equirectangular projection to show the entire globe. It uses D3.js v5 and TopoJSON to load geospatial data from the `world-atlas` package, and applies the `geoPath` and `geoEquirectangular` functions to generate SVG paths. Interactive highlighting changes a country’s fill color on hover.

Loading thumbnail…

Fork of World Map with D3.js!

This example renders a world map as an SVG using D3 v5 and TopoJSON. It projects country boundaries from the world-atlas dataset with `geoEquirectangular` and draws them via `geoPath`. The map includes a blue sphere backdrop and green countries that turn orange on hover through CSS. It uses `select`, `json`, and `feature` to load and convert the TopoJSON data into GeoJSON features for display.

Loading thumbnail…

Fork of Fork of Pie Chart

A pie chart displays the premium monthly cost of Netflix subscriptions across various countries, sourced from a CSV file hosted on GitHub. Built with React and rendered using SVG, the visualization uses D3.js v5 APIs including `select`, `csv`, `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the chart and a custom legend. The data is sorted and the top 10 countries are shown, with tooltip logging to the console on mouseover.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the premium monthly cost of Netflix subscriptions across different countries, displaying the top 10 most expensive plans. The chart uses D3 v5’s `pie` and `arc` generators to create SVG segments, with `scaleOrdinal` and `schemeCategory10` for color mapping. Each slice’s fill color corresponds to the cost value, and a legend lists country names with their respective prices in US dollars. Data is loaded asynchronously from a CSV file hosted on GitHub Gist via `d3.csv`, and the render function sorts the data by premium cost before slicing the top ten entries.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, encoding petal width on the x-axis, sepal length on the y-axis, and using distinct SVG symbols for each iris species via `d3.symbol` and `scaleOrdinal`. It is built with a reusable `scatterPlot` function that configures linear scales, axes, and margins, rendering in a full-window SVG. The data is loaded from a remote CSV using `d3.csv`, and marks are drawn as `<path>` elements with `d3.symbol` generators.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example presents the classic Iris Dataset as an interactive scatter plot, mapping petal width on the x-axis and sepal length on the y-axis. Each of the three iris species is encoded with a distinct symbol shape, generated using D3’s `symbol` and `scaleOrdinal` APIs. The chart is built with a reusable `scatterPlot` function in the D3 v3 style, using `csv` for data loading and `axisBottom`/`axisLeft` for the axes. All visual elements are rendered as SVG paths within a full-window viewport.

Loading thumbnail…

Fork of Area Death's

This area chart visualizes average life expectancy after stroke by year, using an orange filled path with a basis curve. The visualization loads CSV data from a GitHub gist and renders in SVG. D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` handle scaling, path generation, and axes. Titles and axis labels are added as SVG text elements with custom styling. The y-axis displays values using a compact format, and the chart includes gridlines via tick sizes.

Loading thumbnail…

Fork of Line_Stroke_Death

This line chart displays the average life expectancy per year, derived from brain stroke data. The SVG visualization uses D3 v5's `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to draw a smooth orange path. Data is loaded from a GitHub gist and mapped with `extent` for scales. The chart includes labeled axes and a rotated y-axis label, with gridlines via tick sizes.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization shows the percentage of the USA population from 1960 to 2020 using a combined line and area chart, with a smooth curve connecting annual data points. The line traces the trend in maroon, while a pink fill highlights the area beneath the curve. Built with D3 v5, the code uses `d3.line`, `d3.area`, and `curveBasis` to generate the smoothed paths, with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes. Data is loaded from a remote CSV via `d3.csv` and rendered into an SVG.

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Area Chart

This area chart visualizes the percentage of US students in universities from 2000 to 2008 using a smooth curve. The visualization combines a black line with an aqua-filled area beneath it, rendered as SVG. The code uses d3.scaleLinear for both axes, d3.line and d3.area generators with curveBasis for smoothing, and d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded from a CSV via d3.csv and parsed by converting numeric fields.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This chart visualizes the number of US university students from 2000 to 2008, using an area chart to emphasize the magnitude of enrollment over the line's trend. The SVG graphic, built with D3 v5, uses `scaleLinear` for both axes and renders the data as a smooth curve via `curveBasis`. The line is drawn with `line()`, while the filled region uses `area()`. Data is loaded from a remote CSV, and axis labels and tick formatting are applied with `axisBottom` and `axisLeft`.

Loading thumbnail…

Fork of Line Chart

This example displays a line chart of U.S. population percentages over time, using red strokes on an SVG canvas with labeled axes for Year and Percentage. The code loads CSV data via `d3.csv`, formats dates with `new Date()`, and scales the axes using `d3.scaleTime` and `d3.scaleLinear`. It renders the line with the `d3.line` generator and adds gridlines through `d3.axisBottom` and `d3.axisLeft` with tick sizes. The visualization is built with D3 v5 and styled through external CSS.

Loading thumbnail…

Fork of Fork of Fork of line chart section 3

This example shows the population percentage change in the USA from 1960 to 2020 as a red line chart over a time-scaled x-axis and linear y-axis, with gridlines and labeled axes for Year and Percentage. The visualization renders as an SVG using D3 v5, with data loaded from a CSV file hosted on GitHub. The code builds the chart using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line, and applies margins to position the plot area within a 900x350 SVG.

Loading thumbnail…

Fork of Fork of line chart section 3

This line chart displays world population totalsales per year from 2013 to 2021, using a red line over a time-scaled x-axis and linear y-axis. The SVG visualization is built with D3 v5, loading CSV data from a GitHub gist, parsing date strings with `d3.timeParse`, and rendering axes and the line path via `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`.

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart shows world population from 1950 to 2020, with years on the x-axis and population on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path, with gridlines and labeled axes. Data is loaded as CSV from a GitHub gist, and the chart includes a title and axis labels styled via external CSS.

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart visualizes world population trends from 1950 to 2020, with time on the x-axis and population count on the y-axis. The chart uses D3 v5 APIs including d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the red path. The SVG rendering includes gridlines, axis labels, and a title, with data sourced from a remote CSV file hosted on GitHub.

Loading thumbnail…

Fork of Fork of Line Chart

This example displays world population over time as a line chart, with time on the x-axis and population on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render the SVG path and axes. Data is loaded from a CSV file using `csv()` and parsed for the visualization. The chart includes labeled axes, a title, and gridlines with tick marks.

Loading thumbnail…

Fork of Line Chart

This visualization displays world population as a line chart, plotting year on the x-axis against percentage on the y-axis with pink stroke highlighting the trend. Built using D3 v5, it loads CSV data from a GitHub gist and employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to generate an SVG path. Gridlines, axis labels, and a title are appended within a margin-based layout.