Saivignesh-9176

@Saivignesh-9176·30 public vizzes

ice8 -Tree

This interactive tree diagram visualizes a hierarchical dataset, with nodes representing names and animated connections showing parent-child relationships. Clicking a node toggles the expansion or collapse of its children, smoothly transitioning the layout. Built with d3.layout.tree, it uses d3.svg.diagonal for curved links and d3.json to load the external qn_tree.json file. The SVG rendering includes a fixed-depth normalization, orange node strokes, and semi-transparent links, with all nodes positioned based on their depth in the hierarchy.

Mar 30, 2023

Loading thumbnail…

network - ICE8

This example shows a force-directed network of Tom Hanks’ film connections, with nodes for actors, directors, and movies, colored by group and linked by “Acted in” or “Directed” relationships. The graph loads JSON data and runs a D3 v6 simulation using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, rendered as SVG circles and lines. Node dragging is enabled via `d3.drag`, and each link includes a marker arrow, though relationship labels are attempted on paths but not fully implemented in the final layout.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Force Network

A force-directed network graph shows relationships between films, actors, and directors derived from a dataset of Tom Hanks films. The visualization uses a `d3.forceSimulation` to position nodes and links, with node colors reflecting the group membership from the JSON data. Actors, directors, and films are depicted as circles, while links are labeled with truncated relationship text. The simulation incorporates `forceCenter`, `forceLink`, and `forceCollide` forces, and nodes are interactive via `d3.drag`. The graph is rendered as SVG using D3 v6.

Mar 30, 2023

Loading thumbnail…

Fork of ice8

This fork of ice8 displays an interactive family tree from a JSON dataset, rendered as a collapsible hierarchy of circles and labels. Clicking a node toggles its children, animating the layout with smooth transitions. The visualization uses d3.layout.tree and d3.svg.diagonal to position and draw links, with SVG elements styled via CSS. Data loads from an external qn_tree.json file, and node expansion/collapse is handled through custom click events and update functions.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe visualizes world countries using an orthographic projection, with a graticule overlay for spatial reference. Users can drag to rotate the globe via `d3.drag` and zoom using `d3.zoom`. Clicking a country switches the projection: selecting the United States triggers a `d3.geoMercator` view, while any other country reverts to `d3.geoOrthographic`. Country boundaries are rendered as SVG paths from TopoJSON world-atlas data, with names loaded from a TSV file and colors applied via CSS hover states.

Mar 30, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup: a blank page that renders the text "Hello D3 version 7" in large type at the center of the viewport. The code uses `d3.select` to target the `body` element and sets its text content directly. It loads D3 v7.8.2 from a CDN via a script tag, with a separate external script for the application logic, and styles the output with basic CSS for font size and alignment.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe visualization displays world countries on an orthographic projection, rendered as SVG paths using d3.geoPath. Users can drag to rotate the globe, revealing different regions, and click any country to switch between orthographic and Mercator projections; clicking the United States selects the Mercator view. The map includes a graticule overlay and supports zooming via d3.zoom. Country boundaries come from the World Atlas TopoJSON dataset, with names mapped from TSV data. The visualization uses d3-drag for rotation, d3.geoProjection for map projections, and transitions for smooth projection changes.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

Mar 30, 2023

Loading thumbnail…

ice8

A collapsible tree diagram visualizes hierarchical family relationships, rendering nodes and links as an animated SVG. The example uses D3.js version 3.5 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved paths. Circles and text labels represent individuals, and clicking a node toggles its children’s visibility with smooth transitions. Styling is applied via external CSS, and the input data comes from a local `qn_tree.json` file.

Mar 30, 2023

Loading thumbnail…

Fork of Tree-diagram_ice8

This interactive map of the world displays country outlines that can be clicked to switch between different map projections, including a mercator and an orthographic view. The visualization uses `d3.geoPath` to render geographic features and supports rotation via a custom `d3.drag` interaction. It loads geographic data from a world-atlas TopoJSON file and a TSV file for country names, with animated transitions between projections. The map also incorporates zoom functionality, though its implementation is not detailed in the code.

Mar 30, 2023

Loading thumbnail…

Tree-diagram_ice8

