K

kollirohit2000

@kollirohit2000·23 public vizzes

Loading thumbnail…

ICE-8 (Social Network Graph)

This example shows a social network graph with nine nodes representing names like Aero, MK, and Hollister, connected by curved links. Node size and color vary based on the number of connections, using the `d3.interpolateBlues` scale. The visualization uses `d3.forceSimulation` with link, charge, and centering forces to position the nodes, and renders everything as SVG elements. Links are drawn as curved paths, with green solid strokes for active connections and black dashed strokes for weaker ones. Users can drag nodes to reposition them, which the force simulation responds to in real time.

Loading thumbnail…

Tree

This example shows a family tree with a root node, two main branches, and multiple levels of descendants. Each node is labeled with a name, and the text color matches the color property stored in the data.json file. The tree layout uses d3.tree() and d3.hierarchy() to compute positions, while d3.linkHorizontal() draws the curved connecting paths. The visualization is rendered as SVG, supports zooming via d3.zoom(), and uses font size based on node depth.

Loading thumbnail…

Fork of ICE-8 (Social Network Graph)

This interactive network graph visualizes a small social network of nine individuals, with green links showing connections and node size and color indicating degree centrality. The force-directed layout, driven by d3.forceSimulation with link, center, and many-body forces, positions nodes while the drag interaction allows users to manually reposition them. Implemented in D3 v5 with SVG rendering, the example uses custom link paths with quadratic Bézier curves and node labels via standard text elements.

Loading thumbnail…

Fork of ICE-8 state map

This visualization displays the state boundaries of Andhra Pradesh, India, using a Mercator projection rendered as SVG paths. The map is built with React and D3 v5, where topojson features are converted to GeoJSON for rendering via `d3.geoPath`. District interiors are highlighted in violet, and individual states change to red on hover. The data originates from a GitHub-hosted TopoJSON file of Indian district boundaries, loaded asynchronously through `d3.json`.

Loading thumbnail…

ICE 8 Geo Map

This example displays a world map using a natural Earth projection, with countries rendered as filled SVG paths and a purple sphere background. It loads geographic data from the World Atlas TopoJSON dataset, converting it to GeoJSON features via `topojson.feature`. The visualization applies `d3.geoPath` with a `d3.geoNaturalEarth1` projection to draw the rendered paths, while CSS styles control the fill and stroke appearance of each country.

Loading thumbnail…

Fork of Fork of ICE8 World Map

This fork of an ICE8 world map displays country boundaries using a natural Earth projection. The visualization renders a static SVG map, loading geographic data from a Gist-hosted ICE7.json file. The code employs D3 v5’s `geoPath` and `geoNaturalEarth1` for map generation, alongside the `feature` function from topojson to extract country polygons. The map features a light blue sphere background, with countries filled in teal and outlined with faint red strokes, all presented within a fixed 960×500 viewport.

Loading thumbnail…

Fork of Bonus ICE

This example shows a 3D scatter plot of the Palmer Penguins dataset, mapping body mass, culmen length, and flipper length on the x, y, and z axes. Points are colored by species using a custom color scale. It loads the CSV data via `d3.csv`, then builds a `scatter3d` trace with Plotly.js, styling markers and colored axis backgrounds. Rendering is WebGL-based, and the plot is drawn into a div using `Plotly.newPlot`.

Loading thumbnail…

Fork of Interactive 3D Bar chart

