Sadvik

ICE 8-1Q Sadvik

This visualization presents two interactive geographic maps side by side: a world map using the Natural Earth projection and a United States map using the Albers USA projection. The world map colors countries by population (in millions) using a sequential blue interpolator, while the US map shades states by crime rate using a green interpolator. Built with D3 v7 and TopoJSON, both maps load geographic data from CDN-hosted world-atlas and us-atlas JSON files, rendering SVG paths via `d3.geoPath` with hover tooltips displaying country or state names and their corresponding values. Non-highlighted regions appear gray, indicating missing data.

Apr 9, 2026

ICE 8- 1Q Sadvik Kondadi

This example presents two interactive choropleth maps side by side: a world map visualizing population data using a Natural Earth projection, and a United States map displaying crime rates via an Albers USA projection. Both maps use D3 v7 and TopoJSON to render SVG paths, with sequential color scales (blue for population, green for crime) encoding numeric values. Hovering over a country or state triggers a tooltip showing the region name and its corresponding statistic. The code loads GeoJSON from world-atlas and us-atlas packages accessed via CDN.

Apr 9, 2026

ICE-7 Q4 Sadvik

This area chart shows the average electric vehicle range by model year from 2015 to 2020, with a light blue filled region and an overlaid blue line tracing the upward trend. The visualization aggregates raw per-year data points into yearly averages using `d3.rollup` with `d3.mean`, then renders the result as an SVG path via `d3.area` and `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while linear scales (`d3.scaleLinear`) map the data domain to pixel coordinates within a fixed viewBox.

ICE-7 Q3 Sadvik

This visualization displays the trend of average electric vehicle range per year from 2015 to 2020, using a line chart with red circular markers at each data point. The chart aggregates raw yearly range values into yearly averages using `d3.rollup` with `d3.mean`, then renders the line with `d3.line` and SVG paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the x-axis formatted as integers to reflect calendar years. The visualization uses D3 v7 with an SVG rendering approach, presenting clear upward growth in average EV range over the six-year period.

ICE-7 Q2 Sadvik

This pie chart shows the distribution of vehicle types—Sedan, SUV, Hatch, and Crossover—from a small, static dataset of ten entries. The chart is rendered as an SVG using D3 v7, leveraging `d3.pie` to compute arc segments and `d3.arc` to generate the paths for each slice. Colors are assigned via `d3.scaleOrdinal` with the `schemeCategory10` palette, and labels are positioned using the arc’s `centroid` method.

ICE-7 1 Q Sadvik

This scatter plot visualizes an electric vehicle dataset, showing the relationship between average price and electric range for different vehicle types. Each point represents a vehicle, with position determined by price on the y-axis and range on the x-axis. The visualization uses D3 v7 with an SVG renderer, employing linear scales for both axes and a color scale to distinguish between Sedans, SUVs, Hatches, and Crossovers. The code explicitly creates axes, adds labels, and includes a categorical legend with colored circles, using methods like `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`.

ICE-7 1 Q Sadvik

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three flower species using distinct BBC-style colors. Hovering over the legend highlights points of the selected species while dimming others. Built with D3.js, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render the visualization, with data loaded via `d3.csv` from Fisher's Iris dataset.

Fork of React & D3 Starter

This example visualizes EV range and price trends across 2020–2023 as a combined bar chart and line chart. Steelblue bars encode driving range against a left axis, while a red line shows average price against a right axis. The visualization is built with React and D3 v7, using `d3.csv` to load the dataset, `scaleBand` and `scaleLinear` for axes, and `d3.line` to generate the price path. It renders as an SVG with `axisBottom`, `axisLeft`, and `axisRight` for multi-scale comparison.

Fork of React & D3 Starter

This scatterplot shows the relationship between the base price and electric range of various electric vehicles, with each orange circle representing a model. The chart plots price on the x-axis and range on the y-axis, revealing clusters and outliers among Tesla, Lucid, Ford, and other brands. The visualization is built using React and D3 v7, loading data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and appends circles to the SVG using `d3.select` and `.enter()`.

Fork of React & D3 Starter

This bar chart displays the average electric range for different car manufacturers, using a dataset of recorded ranges. Built with React and D3.js v7, it renders an SVG graphic with steel blue bars. The chart uses D3 scales, `d3.csv` for data loading, and `d3.axisBottom` and `d3.axisLeft` to create the axes from the provided CSV file containing Make and ElectricRange values.

Fork of ICE6-BarChart-Sadvik

This example renders an interactive scatterplot of 100 data points, each loaded from a CSV file and mapped to x and y coordinates. Clicking a circle turns it white with a black stroke, highlighting the selection while all others remain black. Built with d3.v7, React, and SVG, it uses `d3.scaleLinear` for axis scaling and `d3.selectAll` with a `join` operation to update the circles. The chart's dimensions adapt to its container via a `ResizeObserver` custom hook, and the visualization is re-rendered on data or selection changes.

ICE6-BarChart-Sadvik

This example displays a bar chart of sales figures for 100 products (P1–P100), with each bar’s height representing its numeric sales value. The visualization is rendered as SVG elements, with D3.js v7 handling data loading via `d3.csv`, linear scales, and axis generation. The React app uses a `ResizeObserver` to dynamically size the chart and re-renders the visualization when the container dimensions change, ensuring responsive scaling.