This interactive world map renders country boundaries using D3’s `d3.geoPath` with topojson data from world-atlas. Users can click any country to switch between orthographic and Mercator projections, while dragging rotates the globe. The visualization also supports zooming via `d3.zoom` and includes a graticule overlay. Country names are loaded from a TSV file, and hover effects highlight individual nations.

Mar 30, 2023

Loading thumbnail…

tree diagram

This interactive globe displays world country boundaries using a draggable and zoomable orthographic projection. Built with D3.js and TopoJSON, it loads country data from the world-atlas package and renders it as SVG paths via `d3.geoPath`. Users can click individual countries to switch between orthographic and Mercator projections, with a special case for the United States using `d3.geoAlbersUsa`. The visualization includes a graticule overlay and smooth 750ms transitions when updating, demonstrating dynamic geographic data exploration.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

Mar 30, 2023

Loading thumbnail…

Fork of ICE-8 INDIA

A map of India visualizes its districts and state boundaries, rendered as SVG paths and dynamically colored by state using a categorical color scale. The visualization supports mouse-driven rotation of an orthographic projection, which updates the map paths in real-time. It also offers an interactive zoom function. The implementation uses d3.geoPath, d3.geoMercator, and d3.geoOrthographic, with TopoJSON data from GitHub sources. Hovering over a district reveals a tooltip with the district and state name.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive globe shows world countries on an orthographic projection, letting the user drag to rotate the sphere, zoom with the scroll wheel, and click individual countries. Clicking the United States switches the projection to a Mercator map, while clicking any other country returns to the orthographic view. Built with D3.js and the topojson library, it uses `d3.geoPath` with dynamic `d3.geoProjection` rotation to render SVG paths from the world-atlas TopoJSON dataset, and `d3.drag` and `d3.zoom` handle the input gestures.

Mar 30, 2023

Loading thumbnail…

ICE-8 INDIA

This interactive visualization displays a globe, defaulting to an orthographic projection, with geographic boundaries for countries and graticules. Users can drag to rotate the globe, which updates the paths for countries and the graticule via `d3.geoPath` and the projection’s `rotate` method. Clicking a country switches the projection, such as to a mercator view, and applies transitions. The map uses `d3.geoOrthographic`, `d3.geoMercator`, `d3.drag`, `d3.zoom`, and data from `world-atlas` and a TSV file for country names.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of ice8-vignesh

This interactive globe visualization displays world countries using orthographic and Mercator projections, rendered with SVG paths via d3.geoPath. Users can drag to rotate the globe, which adjusts the projection rotation dynamically, and zoom through d3.zoom. Clicking a country switches projections: selecting the United States triggers a transition to the Mercator projection, while other countries return to orthographic view. The map uses World Atlas TopoJSON data for country boundaries and TSV data for country names, with graticule lines drawn using d3.geoGraticule.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of ice8-vignesh

Mar 30, 2023

Loading thumbnail…

Fork of ice8-vignesh

This interactive map displays world countries rendered as SVG paths using a globe-like orthographic projection that users can drag to rotate. Clicking a country switches between projections: selecting the United States activates the Mercator projection, while clicking any other country returns to the orthographic view. The visualization uses D3.js with d3-geo-projection, d3.geoPath for geographic path generation, and topojson to load world atlas data. Country names come from a TSV file, while geographic boundaries are sourced from a TopoJSON file. Additional interactions include zooming via d3.zoom and smooth transitions between projections.

Mar 29, 2023

Loading thumbnail…

IC8_VIGNESH

This example visualizes the Iris Dataset using a reusable scatter plot, mapping petal width and sepal length on the x and y axes while symbol shapes encode species. The SVG renderer uses d3’s scaleLinear for axes, scaleOrdinal to assign different symbols from d3.symbol, and axisLeft and axisBottom for ticks. Generated with d3.v6 and the code structure inspired by the reusable charts pattern, the plot fills the browser viewport with 100-pixel symbols and styled tick text.

Mar 29, 2023

Loading thumbnail…

Fork of ice8

This example displays a geographic map of the world using the D3.js library, with the visualization rendered as an SVG element. The map is created using the `d3.geoPath` and `d3.geoProjection` features, specifically leveraging the `d3-geo-projection.v3` extension for custom map projections. The code loads geographic data via TopoJSON and utilizes D3’s projection functions to transform coordinates. The page is styled with CSS and incorporates both the D3 core and TopoJSON libraries, demonstrating a static yet interactive-ready map visualization within an HTML document.

