chakritha06

@chakritha06·22 public vizzes

ICE-8

A force-directed network diagram displays thirteen named individuals as colored nodes, connected by weighted links that vary in thickness based on link weight. The visualization loads node and link data from a local `graph.json` file and renders it as an SVG using D3 v2's `d3.layout.force()`, with node colors assigned from the data and drag interaction enabled via `force.drag`. Text labels appear beside each circle, and the layout updates continuously through the force tick handler.

Jul 10, 2022

Loading thumbnail…

Tree Example: ICE-8

This interactive tree visualization displays a three-level animal classification hierarchy, dividing animals into herbivores, carnivores, and omnivores, with examples like rabbits, lions, and bears. The React-based example uses the D3.js library to render an animated, collapsible node-link diagram as SVG, with clickable nodes and smooth cubic Bézier curves connecting parent and child elements. The code encodes categorical data through node fill colors and stroke colors, while CSS handles hover effects and presentation.

Jul 10, 2022

Loading thumbnail…

India Map

This example displays a static map of India rendered as a set of coral-colored SVG paths. The map loads TopoJSON data from a GitHub gist, converts it to GeoJSON features using the `topojson` `feature` function, and projects each feature with D3’s `geoMercator` and `geoPath`. Built with React, the visualization fetches the data asynchronously via `d3.json`, caches it in state, and draws the paths within an SVG canvas sized to the browser window. The map uses a fixed projection centered over the country.

Jul 10, 2022

Loading thumbnail…

World maps by using D3.js

This example displays a world map using D3.js, rendering countries as semi-transparent orange shapes on a blue sphere against a black background. The map is projected using `d3.geoEquirectangular` and drawn with `d3.geoPath`, while geographic data is loaded from the `world-atlas` package via `d3.json`. Boundaries are extracted with `topojson.feature`, and the SVG paths are updated through a simple data-join operation that appends each country as a new path element.

Jul 10, 2022

Loading thumbnail…

Untitled

This interactive 3D scatter plot visualizes the Iris Dataset, plotting three variables—total, employed, and unemployed graduates—along the x, y, and z axes. It uses Plotly.js to render the three-dimensional scene, with D3.js (version 3) handling CSV data loading via `d3.csv`. Colored axis planes and grid lines enhance spatial orientation, while red markers represent individual data points. The code defines trace and layout objects to configure axis titles, background colors, and margins before calling `Plotly.newPlot` to draw the chart inside a designated div.

Jul 7, 2022

Loading thumbnail…

3D Bar Chart

This example shows the top 10 most populated states in the United States, comparing total population, male population, and female population using a 3D bar chart with three bars per state. The visualization leverages the `d3-3d` library and the `d3-x3d` bridge to render the chart via X3DOM, while D3 v5’s `csv` function loads data from a remote CSV file. The chart is placed in a `#chartholder` div, with data parsed into a multi-series format using a custom `parseRow` function, and the `barChartMultiSeries` chart component displays the values in thousands.

Jul 7, 2022

Loading thumbnail…

ICE - 7

This animated scatter plot visualizes relationships between different attributes of college majors, including unemployment rates and salary data for men and women. Built with D3.js, the visualization cycles through four data dimensions every 1.9 seconds, updating the x-axis scale and labels dynamically while the y-axis remains fixed on women’s representation. Circles are color-coded by major category, with data sourced from a CSV file. The reusable chart structure follows the "Towards Reusable Charts" pattern, using D3 scales, axes, and SVG circle elements to render the changing data.

Jul 3, 2022

Loading thumbnail…

Data Visualization ICE6: Fork of Iris Dataset Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each of the 150 flowers appears as a colored circle, with species distinguished by hue: setosa in red, versicolor in green, and virginica in magenta. The chart uses D3 v6 APIs including `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`, rendering as SVG. The code also retrieves the dataset via `d3.csv` from a GitHub gist, and the background is a bright blue.

Jul 3, 2022

Loading thumbnail…

Data Visualization ICE7: Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping sepal width to the x-axis and sepal height to the y-axis, with points colored by species (Male versus other). It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scaling, `extent` for domain calculation, and `axisLeft`/`axisBottom` for axes. The plot renders as SVG circles with fixed radius, and explicit text labels for “Petal Length” and “Sepal length” are added. Data is fetched from a GitHub Gist URL.

Jul 3, 2022

Loading thumbnail…

Area Chart Visualization

This area chart visualizes the number of iPhone users from 2007 to 2017, using a smooth cubic basis curve for both the line and the filled region beneath it. The chart is rendered as an SVG, with linear scales for both the year (x-axis) and user count (y-axis). The code leverages D3 v5's `select`, `csv`, `scaleLinear`, `line`, and `area` APIs to load data from a CSV file, format the y-axis tick labels with `format('.3s')`, and append axis labels and grid lines.

Jul 3, 2022

Loading thumbnail…

Area Chart Visualization

