trivikramcheluri@gmail.com

ICE7 - Reusable Scatter

This example presents a reusable scatter plot built with D3 that visualizes weather observations from a CSV dataset. The plot maps visibility, temperature, humidity, and wind speed onto x and y axes, with each point rendered as a distinct SVG path shape according to the weather summary. The scatter plot uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and map data values. A `setInterval` function dynamically cycles the x-axis variable every two seconds, demonstrating the chart's reusability. The data loads asynchronously via `d3.csv` and the plot itself is defined as a reusable function following the Towards Reusable Charts pattern.

ICE-8_Network graph_Trivikram

ICE-8_Trivikram

ICE-7 Line Chart

This line chart visualizes the number of pushups performed across consecutive days, with the x-axis mapping each day and the y-axis showing the pushup count. The chart uses an SVG rendered with D3 v5, employing `scalePoint` for the categorical day axis and `scaleLinear` for the numeric pushup values. A monotone curve smooths the line, while axes are styled with tick marks and labels. Data is loaded as CSV from a GitHub gist, with pushup values parsed as numbers before rendering.

ICE7-PIE

This pie chart visualizes the top 10 states' weather conditions in 2020, displaying categorical data as proportional segments with bold, comma-formatted value labels and a legend on the right. Built with Chart.js and the chartjs-plugin-datalabels on a Canvas, it fetches CSV data from a GitHub gist and renders a responsive, titled chart with color-coded slices and hover offsets.

Fork of ICE-7 Area chart

This fork of an ICE-7 area chart visualizes the yearly increase in sales costs. The SVG-based chart uses a smooth, curved area to show the upward trend over time, with labeled axes for year and cost. The code leverages D3 v5’s `area` generator with a `curveBasis` interpolation, along with `scaleTime` and `scaleLinear` for axes. Data is loaded from an external CSV file via `d3.csv`, with years parsed as dates and costs as numbers before rendering.

ICE7 - Reusable Scatter Plot

This interactive scatter plot, built with D3.js, visualizes weather data from a CSV file, mapping variables like Visibility, Temperature, and Humidity to the x- and y-axes. The chart is reusable, designed with a modular `scatterPlot` function that configures scales, axes, and circle radii. It animates by cycling through different x-axis variables every two seconds, using `setInterval` to update the plot. The SVG rendering includes clear axis labels and a custom font, drawing from the Iris Dataset for demonstration.

ICE-7 Line Chart

The ICE-7 Line Chart displays a personal workout routine, plotting the number of push-ups performed each day of the week. It uses D3 version 5 to generate an SVG visualization, with a smooth monotone curve connecting data points. The chart includes labeled x and y axes with grid lines, and the data is loaded from an external CSV file via `d3.csv`. The code uses D3’s scale API, `d3.axisBottom` and `d3.axisLeft`, and the `lineGenerator` path with a `curveMonotoneX` function.

ICE 6_Trivikram

This horizontal bar chart displays flight prices for various airlines, with each bar labeled at its end showing the rounded price in dollars. The visualization uses D3.js v6 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded from an external CSV file containing airline names and flight prices. The chart includes labeled axes for airline and flight price, with bar labels positioned slightly beyond each bar’s end for readability.

Trivikram_ScatterPlot

This example shows the relationship between flight prices and airlines as a scatter plot, with flight price on the x-axis and airline names on the y-axis. It uses D3 v7 to load CSV data, scale the axes with `scaleLinear` and `scaleBand`, and render circular marks via SVG. The code builds the chart by selecting the body, appending an SVG element, and drawing circles positioned with `cx` and `cy` attributes. Axis labels are added with `axisLeft` and `axisBottom`, and the flight-price axis includes extra bottom margin for readability. The dataset is fetched from a remote CSV file, and the visualization fills the entire viewport.

Trivikram - Fork of HTML Starter

This example demonstrates a simple HTML page that uses D3.js to load and display metadata about a CSV dataset, showing the dataset’s file size, row count, and column count in a styled message container. The page also embeds a static SVG image (a rabbit) and applies custom CSS for visual presentation. The code uses the `d3.csv` method to asynchronously fetch a CSV file from a GitHub gist URL, then updates the text content of the message container with the dataset’s details. The visualization highlights basic data loading and DOM manipulation with D3 v7, without any complex charts or interactive features.

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

This visualization displays a colorful Mickey Mouse face constructed entirely with D3.js v5, using basic SVG shapes to form the character’s features. It shows the face, ears, eyes, nose, and hat as distinct geometric elements, with no underlying dataset—pure vector drawing. The code appends circles, ellipses, paths, and a rect to an SVG canvas, setting attributes like `cx`, `cy`, `r`, and `fill` directly. It uses D3’s selection and attribute methods to build the composition programmatically, relying on hardcoded coordinates for each shape to create the final playful portrait.