K

KolliTeja

@KolliTeja·43 public vizzes

Loading thumbnail…

ICE8-Network Graph

This interactive network graph visualizes social connections among ten individuals (Dom, Quin, Erica, and others) from a custom `flare.json` file. Nodes are rendered as orange circles with black outlines and labeled with names, while green lines represent links between them. The example uses D3 v4's `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs to run a physics-based layout animation. Node and label positions update continuously in the `ticked` callback as the force algorithm iterates, creating a dynamic, animated network diagram.

Loading thumbnail…

ICE8- Network

This interactive network visualization uses a force-directed layout to display a small social graph of ten named individuals connected by green links. Built with D3 v4, the code applies `d3.forceSimulation` with link, charge, and centering forces, rendering nodes as orange circles with black strokes and name labels using SVG. The simulation updates node and link positions on each tick, and the layout settles after the forces reach equilibrium.

Loading thumbnail…

Untitled

This example visualizes a force-directed network graph using the d3.v4 library. The code loads node and link data from a JSON file and positions the nodes through `d3.forceSimulation`, applying repulsion (`d3.forceManyBody`), link constraints (`d3.forceLink`), and centering forces. Rendered as an SVG, nodes are orange circles with black strokes, connected by green lines. Node labels are positioned relative to each circle's computed coordinates, and the animation runs continuously as the force simulation updates the layout.

Loading thumbnail…

ICE8-Family Tree

This example visualizes a family tree as a static SVG diagram, with nodes rendered as orange circles connected by maroon lines. The tree structure is defined by parent-child relationships in a JavaScript array, which is processed using d3.stratify and d3.tree to compute node positions. The React-based code appends SVG elements using d3.select and animates the appearance of links and text labels with d3.transition and duration timings. Each node displays a name in blue text, and the visualization starts with root node "Dom" at the top.

Loading thumbnail…

ICE8-Family Tree

This example renders a hierarchical family tree using D3 v6’s `d3.stratify` and `d3.tree` layouts. Orange circles represent family members, connected by animated maroon paths that grow from parent to child, while green labels fade in with a delay based on depth. The SVG is appended directly to the body, with all nodes and links transitioning over durations up to 1000 milliseconds. The static input data lists eleven parent-child pairs, rooted at “Dom”.

Loading thumbnail…

ICE8- Family Tree

This visualization presents a family tree as an interactive, animated diagram built with D3.js v3 and React. It shows hierarchical relationships between family members, using colored rectangles for different node types and connecting links with directional arrows. The tree layout is computed with `d3.layout.tree`, and nodes and links are rendered as SVG elements. The visualization supports zooming and dragging via `d3.behavior.zoom`, plus click interactions to expand and collapse nodes. Data is loaded from a JSON file and styled with custom CSS, with tooltips for additional information.

Loading thumbnail…

ICE8-Country map

This map of the United States displays all 50 states, highlighting individual state boundaries and landmasses in orange with black interiors. The visualization uses the `geoAlbersUsaTerritories` projection with `d3.geoPath` to render geographic features. Data comes from the `us-atlas` TopoJSON file, processed by TopoJSON's `feature` and `mesh` functions. The React application manages the asynchronous data loading through a custom `useData` hook, and states respond to hover with a green fill effect.

Loading thumbnail…

ICE8-Country map