This area chart visualizes iPhone user growth from 2007 to 2017 using a smooth curve generated by D3’s `area` and `line` generators with `curveBasis`. The SVG renders a filled purple region beneath a black stroke, with green tick labels and orange grid lines via `axisBottom` and `axisLeft`. Data loads from a CSV using `csv` and scales with `scaleLinear` for both axes. The code imports modular D3 v5 functions like `select`, `extent`, and `format`, illustrating a combined line-and-area chart pattern.

Jul 3, 2022

Loading thumbnail…

line chart visualization

This line chart visualization displays the growth of iPhone users from 2007 to 2017, with the x-axis representing years and the y-axis showing user counts. The chart uses d3.scaleTime and d3.scaleLinear for scaling, while d3.axisBottom and d3.axisLeft generate the labeled axes with gridlines. d3.line constructs the path, which is rendered as a thick red stroke on an SVG canvas. The data is loaded as CSV from a GitHub gist using d3.csv, with year values parsed as Date objects.

Jul 2, 2022

Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the top 10 most populated U.S. states as a pie chart, with each slice colored distinctly and accompanied by a legend showing state names and population values (in thousands). It uses d3.csv to load data from a GitHub gist, then applies d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG paths and colors. The chart is rendered with SVG elements, and legends are appended dynamically with text and rectangular markers.

Jul 2, 2022

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart shows the top 10 car-producing countries in the world for 2019, with each slice’s size and color representing the total production value. It uses D3’s `pie`, `arc`, and `scaleOrdinal` to compute and render the SVG sectors, while legends display country names and values formatted with `format`. Data is loaded from a CSV via the `csv` function. The chart uses a fixed color range and positions the pie and legend groups using SVG transforms.

Jul 2, 2022

Loading thumbnail…

Fork of Interactive Color Legend

This example visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers, colored by species. Hovering over a species in the interactive color legend highlights only the corresponding points, fading the rest. Built with D3 v5 scales and React components, the scatter plot uses the `scaleLinear` and `scaleOrdinal` APIs, and renders SVG circles via custom `Marks` and `ColorLegend` components. Data is loaded as CSV using `d3.csv`.

Jul 1, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris Dataset as an animated scatter plot that cycles through different variable pairings every two seconds. The plot uses d3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal width, sepal width, petal length, and sepal length onto x- and y-axes. Circles are rendered in SVG and updated via `setInterval`, with each transition re-binding data and re-drawing axes through a reusable chart function. The interface fills the browser window and uses the Share Tech font.

Jul 1, 2022

Loading thumbnail…

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

This example displays the top 10 most populated US states as a horizontal bar chart rendered in SVG. It uses React 16.9 and D3 v5, combining state management via React hooks with D3’s `scaleBand`, `scaleLinear`, and `max` for data mapping. The chart reads a CSV dataset through `d3.csv`, then renders rectangles and axis tick text using JSX. The visualization highlights bar lengths proportional to population, with a blue gridline and custom styling from the embedded CSS.

Jun 25, 2022

Loading thumbnail…

Chakritha Dondapati

This example shows a static decorative composition of colored geometric shapes, including a house-like structure with coordinated rectangles and triangles, a central yellow ellipse, and blue side wings. It also displays a text summary of a dataset. The visualization is built using D3 v7, which fetches data from a CSV file hosted on GitHub Gist using `d3.csv`. The page then calculates and displays the dataset’s file size in kilobytes, row count, and column count using basic JavaScript string operations. The layout is rendered as an inline SVG and styled with CSS.

Jun 23, 2022

Loading thumbnail…

Chakritha Dondapati

This example presents a static, decorative SVG illustration of a cartoon-like figure with a house, flag, and abstract shapes in a fixed viewBox, rendered without dynamic interaction. Above the graphic, a large styled text block displays dataset summary information—file size, row count, and column count—loaded from an external CSV file via `d3.csv`. The code uses D3 v7’s `csvFormat` and `csv` API to parse and measure the data, while CSS styles the HTML elements. The visualization pairs a handcrafted SVG composition with a minimal data summary, highlighting a simple data-loading workflow.

Jun 22, 2022

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on a blank page. It loads D3.js from a CDN and uses the `select` function from D3 to target a `<div>` element, setting its text content to a string imported from a local ES6 module. The appearance is styled through an external CSS file. The visualization demonstrates how to combine a D3 library import with custom modular JavaScript code.

Jun 22, 2022

Loading thumbnail…

smiley

This example draws a smiley face as an SVG graphic, combining React components with D3.js to generate the shapes. The face is centered with yellow circular eyes, red pupils, orange eyebrow-like lines, and a blue head. The code uses D3’s `arc` API to form the mouth and eye arcs, and relies on React’s `ReactDOM.render` to display the static composition, with positions and sizes defined as constants.

Jun 18, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face rendered with SVG circles and an arc, built as modular React components. The example demonstrates splitting React code into separate files using ES6 modules and React Fragments to group sibling elements. A yellow background circle with a black stroke forms the head, while two dark circles serve as eyes, and a mouth is generated using the D3 `arc` generator with specified inner and outer radii. The SVG output is positioned around a central point, with all geometry defined by constants for offsets, radii, and stroke width.

Jun 18, 2022