sivamani

@Shivamaninaidu·27 public vizzes

FORK OF ICE 08 - WORLD MAP

This visualization displays a world map using an azimuthal equal-area projection, rendered as SVG paths. It draws a cyan sphere backdrop and brown country polygons with white borders, sourced from the world-atlas TopoJSON dataset. The code uses `d3.geoPath` with the projection, `d3.json` to load country features, and TopoJSON’s `feature` API to convert topology into GeoJSON for rendering.

Mar 29, 2023

Loading thumbnail…

FORK OF CHINA MAP

This example visualizes the provinces of China as a choropleth map, with each region filled in blue and outlined in yellow, rendered as an SVG graphic. The map uses the `geoEquirectangular` projection and `geoPath` to draw geographic features from TopoJSON data, with `scaleOrdinal` and `schemeCategory10` for color encoding. Interactive zooming is enabled through D3’s `zoom` function, applied to the entire SVG container.

Mar 29, 2023

Loading thumbnail…

Fork of visualizing the China map

This example displays a map of China’s administrative divisions, rendered as a single green SVG path with a teal outline. It loads GeoJSON data converted from TopoJSON via `topojson.feature` and `topojson.presimplify`, then projects it using `d3.geoMercator` and draws it with `d3.geoPath`. The map refits to the SVG container on window resize, and a custom `d3.geoTransform` applies simplification based on a threshold during rendering.

Mar 29, 2023

Loading thumbnail…

Tree chart for Equus asinus species

This tree chart visualizes the evolutionary relationships within the Equus asinus species network, starting from the ancestral Dinohippus node and branching into Horse, Donkey, and Zebra subgroups with their respective subspecies. The visualization uses D3.js v5 hierarchy and tree layout APIs to compute node positions, with SVG paths connecting parent and child nodes. Node styling reflects data attributes, where circle fill colors indicate the node's level, stroke colors denote node type, and link colors correspond to parent-child connections. The rendered SVG uses cubic Bézier curves for the tree branches, with each circle's radius scaled proportionally to its data value.

Mar 29, 2023

Loading thumbnail…

Fork of Tree chart for cat species

This visualization shows a phylogenetic-style tree diagram for cat species, tracing evolutionary branches from a central root (Dinohippus) through families like Felinae and Panthera down to individual species such as Cheetah, Cougar, and Andean Cat. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, with SVG rendered paths styled via the `level` and `type` data properties. Node circles use a static radius of 9 from the value field, and text labels are positioned relative to each node’s data values.

Mar 29, 2023

Loading thumbnail…

FORK OF ICE 08

A family tree renders as an animated SVG, with pink circles as nodes and blue-violet paths as links, built from an array of child-parent pairs. The code constructs a tree via `d3.stratify()` and `d3.tree()`, then animates node radius and link paths using D3 transitions over 800-1000ms. Text labels display each child’s name. The visualization uses D3 v6, rendering directly to the SVG canvas with a papayawhip background.

Mar 28, 2023

Loading thumbnail…

Fork of Fork of ICE - 8 Family Tree Maanas Katta

A family tree visualization displays a network of named characters, with nodes connected by branching paths. The D3.js code uses the `stratify()` utility to build a hierarchical tree structure from parent-child data pairs. SVG circles render the nodes, and animated path transitions draw green connections between them. The visualization initializes each entry with a static position before animating both the edges and the circular nodes, which expand to reveal 40-pixel radius markers labeled with character names.

Mar 28, 2023

Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example displays a choropleth map of U.S. states, each filled with a distinct categorical color and labeled with its name at the geographic centroid. The visualization uses d3.geoAlbersUsa for projection and d3.geoPath to render state boundaries from TopoJSON data loaded from us-atlas. A d3.scaleOrdinal with schemeCategory10 supplies the fill colors, and hover interactions turn states red via CSS. State names are appended as SVG text elements positioned by d3.geoPath.centroid.

Mar 28, 2023