This choropleth-style map displays all 50 US states using an orange fill with black state boundaries, highlighting individual states in green when hovered. The visualization loads geographic data from a TopoJSON file via `useData()`, then renders it as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories()` projection. Built with React and D3 v5, the code integrates TopoJSON's `feature()` and `mesh()` functions to generate land polygons and interior borders.

Loading thumbnail…

ICE- India map

This map of India displays its internal administrative boundaries using an orange fill for each state and dark strokes for borders. It uses the geoMercator projection and d3.geoPath to render the geographic features. The React application loads TopoJSON state data via d3.json and processes it with the topojson client feature and mesh functions. The visualization demonstrates a straightforward choropleth-free rendering of India’s state divisions without additional thematic encoding.

Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth displays the 50 US states and their internal borders, rendered as an SVG using React components. The map turns green, with state boundaries shown as white lines, and individual states highlight in orange on hover. Geographic data comes from the `us-atlas` TopoJSON file, processed with `topojson.feature` and `topojson.mesh`. The visualization uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw each state path. Interactivity is achieved through CSS `:hover` styling on the `.land` class.

Loading thumbnail…

Fork of ICE8-Country Map(usa)

This example displays a choropleth map of US state boundaries using a modified Albers USA projection that includes Alaska, Hawaii, and US territories. The map renders as an SVG via React, using `d3.geoPath` to generate paths from TopoJSON data loaded from the US Atlas. State borders appear as teal strokes against a green fill, with state interior boundaries distinguished from outer edges through `topojson.mesh`. The visualization demonstrates the `geo-albers-usa-territories` projection library, integrating D3’s geographic utilities with React’s component structure to produce a clean, static map.

Loading thumbnail…

ICE8-Country Map(usa)

This example displays a map of the United States with state boundaries, rendered using the geo-albers-usa-territories projection. The visualization loads US Atlas TopoJSON data, converts it with d3.geoPath and topojson.feature, and styles the land and interior borders with distinct teal colors. React manages the component state, while the map is drawn as an SVG, with graticules available as an optional overlay.

Loading thumbnail…

Map of India - ICE8

This choropleth of India displays each state as a colored SVG path, with state names overlaid as text labels. The visualization uses a TopoJSON dataset of Indian administrative regions, loaded from a GitHub repository and processed via the topojson `feature` API. D3’s `geoMercator` projection and `geoPath` generate the map geometry, while `scaleOrdinal` with `schemeCategory10` assigns distinct fills to each state. Rendering is entirely SVG-based, with hover interactions defined in CSS.

Loading thumbnail…

World Map- ICE8

This visualization displays a world map using a natural Earth projection, rendered as orange countries with black borders on a white background. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to parse the GeoJSON features. A single SVG element contains all country paths, with the sphere drawn as a separate path class.

Loading thumbnail…

World Map- ICE8

This example displays a world map using the Natural Earth projection, with countries rendered as orange polygons against a yellow spherical backdrop. The visualization loads geographic data from a world-atlas TopoJSON file via `d3.json`, then converts it to GeoJSON features using `topojson.feature`. The code employs `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, attaching each country path to an SVG element. A blue sphere path provides the base layer, while country borders appear as black strokes.

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries filled in light green and the globe as a blue sphere. It loads geographic data from a TopoJSON file stored in a GitHub gist, then converts it to GeoJSON using the `feature` function from TopoJSON. The map renders in SVG, with `d3.geoPath` and `d3.geoNaturalEarth1` handling the projection and path generation. The visualization is static, showing only the country outlines and spherical background.

Loading thumbnail…

Fork of Fork of ICE-8 world map

This visualization presents a world map rendered as light green countries on a sky blue sphere, using a natural Earth projection to flatten the globe onto a two-dimensional SVG canvas. The map is built with D3 version 5, specifically using `select`, `json`, `geoPath`, and `geoNaturalEarth1` to handle the projection and drawing, while the TopoJSON library’s `feature` function extracts geographic boundaries from the remote worldmap dataset. The sphere is drawn first, followed by country paths, each stroked with semi-transparent black outlines. The SVG output is styled with CSS for the sphere and country fills, and the data is loaded from an external JSON source.

Loading thumbnail…

Fork of Fork of ICE 8- WORLD MAP OF AMARNATH

This example displays a static world map rendered with SVG paths, with each country filled in light green against a cyan background. The visualization uses D3 v4’s `d3.geoPath` and `d3.geoMercator` projection to draw geographic boundaries from TopoJSON data loaded via `topojson.feature`. The code fetches the world-atlas countries-10m dataset and appends a path element for each country, with basic margin and positioning handled through SVG attributes. No interactivity or data encoding beyond the map itself is present.

Loading thumbnail…

Fork of World Map with Topojson data

A world map rendered in SVG with a Mercator projection, using bright pink for the ocean and yellow for landmasses with green borders. The visualization loads geographic data from a TopoJSON file and converts it to GeoJSON using `feature` from Topojson. D3’s `geoPath` and `geoMercator` handle the projection and path generation, while `select` and `json` manage DOM selection and asynchronous data loading.

Loading thumbnail…

Fork of ICE8 World Map

This example renders a world map using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Country boundaries are drawn as SVG paths from TopoJSON data loaded from a GitHub gist, with each country filled in teal and outlined with a faint red stroke. A light blue sphere path forms the globe’s background. The code uses d3.select, d3.json, and topojson.feature to process the geographic features.

Loading thumbnail…

Fork of ICE-8_World_Map

This example displays a world map using an equirectangular projection, with countries rendered as purple filled shapes outlined in yellow. It uses D3 v5’s `d3.geoPath` and `geoEquirectangular` to draw the geographic features, while TopoJSON’s `feature` method extracts country geometries from the world-atlas dataset. The sphere background is blue, and hovering over a country changes its fill to green, implemented via a CSS `:hover` rule on SVG path elements.

