Ruthvik Bairaboina

project-SDV 4

This stacked area chart visualizes the average prices of U.S. gasoline, broken down into overall, regular, and midgrade averages, across a weekly timeline. The chart uses a total height to represent the sum of these three averages for each date. Built with D3.js v7, the code computes the averages from the raw data, stacks them using `d3.stack()`, and renders the areas with `d3.area()`. An interactive legend allows users to isolate individual averages by dimming the others, and a tooltip displays precise values via a nearest-date bisector. The data is sourced from the provided CSV file.

project-SDV 2

This scatter plot matrix compares weekly U.S. gasoline prices across four fuel grades—All Grades, Regular, Midgrade, and Diesel—from early 1995 onward. Each cell displays a scatter of points, with tooltips revealing the specific week and price values on hover. Built with D3 v7, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG-based rendering includes a cross-product helper to generate all pairwise combinations of the selected columns.

project-SDV 5

A multi-line chart displays retail gasoline prices for four US regions (A1, R1, M1, D1) as weekly time-series data from the provided CSV. Four colored lines show price trends, each represented with a legend button. Clicking a legend button highlights the selected region’s line while dimming others; clicking again restores all. The chart uses D3 v7 with `scaleTime`, `scaleLinear`, `line`, and `curveMonotoneX`, while rendering via SVG. Points include an HTML tooltip showing exact values and dates. The visualization is built with `d3.csv`, axes via `axisBottom` and `axisLeft`, and interactive filtering through `selection.on` and `selection.attr`.

project-SDV 3

This parallel coordinates chart visualizes 13 numeric petroleum price attributes across weekly dates from a CSV file, with each line representing a time series. The D3 v7 code renders SVG paths for all data points in blue, with axes scaled linearly per dimension. Interactive legend buttons allow filtering by dimension, highlighting lines in the top 10% of values for the selected attribute while dimming others. Tooltips display the week date on hover, and the line generator uses `d3.line()` with `d3.scalePoint()` for positioning.

project a

This multi-line chart visualizes four petroleum price metrics (A1, R1, M1, D1) from the PET_PRI_GND_DCUS_NUS_W dataset over time. The visualization uses d3.csv to load and parse the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the paths. Each metric receives a distinct color from d3.scaleOrdinal, with an interactive legend that toggles line visibility by adding a hidden-line class on click. The chart is rendered as an SVG and also demonstrates d3.axisBottom and d3.axisLeft.

Fork of React & D3 Starter for 2.1 network

This interactive network visualization maps a conceptual space-exploration dataset, showing seven category nodes (like Planets and Missions) connected to seven object nodes (like Mars and Apollo 11). The SVG rendering uses d3.v7 to simulate a force-directed layout with d3.forceSimulation, combining link, many-body charge, center, and collision forces, while a drag interaction lets viewers reposition nodes.

Fork of React & D3 Starter for Q2 SDV

This visualization presents a hierarchical tree of space exploration topics, covering celestial bodies, missions, and their subcategories. The D3 v7 tree layout positions nodes vertically, with custom shapes distinguishing each depth level: a red circle for the root, blue squares for the first tier, green triangles for the second, and small yellow circles for leaves. The SVG rendering uses `d3.hierarchy` and `d3.tree()` for layout, while `d3.linkVertical()` generates curved path links between parent and child nodes. The example is built within a React application using the `react-dom/client` API and D3 selection methods for DOM manipulation.

Fork of React & D3 Starter for 1.2

This choropleth map shows the percentage of electricity generated from renewable sources by U.S. state in 2024, using a D3.v7 geoAlbersUsa projection and d3.geoPath to render SVG state boundaries. Hovering over a state triggers a tooltip that displays the state name and its renewable percentage, with the data encoded in a hardcoded JavaScript object keyed by FIPS codes.

Fork of React & D3 Starter for Q1 SDV

Q1

This interactive visualization presents two maps side-by-side: a world map colored by continent and a US map showing unemployment rates by state. The world map uses `d3.geoNaturalEarth1` projection to display countries from the `world-atlas` dataset, with countries colored via `d3.scaleOrdinal` based on a continent mapping. The US map employs `d3.geoAlbersUsa` projection with the `us-atlas` states dataset, rendering geographic paths through `d3.geoPath`. Both maps include graticule overlays, hover tooltips, and SVG-based rendering with animated state transitions between views.

Fork of HTML Starter

This example displays a choropleth map of the world, coloring countries by their sample population values using a sequential blue color scale. The map is rendered with SVG and D3.js’s `d3.geoMercator` projection and `d3.geoPath`. It loads real world geometry from a local GeoJSON file (`countries.geo.json`) and overlays tooltips via SVG `title` elements. Population data is provided as a static JavaScript object, with missing countries shown in gray.

Q1 module 8

This example shows a simple choropleth world map of population for three countries: the United States, India, and China. A Mercator projection via `d3.geoMercator` and `d3.geoPath` renders the embedded GeoJSON polygons. Each country’s fill uses a sequential color scale with `d3.interpolateBlues` based on population values from an in-memory JavaScript object. Hovering reveals a tooltip with country name and population via SVG `<title>` elements.

project-SDV

