Rakesh Kumar Chekuri

ice8

Fork of Fork of ICE - 8: Visualizing Tree

World Map

Fork of Fork of ICE - 8: Visualizing Tree

area chart

This area chart visualizes the relationship between age and weight, with age on the x-axis and weight on the y-axis, using a steelblue filled path. The D3.js v7 code loads a CSV dataset from a remote GitHub gist, parses it with `d3.csvParse`, and sorts the data by age. It then applies `d3.scaleLinear` for both axes and an `d3.area` generator to create the smooth region, rendering the chart as an SVG with labeled axes and a title.

Fork of Responsive Line Chart

This fork of a responsive line chart displays the relationship between age and weight using an SVG line plot. The code loads data from a remote text file, parses it with `d3.csvParse`, and sorts it by age before rendering the line with `d3.line` and scales via `d3.scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with labels added for both dimensions. The visualization uses D3 v7 and fixed SVG dimensions of 600 by 400 pixels.

bar chart

This bar chart displays the distribution of males and females across six age groups, ranging from 20 to 50 years, using a pie chart layout. Built with D3.js v7, it fetches CSV data from a GitHub gist, processes the counts by age group and gender, and renders the visualization as SVG. The chart includes a legend showing total counts per age group and uses an interactive tooltip that appears on mouseover to reveal the specific male and female counts for each slice.

ice 7 a

This interactive scatter plot visualizes the relationship between height and weight for individuals, with each dot colored by name and tooltips revealing age and gender on hover. It uses D3.js v7 (d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) to render an SVG chart with a separate legend and animated tooltip transitions, pulling data from a CSV file loaded via d3.csv. The visualization includes labeled axes and a categorical color scheme to distinguish data points.

Symbols to Scatter Plot

This responsive scatter plot visualizes the relationship between height and weight for individuals, encoding each data point with a distinct D3 symbol shape based on the person’s name. Hovering over any symbol reveals a tooltip with the individual’s age and gender. The code uses `d3.symbol()` and `d3.scaleOrdinal` to map names to symbol types, alongside `d3.axisBottom` and `d3.axisLeft` for axes. A separate SVG legend shows the mapping between each name and its corresponding symbol, with all elements rendered as SVG in d3.v7.

Fork of Responsive Scatter Plot

This example visualizes global GDP data as a responsive scatter plot using Chart.js, rendering points on a canvas. It shows yearly GDP values fetched from a CSV file hosted on GitHub, with point colors encoding value ranges: orange below 30 trillion, blue between 30 and 60 trillion, and green above 60 trillion. The code parses the CSV with `split` and `parseInt`/`parseFloat`, filters invalid rows, and configures axes labeled "Year" and "Value". The chart uses the `scatter` type, with `backgroundColor` set per data point for categorical coloring.

assign ice 6 Rakesh

This example displays a bar chart that visualizes the frequency of country names in a GDP dataset. The chart uses Chart.js to render the data on an HTML5 canvas, with each bar colored based on its count threshold. It fetches the CSV data from a remote GitHub repository, parses the rows in JavaScript, and sorts the top 15 countries alphabetically before plotting their occurrence counts.

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

This scatter plot visualizes the Iris dataset, plotting petal length against petal width with points colored by species. The code uses D3 v6’s `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs within a React-style SVG rendering. It loads data from a raw GitHub gist, parses numeric fields, and maps sepal measurements to circle properties via `rx` and `ry`. Axis labels are added using D3’s `text` elements, with custom font styling.

Fork of Fork of Fork of ICE-6 Bar Graph

This horizontal bar chart visualizes the average monthly cost of basic internet service across twelve countries, sourced from a CSV file loaded via D3’s `csv` function. It shows the data before explaining the mechanics: each bar’s length encodes cost, with country names on the y-axis using a `scaleBand` and costs on the x-axis via `scaleLinear`. React manages the component state and rendering, while D3 handles the scales, axes, and bar positioning. The visualization uses SVG elements, with gridlines drawn from `xScale.ticks()`, and fetches data asynchronously inside a `useEffect` hook, displaying a loading state until the data arrives.

ICE5

This example displays a static SVG illustration of a whimsical landscape, including a house, sun, and decorative stars, with a header that confirms the loading of phrase data. It uses D3 v7 to fetch and parse a CSV file from a GitHub gist, then calculates and displays the data’s size, row count, and column count in a styled `<pre>` element. The visualization combines hardcoded SVG shapes with dynamic data summary text, showing how D3’s `d3.csv` and `d3.csvFormat` can be used to introspect dataset properties while the rendering relies on React’s DOM and SVG elements.

5

This example demonstrates the VizHub V3 runtime environment’s core workflow by rendering a single, large “Hello World!” message centered on the page. It shows how a simple `main` function receives a container element and writes directly to its `innerHTML`, using an inline style with a fixed font size. The code highlights the minimal setup required: no `index.html` file is needed, as the runtime injects the container and calls the exported `main` function. The example serves as a blank-slate starting point, illustrating how state management works through the optional `state` and `setState` parameters, though this instance does not use them.

ICS5

This visualization shows a decorative line chart depicting a wave-like curve in dark gray, layered with abstract circular and dotted background elements. Built in React with SVG rendering, the graphic uses smooth bezier paths to draw a single prominent trend line across a soft geometric backdrop, with scattered shape motifs echoing the main curve. The simple, editorial style focuses attention on the line’s contour while maintaining a clean, minimal aesthetic.

Fork of Smiley Face With Glasses

This example uses React and D3 v5 to render a stylized smiley face with glasses as an SVG graphic. The face includes a yellow head, eyes, a mouth drawn with the d3 `arc` generator, plus accessories like ears, earrings, hair, a hat, and blue tear paths. The code builds the entire illustration declaratively with React JSX elements, while D3 provides the arc calculation for the mouth shape. All visual elements are positioned using SVG coordinates within a fixed 960 by 500 viewport.

Fork of Lion emoji face

This example displays a stylized lion face composed entirely of overlapping SVG circles, ellipses, polygons, and lines. The code defines all geometry using React and JSX, with absolute coordinates and constants for parameters like eye offset and radius to position the ears, eyes, mouth, snout, and decorative "thug life" glasses. D3 is loaded but not used for drawing, as the visualization relies solely on declarative SVG markup. The composition also includes a multi-layered scar detail built from colored circles and additional hair-like line accents around the snout and forehead.

Fork of Lion emoji face

This example renders a stylized lion emoji face using React and SVG primitives. It draws a series of circles and polygons for the ears, face, eyes, mouth, snouts, nose, and brows, with fixed positions computed from constants like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius`. The code uses D3 v7 and ReactDOM to mount the SVG into the DOM, while CSS removes the body margin for a clean full-viewport display. The visualization is static, showing how geometric shapes compose a recognizable character.