Loading thumbnail…

ICE7- reusable scatter plot

This visualization presents the Iris dataset as a dynamic scatter plot that cycles through different attribute pairings every two seconds, with points colored by species (setosa in red, versicolor in blue, virginica in green). Built with a reusable `scatterPlot` function using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, the SVG chart renders axes and circles while a `setInterval` timer reconfigures the x-value mapping to explore petal and sepal measurements. The code imports data from a GitHub-hosted CSV and uses D3’s `csv` parser.

Loading thumbnail…

Fork of ICE7-Line Chart

This line chart displays the USA population from 2011 to 2021, with years on the x-axis and population in millions on the y-axis. The visualization uses D3 v5 with SVG rendering, loading CSV data from a GitHub gist. It employs d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.line to generate the red population curve. The chart includes a rotated y-axis label and gridlines created via tick sizes.

Loading thumbnail…

Fork of ICE7-Pie Chart

This fork of ICE7-Pie Chart shows the pollution levels and population for ten US states using a pie chart rendered as SVG. Each slice represents a state’s population, with slice labels and a legend listing state names and population values in millions. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to compute the arcs and assign a custom color palette. Data is fetched asynchronously from a CSV hosted on GitHub, and the chart is drawn by appending paths and text elements to the SVG canvas.

Loading thumbnail…

ICE7 Area Chart

This area chart displays the population of the United States from 2011 to 2021, with a smooth curved line and a filled sky-blue region beneath it. The visualization uses D3 v5’s `csv` to load data, `scaleTime` and `scaleLinear` for axes, and the `area` and `line` generators with a `curveBasis` interpolation. Axis tick labels are formatted with `format('.3s')`, and the chart includes labeled axes and a title, rendered as SVG.

Loading thumbnail…

ICE7-Line Chart