Loading thumbnail…

Fork of Japan Map

This example displays a choropleth map of Japan’s prefectures, rendered as SVG paths with a uniform orange fill and white strokes. The code loads TopoJSON data twice via `d3.json` and uses `topojson.feature` to extract administrative boundaries. A `d3.geoMercator` projection with `d3.geoPath` draws the geography, while `d3.scaleOrdinal` and `schemeCategory10` are available for potential color encoding. The map supports pan and zoom through `d3.zoom`, transforming a grouped `<g>` element.

Mar 28, 2023

Loading thumbnail…

Fork of ICE-8 Q 1.2

This example displays a choropleth map of India, using color to differentiate each state. The visualization is rendered as SVG paths generated with `d3.geoPath` and a `geoMercator` projection, with state names placed at each region’s centroid. It loads TopoJSON data from a GitHub gist, processes it with the `topojson.feature` API, and colors states using `d3.scaleOrdinal` and `d3.schemeCategory10`. The map also includes hover styling through CSS, turning states white when moused over.

Mar 28, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-07 Area Chart

This area chart visualizes the selling price of Fortuner cars across different years, using a yellow-filled area beneath a black line to highlight price trends over time. The visualization is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to generate smooth paths in an SVG. Data is loaded from a CSV file, with years mapped to the x-axis and selling prices to the y-axis.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of ICE-07 Area Chart

This area chart visualizes the selling price of Toyota Fortuner cars across different years. The chart uses D3 v5 to render an SVG with both a smooth black line and a yellow filled area beneath it, with blue axis labels. Data is loaded from a CSV file, and scales include `scaleTime` for the year axis and `scaleLinear` for price. The line and area generators apply `curveBasis` for smoothing, while axes are created with `axisBottom` and `axisLeft`.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

A D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Data points use different symbols and colors (yellow, aqua, red) to distinguish iris species. The reusable `scatterPlot` component builds linear scales, ordinal symbol and color scales, and renders SVG paths with an axis. It loads CSV data via `d3.csv` and parses numeric fields, with the plot sized to the full window.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of ICE-7 Reusable scatter plot with different symbol

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Each data point is rendered as a distinct symbol, with colors corresponding to the species of iris. The plot, implemented with D3.js, uses ordinal scales for symbols and colors, linear scales for axes, and SVG paths for marks. Data is loaded from a CSV file hosted as a GitHub gist.

Mar 13, 2023

Loading thumbnail…

Fork of ICE-07 Area Chart

This area chart visualizes the selling price of Toyota Fortuner cars across different years, using a yellow filled area beneath a black line to emphasize the price trend. The visualization is built with D3 v5 and rendered as an SVG, employing the `scaleTime`, `scaleLinear`, `line`, and `area` APIs with a basis curve for smooth interpolation. The data is loaded from a remote CSV file, and the chart includes labeled axes with custom tick formatting and grid lines.

Mar 13, 2023

Loading thumbnail…

Fork of ICE-7(Area)

This visualization displays Taylor Swift listening trends on Spotify for 2001, using a pink area chart where the x-axis maps months and the y-axis quantifies listening hours. The code leverages D3 v5 functions including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to construct the chart. It loads its data from a GitHub-hosted CSV file. SVG rendering is used, with styling for axes, labels, and title applied through CSS classes.

Mar 13, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart shows the selling price of Fortuner cars across different years, with price on the y-axis and year on the x-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator for the path. Data is loaded via `csv` from a GitHub-hosted file containing electronic sales records, filtered to Fortuner car pricing. The chart includes labeled axes, a title, and custom CSS styling for text and grid lines.

Mar 13, 2023

Loading thumbnail…

Fork of ICE-7(Line Chart)

This line chart depicts Taylor Swift’s Spotify listening trends by year, plotting Selling_Price against Year. The visualization uses D3 v5 within a React framework, rendering an SVG with axes, gridlines, and a titled path. Data loads from a GitHub-hosted CSV via `d3.csv`. The chart employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to map the dataset, with custom CSS styling for labels, ticks, and the line path.

