K

kartik900

@kartik900·16 public vizzes

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes a multi-generational hierarchy using collapsible nodes and animated layout transitions. It shows relationships between individuals like ViplavaKumari, Rambabu, and their descendants, with color-coded node types indicating different generations or branches. Built with D3.js v3, the visualization uses a tree layout to position nodes, SVG rectangles with external HTML foreign objects for labels, and CSS-based tooltips. Clicking a node collapses or expands its subtree, while panning and zooming is enabled through `d3.behavior.zoom`. The tree loads hierarchical data from a JSON file and arranges nodes with animated transitions.

Loading thumbnail…

ICE8-1.2

This example renders a choropleth-style map of U.S. states using a categorical color scale based on state names. It uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to draw state boundaries from TopoJSON data loaded from the us-atlas CDN, with state labels positioned at each polygon’s centroid. The code also applies a sequential color palette via `d3.scaleOrdinal` and `d3.schemeCategory10`, and includes hover tooltips via appended `title` elements. The map is rendered as SVG, with black stroke outlines for each state.

Loading thumbnail…

ICE-8 World Map

This visualization presents a world map rendered in an SVG, where countries appear in light green with purple outlines and the ocean is filled with a blue sphere. The map is generated using D3.js (v5) with a geoEquirectangular projection and the geoPath function to draw geographic shapes. TopoJSON's feature method converts country boundaries from the world-atlas countries-110m JSON data source, while the CSS defines the visual styling for the sphere and country elements.

Loading thumbnail…

Polished World Map

This example visualizes global geography with a polished world map, rendering landmasses in teal, graticules as light gray grid lines, and country borders in a contrasting shade. It shows the world using a Natural Earth projection, with the sphere outline and graticule grid providing spatial context. The visualization uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for map projection and path generation, and d3.geoGraticule for the graticule lines, sourcing geographic data from the world-atlas TopoJSON dataset.

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered in yellow and the ocean sphere in light blue. It loads country boundaries from the world-atlas TopoJSON dataset and converts them into GeoJSON features using the `feature` function from topojson. The map is drawn with `d3.geoPath` and `geoNaturalEarth1` from D3 v5, appended as SVG paths to a 960x500 canvas. Country strokes are semi-transparent black, creating subtle separation between landmasses.

Loading thumbnail…

test

This example displays a world map using a natural Earth projection, with countries rendered as white shapes bordered by green strokes against a yellow sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset, converting it to GeoJSON features with the topojson feature method. D3’s geoPath and geoNaturalEarth1 are used to generate the projection and path data, while selections append each country path to the SVG canvas.

Loading thumbnail…

ice-8

This example displays a world map using a Natural Earth projection, with countries rendered as semi-transparent yellow polygons over a light blue spherical backdrop. The visualization loads geographic data from the world-atlas JSON and processes it with the topojson library’s feature method. The map is drawn by generating SVG paths via d3.geoPath and the geoNaturalEarth1 projection, while the sphere outline is created from an explicit Sphere geometry. The d3 select and append methods build the SVG hierarchy, with CSS classes styling the sphere and country fills.

Loading thumbnail…

ICE 7.1

This interactive scatter plot displays the Iris dataset, encoding sepal and petal measurements as x and y coordinates. Points are differentiated by species using both color (via `d3.scaleOrdinal` with `schemeCategory10`) and shape (via `d3.symbol` with distinct symbol types). Every ten seconds, the x-axis automatically switches among four measurement columns—petal width, sepal width, petal length, and sepal length—updating the chart through a custom `scatterPlot` function. The SVG is rendered with D3 v6, using `csv` to load data and `axisLeft` and `axisBottom` for dynamic axes.

Loading thumbnail…

ICE 7.2

A pie chart visualizes total sales data for U.S. states, with each slice labeled by its sales value in millions. A legend maps state names to their corresponding colors. The visualization uses D3.js v5 and React, fetching data from a CSV URL. The chart is rendered as an SVG, using D3's pie, arc, and scaleOrdinal APIs to generate the slices and color mapping.

Loading thumbnail…

ICE 7.3

This example shows Walmart sales over an 11-year period as a single line chart, with time on the x-axis and total sales value on the y-axis. The visualization is built with React and rendered as an SVG using D3 v5, specifically leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator to draw the path. Data is loaded as CSV and parsed with `d3.timeParse` to convert date strings into temporal values. Grid lines are styled via CSS, and axis labels are added as SVG text elements.

Loading thumbnail…

ICE 7.4

This visualization displays 11 years of Walmart sales data as a smooth area chart, with a black line tracing sales over time above a yellow filled region. The SVG chart uses D3.js v5 scales, axes, and generators, including `scaleTime`, `scaleLinear`, `line`, and `area` with `curveBasis` for smoothing. The data is loaded from a remote CSV file, with years parsed via `d3.timeParse` and sales converted to numbers. Axis labels and gridlines are styled through CSS, while tick labels on the y-axis are formatted using D3's `format` with the `.3s` specifier.

Loading thumbnail…

ICE6 Q2 Scatter Plot for Penguin Dataset

This scatter plot visualizes a penguin dataset from a CSV file, mapping flipper length to body mass for individual penguins. Each point is colored by species, using purple for Adelie, orange for Chinstrap, and crimson for Gentoo penguins, with the relationship displayed on a full-window SVG canvas. The example employs D3 v6 API functions including `d3.csv`, `d3.select`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale axes, and render marks. It also includes axis labels and a title, with fixed point radius and species-based coloring via a switch function.

Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Loading thumbnail…

ICE-5

This visualization displays metadata for a 200-row CSV dataset of used car prices, including make, model, year, mileage, cost, color, state, and date. A black, semi-transparent panel overlays an SVG background image, presenting the dataset’s column count, row count, file name, and size. The page links directly to the raw CSV file. The implementation uses plain HTML and CSS, with the background and data file sourced from external GitHub gist URLs.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example displays a stylized emoji-like face with eyes, a nose, hair, and a curved mouth, rendered as SVG elements within a React application. The face is composed of basic SVG shapes such as circles, ellipses, polygons, and polylines, grouped and transformed to position the features around the face’s center. The mouth uses D3’s `arc` generator to draw a curved path, while random polygon points define the hair. The visualization leverages React for component rendering and D3 v7 utilities for geometry, all styled with CSS.

Loading thumbnail…

Fork of Danny Phantom Face

This example renders a stylized SVG portrait of Danny Phantom’s face using React components and D3’s `arc` generator for the mouth. The face is built from primitive shapes—circles for the eyes, irises, pupils, and face; rectangles for the eyebrows; polygons for the hair and nose; and an arc for the mouth. All elements are positioned relative to the window’s center, with fixed offsets and colors defining the character’s features. The code uses React 16.9 and D3 v6, drawing entirely in SVG without any external data.