This line chart visualizes the population of India from 2011 to 2021, using a red path to trace the trend over time. The chart employs D3 v5’s `scaleTime` for the year-based x-axis and `scaleLinear` for the population y-axis, with axes rendered using `axisBottom` and `axisLeft`. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse`. The visualization is drawn as an SVG with gridlines, axis labels, and margins, focusing on showing population growth across the decade.

Loading thumbnail…

Fork of Line Chart

This visualization displays the percentage increase in US auto sales by brand from 2005 to 2022 as a single red line chart. The x-axis shows years using a time scale, while the y-axis represents the percentage increase with a linear scale. Built with D3 v5, the code loads CSV data from a GitHub gist, applies axes with tick marks, and generates the line path using the `d3.line` generator. The SVG rendering includes styled grid lines, axis labels, and a title, with margins and padding configured for clear presentation.

Loading thumbnail…

Fork of Fork of line chart section 3

This example visualizes car sales data from 2013 to 2021, plotting population values over time as a red line chart. The code uses d3.v5 with scaleTime and scaleLinear to map the x-axis (parsed dates) and y-axis (population counts), while axisBottom and axisLeft generate labeled axes with gridlines. Data is loaded from a CSV file via d3.csv, and the line is rendered as an SVG path using d3.line, with margins and tick styling applied through the stylesheet.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart shows automobile sales in India from 1999 to 2012, with electronic sales values on the y-axis and years on the x-axis. The visualization uses React to load CSV data from a GitHub URL via `d3.csv`, then renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. Styling is applied through CSS, including a blue line path, purple title, and blue axis labels.

Loading thumbnail…

Line chart

This line chart shows car sales data from 2013 to 2021, with years on the x-axis and total sales on the y-axis. It uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft for labeled axes. A d3.line generator draws the single red trend line, while d3.extent and d3.max calculate the domain ranges. The visualization renders as an SVG with custom margins and tick styling.

Loading thumbnail…

ICE7-Pie Chart

This visualization displays U.S. state populations as a pie chart, showing each state’s population in millions with color-coded slices and a matching legend. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate and style the chart from CSV data loaded via `csv`. The SVG rendering includes slice labels positioned with `arc.centroid` and a legend built from appended `rect` and `text` elements. The data source is a GitHub gist URL.

Loading thumbnail…

Fork of Fork of Pie Chart

This example visualizes 2022 US auto sales by brand using a pie chart, with each slice's fill color and legend label derived from the sales data. The chart is rendered as SVG, with pie segments generated by the `d3.pie` and `d3.arc` functions, while `d3.scaleOrdinal` maps colors to sales values. Legend entries include each brand name and its sales total formatted with `d3.format`. Data is loaded asynchronously from a CSV file via a custom `getData` module using D3 v5's `d3.csv`.

Loading thumbnail…

Fork of Pie Chart

This pie chart displays 2022 U.S. auto sales by brand, with each slice sized by year-to-date sales and a corresponding legend showing brand names and sales totals in thousands. The visualization uses d3.pie and d3.arc to generate SVG paths, with d3.scaleOrdinal assigning colors to slices. Data loads asynchronously via d3.csv from a GitHub gist, and the code formats sales values using d3.format. A legend is built manually with SVG rectangles and text elements, while the chart itself is centered within a 960x500 viewport.

Loading thumbnail…

Fork of ICE7-Pie Chart

This fork of D3’s ICE7-Pie Chart uses a dataset from a GitHub gist to visualize the top 10 countries by deaths in 2020 attributed to air pollution. The pie chart displays the proportion of deaths per country, with each slice labeled with the death count in thousands and a corresponding color-coded legend listing country names and values. Built with D3 v5, the code employs D3’s pie layout, arc generator, and ordinal color scale to render the chart as SVG, while using the CSV parser to fetch and process the data from the remote source.

Loading thumbnail…

ICE7-Pie Chart

This example visualizes the top 10 countries by deaths from air pollution in 2020, using a pie chart with colored segments, each labeled with its value in thousands and accompanied by a legend showing country names and death counts. Built with D3 v5, the code fetches CSV data from a GitHub gist, uses `d3.pie` and `d3.arc` to generate the sectors, applies a color scale via `d3.scaleOrdinal`, and renders both the chart and interactive-free legend as SVG elements, with axes formatted using `d3.format`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot displays the Iris dataset, mapping different flower measurements to the x and y axes. It uses D3.js APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The plot automatically cycles through four data columns every two seconds, updating the x-axis mapping with each iteration. The visualization is implemented as a reusable chart function configured with a fluent interface, reading data from a CSV file and styling text with the Share Tech font.

Loading thumbnail…

Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with each point colored by species (blue for setosa, red for versicolor, black for virginica). The code uses D3 v6, loading CSV data via `d3.csv`, scaling with `scaleLinear`, and rendering SVG circles with `selectAll` and `join`. It also draws labeled x- and y-axes using `axisBottom` and `axisLeft`, while the plot’s dimensions adapt to the browser window.

Loading thumbnail…

ICE - 6

This visualization displays the top 10 most populous countries using a horizontal bar chart rendered with SVG in React. It loads population data from a CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map states and population values to bar positions and lengths. The chart includes custom grid lines, axis tick labels, and styled bars, with dynamic data loading handled through React hooks (`useState`, `useEffect`).

Loading thumbnail…

Population

This bar chart displays the population of 20 U.S. states ranked along the vertical axis. Each horizontal bar’s length corresponds to the state’s population value. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent bars, with manual tick rendering via `.ticks()` and gridlines. The chart includes labeled axes and a blue gridline accent.

Loading thumbnail…

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

This example shows a horizontal bar chart of the top 20 countries by COVID-19 cases, using data from a CSV file loaded via `d3.csv`. The visualization maps country names to the y-axis with `d3.scaleBand` and case counts to the x-axis with `d3.scaleLinear`, rendering blue bars as SVG `<rect>` elements. The React component manages state with `useState` and `useEffect`, while D3 handles scaling and tick generation for both axes. The code demonstrates a hybrid approach where React renders marks and channels, and D3 provides the underlying scales and data processing.

Loading thumbnail…

ice6

This visualization displays a horizontal bar chart of the top 10 most populous countries, using data loaded from a CSV file via `d3.csv`. The chart maps selling price to the y-axis with `d3.scaleBand` and year to the x-axis with `d3.scaleLinear`, rendering bars as SVG rectangles. The React component manages state with `useState` and `useEffect`, while D3’s `max` and `format` handle data scaling and tick labels.

Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 most populous countries, using React for component rendering and D3 for data loading and scales. The code loads CSV data via `d3.csv`, maps it with a custom row function, and visualizes it as SVG rectangles whose widths are scaled by population using `scaleLinear`, while `scaleBand` positions the bars. Tick marks and labels are generated manually from the scales, and the chart is rendered into a React component using `ReactDOM.render`.

Loading thumbnail…

Iris Dataset

This visualization uses a D3 v6 scatter plot to display the Iris Dataset, plotting petal length against petal width on the x- and y-axes. Each point is colored by species: yellow for Iris-setosa, black for Iris-versicolor, and green for Iris-virginica. The code loads CSV data via `d3.csv`, parses numeric fields, and renders circles with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The SVG fills the viewport, and extra attributes like `rx` and `ry` are set but do not affect the circular shape.