This example shows a three-dimensional, stacked bar chart comparing team sizes across seven IT firms, with employee counts for six departments. The chart renders in a browser using the Highcharts library with its 3D extension, enabling a perspective view through set alpha, beta, and depth parameters. The code assigns distinct colors to each data point and uses stacked series groups to represent the departments, with categories on the x-axis, employee counts on the y-axis, and department labels on the z-axis. All chart configuration and data are defined inside a jQuery callback.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This 3D bar chart visualizes download counts for seven popular applications, including Instagram, Facebook, and WhatsApp, across six digital distribution platforms. Built with the Highcharts library and its highcharts-3d module, the chart renders vertical columns with an isometric perspective using configurable 3D options like alpha, beta, and depth. Each series represents a distinct source—such as App Store, Playstore, or Softonic—with data supplied as coordinate pairs. The chart groups columns by application category, stacking values per source to compare total downloads across platforms.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that displays a static text message in the browser. The page renders the phrase “Hello D3 version 7” in large, centered typography using basic HTML and CSS styling. The code imports the `select` function from the D3 v7 library and applies it to the body element to set its text content. The visualization is initialized by loading D3 from a CDN, with the main JavaScript logic contained in an external bundle file.

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, encoding species with distinct shapes and colors. A D3.js v6 reusable chart component dynamically cycles through four measurement columns, updating the x-axis every ten seconds with animation. The SVG rendering includes axes and repositions data points based on the selected attribute, demonstrating a modular approach to building configurable visualizations.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, displaying petal width against sepal length. Points are colored and shaped according to the species of each iris flower. The visualization is built using D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions to map data values to coordinates and symbol types. The `scatterPlot` module defines a reusable chart function that generates SVG paths for each data point, along with axis elements created via `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of Pie Chart

This example visualizes the basic cost of Netflix subscriptions across ten countries using a pie chart, sorted in descending order and rendered as SVG. The chart displays each country’s cost as a colored slice, with a legend listing country names and their corresponding dollar amounts. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to load data from a GitHub gist. Mouseover events log slice values to the console, while legends are manually appended to the SVG.

Loading thumbnail…

Fork of Area Death's

This area chart depicts average life expectancy over time, with a title reading “Death By stroke,” using data from a CSV file. D3 v5 constructs time and linear scales, generates a basis-curved area path via `d3.area`, and renders SVG axes through `axisBottom` and `axisLeft`. The visualization includes custom axis labels and a red title, with orange fill for the area. Data is loaded asynchronously using `d3.csv` from a GitHub gist, and the chart is sized to the SVG’s width and height attributes.

Loading thumbnail…

Fork of Line_Stroke_Death

This example displays a line chart of average life expectancy over time, with yearly values plotted along the x-axis and the corresponding life expectancy on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth interpolation. Data is loaded from a CSV file containing stroke-related statistics, and axes are annotated with labels and a title. The line is styled as a thick orange stroke within a margin-based layout.

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable D3 scatter plot visualizes the Iris Dataset, mapping petal width and sepal length for different iris species. Each species is represented by a distinct symbol from d3.symbols, including circles, crosses, and diamonds. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal for symbol mapping, and d3.axisBottom/axisLeft for ticks. An SVG renderer displays the points, with margins and a fixed symbol size configured through a reusable chart function.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with each point colored by species (setosa, versicolor, virginica) via a custom marker function. It loads the CSV data using `d3.csv`, scales the x- and y-axes with `scaleLinear` and `extent`, and renders circles onto an SVG canvas. Axis labels are added using `axisLeft` and `axisBottom`, while text elements styled with Times font annotate the plot. The visualization uses D3 version 6 and fills the entire browser window, adapting its dimensions to the viewport.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (blue, yellow, red). The visualization uses d3.csv to load data, d3.scaleLinear for axes, and D3’s selection joins to render SVG circles with petal dimensions. Axis labels are added via D3’s axisBottom and axisLeft, with text rotated for the y-axis. The chart also encodes sepal length and width as the rx and ry attributes of each circle.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for the x- and y-axes while encoding species with blue, yellow, and red markers. Data is loaded via `d3.csv` from a GitHub gist, and each point’s size is additionally modulated by sepal dimensions through the `rx` and `ry` attributes. Built with React and D3 v6, the chart uses `select`, `scaleLinear`, and `extent` to position circles via an SVG `join` operation, with axes rendered by `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This example shows the top 10 Amazon Prime Video Basic plan prices across different states, rendered as a horizontal bar chart using React and D3 v5. It loads CSV data from a GitHub gist and manages the data asynchronously with React’s `useState` and `useEffect` hooks. The chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and draws green `<rect>` elements within an SVG. Axis ticks and labels are manually generated via D3’s `ticks()` and array mapping, rather than using `axisLeft` or `axisBottom` helpers.

Loading thumbnail…

Fork of Fork of ICE-6 Bar Graph

This bar chart visualizes Amazon Prime’s monthly basic cost across twelve countries, retrieved from a CSV file. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map country names to horizontal bars and cost values to widths. The SVG rendering includes custom gridlines and axis ticks generated via `xScale.ticks()`, while the data is loaded asynchronously with `csv()` and sliced to the first twelve rows.

Loading thumbnail…

ICE 5

This example displays a static data visualization titled “ICE 5,” rendered as an SVG image within an HTML page. It uses a rect element filled with a pattern that references an embedded base64-encoded PNG image, creating the visual content. The page includes D3.js v7 via a CDN link, though the code primarily relies on raw SVG and CSS for rendering. The background is light gray, and the image is positioned and scaled using pattern content units with specific translation and scaling transformations. No interactive or dynamic behaviors are implemented; it is a purely static image presentation.

Loading thumbnail…

Buddha in Colors - Overlapping Buddha

The visualization displays a serene Buddha image overlaid with hundreds of semi-transparent, randomly colored and positioned circles that create a vibrant, overlapping pattern. Built with React and rendered as SVG, the code generates a dense array of circular elements, each with randomized coordinates and RGB color values. The underlying Buddha portrait is embedded as a static image, while the dynamic circle layer adds a colorful, abstract texture across the entire composition.