Mar 29, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length. Each species of iris is represented by a distinct symbol, as determined by the `symbolValue` function. The visualization is built with D3.js, using the `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbols` APIs. Data is loaded from a remote CSV file, and the plot is rendered as an SVG element, sized to fill the browser window. Axes and marks are generated via D3's join operation.

Mar 13, 2023

Loading thumbnail…

ICE-7 PieChart

This pie chart shows the top billionaires in the world and their net worth in billions of U.S. dollars, using a dataset from a GitHub-hosted CSV file. Each slice is labeled with its dollar value, and a legend lists billionaire names alongside their corresponding worth. The chart is built with D3 v6 and rendered as an SVG, using the `d3.pie` and `d3.arc` generators to compute and draw the sections. Colors are assigned via `d3.scaleOrdinal`, and the visualization includes formatted numeric labels and a custom legend.

Mar 13, 2023

Loading thumbnail…

ICE-7 PieChart

This pie chart visualizes the net worth in billions of the world's richest individuals, sourced from a CSV file hosted on GitHub. It uses D3's pie, arc, and scaleOrdinal functions to generate the chart's slices and assign colors, with data labels showing values, and a legend identifying each person by name and worth. The chart is rendered as an SVG.

Mar 13, 2023

Loading thumbnail…

Ic_7 pie chart

This pie chart shows the distribution of 2022 U.S. auto sales by brand, with each slice colored and accompanied by a legend displaying the brand name, its percentage of total sales, and the sales figure in thousands. The data is loaded from a CSV file via `d3.csv` (imported through the `getData` helper) and rendered as SVG using D3 v5. Slices are generated with `d3.pie` and `d3.arc`, while `scaleOrdinal` assigns the color palette. Legends are constructed manually with appended `rect` and `text` elements, formatting percentages and values with `d3.format`.

Mar 13, 2023

Loading thumbnail…

Fork of ic_7 pie chart

This pie chart visualizes the top 10 countries by deaths in 2020 due to air pollution. Each slice is labeled with the death count in thousands, and a legend on the right pairs each country with its corresponding color and value. The chart is built using D3.js v5, fetching CSV data from a GitHub gist. It employs D3’s `pie`, `arc`, `scaleOrdinal`, and `format` APIs to generate the SVG arcs, centroids, and formatted text labels.

Mar 13, 2023

Loading thumbnail…

ic_7 pie chart

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using a CSV dataset fetched via D3’s `csv` loader. The chart displays each country’s death count in thousands as labeled slices, with a legend showing country names and values. The code uses `d3.pie` and `d3.arc` to generate the segments, `scaleOrdinal` for the color mapping, and renders all elements as SVG. Text labels are positioned with `arc.centroid`, and the legend is built using manual SVG group transformations.

Mar 13, 2023

Loading thumbnail…

Reusable scatter plot with different symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species with different SVG symbols. The code uses D3 version 6’s `csv` loader and `select` method to fetch and render the data, while a custom `scatterPlot` function encapsulates the chart’s configuration. The plot is drawn as an SVG with dynamic sizing based on the viewport, and symbol shapes differentiate the three species. The implementation highlights a modular, reusable approach to building charts with D3.

Mar 13, 2023

Loading thumbnail…

IC-7

This example visualizes the classic Iris flower dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. It uses D3 scales and axes to render the chart, with semi-transparent circles representing individual data points. The code demonstrates a decoupled React and D3 architecture, where D3 handles the SVG rendering and React manages the component lifecycle. It uses `d3.csv` for data loading, `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` for the axes.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This interactive visualization displays a smiling face built with SVG shapes, whose eyebrows slide upward and then return in a repeated motion. The code uses D3.js v5 to select the SVG canvas, compute dimensions, and append a green circle as the head, along with eyes, rectangular eyebrows, and an arc-based mouth. D3’s `transition()` and `duration()` methods drive the eyebrow animation, while `select` and `arc` are explicitly imported from the library. The example demonstrates fundamental DOM manipulation and chained transitions in a minimalist, animated composition.

Feb 23, 2023