A

avvarijayakrishna99@gmail.com

@jaikrishna1909·25 public vizzes

Loading thumbnail…

Types of Trees for Tree Map

This interactive tree map, rendered with animated SVG, categorizes various tree species into five distinct sections: Coniferous, Deciduous, Fruits, Palm, and Bonsai. Built with the D3.js toolkit (version 3.5.17), it uses a hierarchical layout and a diagonal projection to draw orange links and white circular nodes. Text labels identify each tree species. The visualization serves as a foundational example for creating more complex tree diagrams.

Loading thumbnail…

Country MAp using TOPOJSON data

This interactive map displays England’s geographical regions using TopoJSON data. The map renders each region as a tan-colored path, with brown interior boundaries between adjacent regions, created using d3.geoNaturalEarth1 and d3.geoPath. Data is fetched via d3.json and processed with topojson.feature and topojson.mesh. The visualization is built in React with SVG output, using d3.v7 and topojson v3.0.2.

Loading thumbnail…

Social Network Graph

The visualization shows a social network graph of eight friends, mapping their connections with pink circular nodes and blue arrowed links. It represents who is friends with whom, with all individuals initially clustered at the center. The graph uses D3.js version 6's physics-based simulation system, combining `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Users can drag any node to rearrange the network, and hovering highlights a node with a thicker stroke. The data comes from a JSON file containing node and link definitions.

Loading thumbnail…

World Map using TOPOJSON data

This example displays a world map with country boundaries, rendered as an SVG using a natural Earth projection. It shows landmasses in pink, graticules in grey, and country borders in black, all set against a sky-blue sphere. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the geography, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from World Atlas TopoJSON data. The visualization is built with React components managing the data loading and SVG rendering.

Loading thumbnail…

Line Chart Creation ICE7

This line chart shows annual US auto sales from 2005 to 2022, with the x-axis displaying years and the y-axis displaying sales figures. Built with D3 v5, the visualization loads CSV data from a GitHub gist and renders an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. The chart includes labeled axes, a titled plot area, and a blue line path styled via the class line_path.

Loading thumbnail…

Area Chart Creation ICE7

This area chart visualizes temperature readings over a week, displaying the value as a smooth, sky-blue filled region beneath a matching line. The x-axis maps timestamps using a time scale, while the y-axis uses a linear scale for temperature, both rendered with D3 axis components. The code builds the chart with D3 v5’s `area` and `line` generators, applying a `curveBasis` interpolation, and draws to an SVG canvas. Data is loaded from a CSV file hosted as a GitHub gist.

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This chart displays a week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to plot a smooth line on an SVG canvas. Grid lines and labeled axes are styled via CSS, and the data is loaded from a CSV file hosted on GitHub.

Loading thumbnail…

Fork of First Area Chart

This area chart displays San Francisco temperature data over time, loaded from a CSV file, with a smooth curved fill highlighting the temperature range. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.area with curveBasis to generate the filled path. The SVG rendering includes styled axes, tick lines, and a maroon area fill, with a title and clear axis labels for "Time" and "Temperature".

Loading thumbnail…

Fork of LineChart

This chart displays annual US auto sales from 2005 to 2022 as a red line over time. The code loads CSV data via d3.csv, scales the x-axis with d3.scaleTime and the y-axis with d3.scaleLinear, and renders the line using d3.line. Axis labels and gridlines are added with d3.axisBottom and d3.axisLeft, with a rotated y-axis label. The visualization uses SVG rendering within a fixed 960x500 viewport.

Loading thumbnail…

Fork of LineChart

This fork of a D3.js line chart visualizes San Francisco's average daily temperature for December 2020 using a time-series dataset of day and temperature values. The chart renders an SVG with a smoothed basis curve line, a titled plot area, and labeled axes for date and temperature. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis`, along with the `csv` loader to parse the data file, which is then converted to date and numeric types before rendering.

Loading thumbnail…

Pie Chart Creation ICE7

This example visualizes item sales and their percentages as a pie chart, with a legend displaying each item and its corresponding share. The chart uses D3 v5 APIs, including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and color the chart segments. Data is fetched from a remote CSV file, and total sales are calculated to render the percentage labels. The visualization is rendered as SVG, with a legend on the right side that pairs a color swatch with each item’s name and percentage value.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This D3.js pie chart visualizes the top 10 countries by air pollution deaths in 2020, with each slice labeled with the death count in thousands. The chart uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the arcs, segment paths, and categorical colors. A custom legend, built with SVG rectangles and text elements, lists each country alongside its corresponding value, while the data is fetched from a CSV URL using `d3.csv`.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis, with each of the three species represented by a distinct symbol. The chart is built using D3's `scaleLinear`, `scaleOrdinal`, `extent`, `axisLeft`, `axisBottom`, and `symbol` APIs, rendered as SVG with a configured margin and symbol size. The implementation follows the "Towards Reusable Charts" pattern, exposing a configurable `scatterPlot` function that accepts data, value accessors, and layout parameters.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris dataset, mapping sepal and petal measurements to x and y coordinates. The chart is rendered as an SVG using a configurable `scatterPlot` function that employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from d3. It loads data via `d3.csv`, parses numeric fields, and draws circles with a radius of 5 pixels. The implementation uses the `join` operator for efficient element creation and updates, with margins and axes positioned dynamically.