Mar 12, 2023

Loading thumbnail…

selling price of fortuner cars in different years

A pie chart displays the selling price of Fortuner cars across different years, with each slice representing a year and the price encoded by color. The chart renders as an SVG using D3.js v5, loading data from a CSV file hosted on GitHub Gist. The code uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the chart, with labels positioned via arc.centroid and a legend built from the same data.

Mar 12, 2023

Loading thumbnail…

Fork of selling price of fortuner car in different years

This example displays literacy rates for Southern Indian states as a pie chart, with each state’s name labeled on its slice and a color-coded legend showing the percentage value. Using D3.js v5, the code loads CSV data from a GitHub gist, then applies `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` assigning colors. State names are placed via `arcGenerator.centroid`, while the legend lists each state and its formatted literacy percentage.

Mar 12, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of the Reusable D3 Scatter Plot visualizes the Iris Dataset, showing how sepal length relates to petal width. The scatter plot animates by cycling through four different feature columns on the x-axis every two seconds, using `setInterval` to update the axis. It is built with D3 v6, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a custom reusable `scatterPlot` function. SVG rendering displays circles for each data point, with axes and labels styled using the Share Tech font.

Mar 10, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This visualization displays a scatter plot of penguin measurements from a CSV dataset, plotting flipper length against body mass for individual penguins. The color of each point indicates the penguin species, with Adelie shown in red, Gentoo in yellow, and the remaining species in black. The code uses D3 v5 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, create scales, and render SVG circles. Axis labels and a chart title are added as text elements, with custom styling applied to tick fonts.

Mar 9, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example shows a scatter plot of penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with points colored by species (Adelie, Gentoo, or other). The visualization loads a CSV from a GitHub gist using `d3.csv`, parses numeric fields, and renders SVG circles positioned via `d3.scaleLinear` and `d3.extent`. It uses `d3.axisBottom` and `d3.axisLeft` for axes, with cursive font styling and custom labels. The code also applies `rx` and `ry` attributes from bill measurements, though these do not visibly alter the circle shape.

Mar 9, 2023

Loading thumbnail…

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

This example visualizes the top fifteen countries by their 2022 population as horizontal bars, with each bar’s length encoding population magnitude. Built with React and D3 v5, the code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and renders SVG `<rect>` marks directly in React’s JSX. Data is loaded from a CSV via `d3.csv`, and axes are drawn manually with `d3.scaleLinear.ticks` and tick text elements.

Mar 8, 2023

Loading thumbnail…

Fork of ICE5

This example displays metadata about an Olympic athletes dataset, summarizing the file size, row count, and column count in a text message. It loads a CSV file from a GitHub gist using d3.csv, then computes the dataset's size with d3.csvFormat and reports the dimensions. The page uses a custom CSS background image and blue styling, with the summary presented in a <pre> element. The code relies on D3 v7 for data loading and formatting.

Feb 28, 2023

Loading thumbnail…

Fork of ICE5

This example displays metadata about a credit card customer dataset, including its size in kilobytes, row count, and column count. The page shows a title, a link to the underlying CSV file, and the computed statistics in a large, bold text block. It uses D3 v7’s `d3.csv` and `d3.csvFormat` to fetch the data from a GitHub Gist and calculate the size, while a custom CSS background image of a credit card is applied. The result is presented as raw text, not a visual chart.

Feb 28, 2023

Loading thumbnail…

Fork of ICE5

This page presents a summary of credit card customer data, displaying the dataset’s metadata—its size in kilobytes, row count, and column count—in a large, bold text block. It uses a credit card SVG as a background image and relies on D3.js (v7) to load the CSV data with `d3.csv()` and format it with `d3.csvFormat()`. The visualization’s output is minimal, showing the information via a text message in a centered container.

Feb 28, 2023