This heatmap visualizes weekly U.S. retail gasoline and diesel prices from 1995 to 2021, with columns representing different fuel grades and formulations, and rows representing weekly dates. Color intensity encodes price levels, using a viridis color scale. Built with D3.js v7, the visualization renders as an SVG using `d3.scaleBand` for axes, `d3.timeFormat` for date parsing, and `d3.interpolateViridis` for color mapping. A tooltip, triggered by mouseover events, displays the column description, date, and value, while a gradient legend shows the color-to-price correspondence.

1 Question

This interactive scatter plot visualizes the relationship between exoplanet mass and radius relative to Earth, with each dot colored by planet type (Rocky, Gaseous, Ice Giant). Built using D3.js v7, the reusable chart component employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and includes hover tooltips via SVG `title` elements. The code loads data from a CSV file and demonstrates a modular pattern using `ScatterPlot()` factory functions with getter-setter methods for customizing x, y, and color accessors.

Q4

This example shows the daily fuel consumption of a space station over 100 days, with the data plotted as a smooth, teal-gradient area chart. The visualization uses the D3.js library, specifically `d3.area` with `d3.curveMonotoneX` to create the filled area, and draws each data point as an orange circle. Interactive tooltips appear on mouseover, displaying the day and fuel amount. The axes are rendered using `d3.axisBottom` and `d3.axisLeft`, and the chart is created as an SVG with a dark, sci-fi aesthetic.

Q3

A line chart visualizes 100 days of space station fuel consumption, showing a steady upward trend from roughly 1,200 to 1,825 liters. The visualization uses D3.js v7 with SVG rendering to draw a monotone-smoothed line and circular data points. Hovering over any point triggers a CSS tooltip displaying the exact day and fuel amount. The chart loads data from a CSV file, uses `d3.scaleLinear` for both axes, and constructs the path with `d3.line` and `d3.curveMonotoneX`.

Q2

A pie chart visualizes the composition of 150 space cargo shipments by material type, with percentage labels on each slice and a legend listing total units per category. The chart aggregates quantities from a CSV file using `d3.csv` and `d3.rollups`, then renders SVG arcs with `d3.pie` and `d3.arc`. Color encoding uses `d3.scaleOrdinal` with `d3.schemeTableau10`, and slice labels are positioned via `arc.centroid`.

Q1

This scatter plot visualizes the relationship between the mass and radius of 150 synthetic planets, with color encoding the planet type (Terrestrial, Gas Giant, Ice Giant, Dwarf). Built with D3 v7, it uses a reusable `ScatterPlot` function that employs `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeTableau10` for coloring, while the data comes from a seeded random generator. Each dot includes a tooltip showing the planet's name, mass, radius, and type.

3Q_Module-6_Assgnmt

A stacked dashboard of two SVG charts visualizes 150 days of simulated environmental data from a CSV file. The top multi-series line chart maps temperature, humidity, and air-quality index over time using `d3.line` and `d3.scaleOrdinal` for series colors, with axes and a legend. Below, a combined chart pairs bars for the air-quality index (`d3.scaleBand`, rects) with a temperature line over the same x-axis. Both charts share a common day axis, built with D3 v7 scales, axes, and shape primitives.

1Q_SDV_Assgnmt6

A bar chart displays the average annual temperatures of U.S. cities in degrees Celsius, sourced from a local CSV file. The chart uses a vertical bar for each city, with the y-axis representing temperature and the x-axis showing city names, which are rotated for readability. Built with D3 v7, the visualization employs `scaleBand` and `scaleLinear` to map data, `selectAll` to create SVG rectangles, and `axisBottom` with filtered tick values to manage crowded labels. The chart includes a title, axis labels, and a light gray background.

2Q-Module-6_Assgnmt

This scatterplot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis for three iris species. Using D3 v7, it renders SVG circles with an ordinal color scale distinguishing setosa, versicolor, and virginica. The chart includes labeled axes, a descriptive title, and a legend. Data is loaded asynchronously via `d3.csv` from the provided GitHub URL, with linear scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and circle elements positioned by data attributes.

temperature_data.csv

This bar chart displays the average annual temperature for numerous U.S. cities, with each bar’s height corresponding to the temperature in degrees Celsius. Built with the D3.js library using `d3.scaleBand` and `d3.scaleLinear`, the visualization renders as SVG on a light background. It reads the `temperature_data.csv` file, parses the numeric temperature values, and draws the bars, axes, and a rotated x-axis label list using D3's modular APIs. The chart’s title and axis labels are added as SVG text elements.

temperature_data.csv

This example displays a bar chart of average temperatures for major U.S. cities using React with D3 v7. The visualization presents the data from a CSV file with city names on the x-axis and temperature values on the y-axis, using d3.scaleBand and d3.scaleLinear for positioning. Clicking a bar highlights that city and dims others, with d3.axisBottom and d3.axisLeft providing labeled axes and gridlines. The chart uses a teal color scheme with hover effects, and supports responsive resizing through a ResizeObserver that triggers re-rendering.

Planets dataset

This visualization of a solar system dataset combines several D3.js v7 chart types. A bar chart compares planet diameters in kilometers, while a circular layout and a mini planet strip show relative distances from the Sun and planet sizes. The code uses `d3.csv` with `d3.autoType` to load a GitHub Gist dataset, then builds the charts using SVG elements. Custom CSS enhances the design with a radial gradient background and card-based layout. A header starfield with a stylized sun is generated using `d3.range` and random values.