Loading thumbnail…

Penguin dataset Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization uses D3 v5 within a React framework, rendering as an SVG. The code employs d3.csv, d3.scaleLinear, d3.extent for scaling, d3.axisLeft, and d3.axisBottom for axes, with bill length and depth mapped to point radii. Circles are joined to SVG elements using the select and join API, with labels added for clarity.

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis against bill length on the y-axis. Each point represents an individual penguin, colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap) using SVG circles rendered in a React framework. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for the labeled axes with cursive font styling.

Loading thumbnail…

Bar Chart with D3 and React

This example displays product ratings by subcategory in a horizontal bar chart. Each rectangle’s length corresponds to a product’s numeric rating, with axes labeled using D3’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` functions. Built with React and D3 v5, the chart loads data from a CSV file via `d3.csv`, then renders the SVG directly through React’s `rect` elements. The code uses D3’s `select` and `call` methods to apply axis generators, while React manages state and the rendering lifecycle.

Loading thumbnail…

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

This example shows the price of products across different subcategories for a single country, displayed as horizontal bars on an SVG chart. It loads data from a CSV file, sorts it to show the top 15 entries, and uses React state to manage the asynchronous data loading. Rendering combines React components for structure with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes for positioning and tick generation. The code uses `d3.csv` to parse the data, `d3.max` to compute the domain, and manual SVG elements for the gridlines and labels.

Loading thumbnail…

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

This example visualizes the basic Netflix subscription cost across fifteen countries using a horizontal bar chart rendered as SVG. React state manages the loaded CSV data, while D3’s scaleBand and scaleLinear handle the y-axis country categories and x-axis cost values. The chart draws grid lines, axis labels, and blue rectangles for each country, with D3’s csv parser fetching the dataset from a GitHub gist. Axes are constructed manually using scale methods and tick identifications rather than axis components.

Loading thumbnail…

Product Sales Bar Chart

This bar chart displays product sales figures from a CSV file, with each product’s sales value represented by a steelblue bar. The visualization uses D3.js to create an SVG, scaling the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`. Axis labels are rotated, and a title is added, all rendered via the D3 SVG API. Data is loaded asynchronously from a GitHub gist using `d3.csv`.

Loading thumbnail…

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

This example displays a horizontal bar chart comparing basic Netflix subscription costs across fifteen countries. Built with React and D3 v5, the visualization uses D3's `scaleBand` and `scaleLinear` to map country names and dollar amounts to SVG rectangles. The code loads data from a remote CSV file using D3's `csv` parser, then renders the chart with React's declarative JSX syntax. Grid lines, axis ticks, and bar labels are generated by mapping over the D3 scale domains.

Loading thumbnail…

SDV_ICE5

This example displays the metadata of a product details dataset for different countries, including file size, row count, and column count. It fetches the CSV data from a remote URL using d3.csv, formats it with d3.csvFormat, and calculates the size in kilobytes. The resulting message is inserted into a pre element on the page. The visualization uses a CSS background image and D3.js v7 to load and process the data.

Loading thumbnail…

SDV_ICE5

This visualization presents metadata about a product availability dataset across different countries, sourced from a CSV file. A webpage displays the dataset’s size in kilobytes, row count, and column count using a pre-formatted message area, while a hyperlink provides access to the raw data. The implementation uses D3.js (v7) to fetch and format the CSV via `d3.csv` and `d3.csvFormat`, with results embedded in an HTML page styled by CSS. A background SVG image and centered headings frame the output, which is computed purely from the data’s dimensions.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This smiley face, built with D3.js v5, animates by moving its eyebrows up and down. The SVG face is composed of circles, rectangles, ellipses, and an arc path. The code uses D3's `select`, `append`, and attribute setters to construct the face, and a chained `transition()` with a 2000-millisecond duration to animate the eyebrow group's transform. The visualization demonstrates fundamental DOM manipulation through D3's selection and modification of SVG elements.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiley face built with D3.js animates its eyebrows up and down in a rhythmic loop. The SVG drawing includes a large orange head, ears, eyes, a rectangular nose, and a curved mouth path generated with `d3.arc`. Using `d3.select` and `transition.attr`, the eyebrow group shifts between two vertical positions over two-second intervals, demonstrating basic DOM manipulation and chained transitions with D3 v5.