sowjanya

Q2 ICE-8 assignment.

This example renders a family tree as a hierarchical D3 visualization, showing three generations of nodes linked by curved paths. The tree layout positions each family member in a clear vertical structure, and circles are color-coded by generational depth: orange for grandparents, blue for parents, and green for children. The visualization uses `d3.hierarchy` to structure the data and `d3.tree` to compute the layout, with `d3.linkVertical` generating the connector paths between nodes. A legend explains the color scheme, and the SVG is built with `d3.select` and `.append` operations.

Nov 1, 2025

World Map – ICE-8

This choropleth map visualizes global population data using a Mercator projection and color-encoded country values. D3 v7 loads GeoJSON world boundaries and CSV population data via `Promise.all`, then applies a sequential `d3.scaleSequential` with an `interpolateYlGnBu` color scheme. The code uses `d3.geoPath` and `d3.geoMercator` to render SVG paths, and displays a linear gradient legend with an axis. Countries lacking population data render in gray, while hover tooltips provide country names and values.

Nov 1, 2025

Fork of Area Chart ice-7

This area chart displays the relationship between horsepower and miles per gallon for a set of cars, with a filled green region showing how MPG decreases as horsepower increases. The visualization loads a CSV file from GitHub using `d3.csv`, converts the numeric fields, and sorts the data by horsepower. It uses `d3.scaleLinear` for both axes, `d3.area` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` to render the coordinate axes. The SVG output is styled with CSS for a clean presentation.

Fork of D3 Starter - line chart

This line chart visualizes the relationship between horsepower and miles per gallon (MPG) for a dataset of cars, revealing the general trend of decreasing fuel efficiency as engine power increases. Sorted by horsepower, the data is plotted as a single smooth line using D3's `d3.line` generator, with scales defined by `d3.scaleLinear` and axes rendered via `d3.axisBottom` and `d3.axisLeft`. The CSV data is loaded asynchronously from a GitHub repository and drawn as an SVG within a styled container. The chart includes labeled axes for horsepower and MPG, with the line styled in a teal color.

Fork of D3 Starter -(pie chart)

This pie chart visualizes the distribution of car horsepower into three ranges (Low ≤120 HP, Medium 121–160 HP, and High >160 HP) using data from a CarPerformance.csv dataset. The chart uses d3.csv to load the data, d3.scaleOrdinal for color encoding, and d3.pie with d3.arc to generate SVG path elements. Labels are positioned using arc centroid calculations, and a legend appears in the top-right corner. The visualization demonstrates how D3 v7 transforms tabular data into an interactive-free categorical pie chart with clean SVG rendering.

CarPerformance PieChart

This pie chart visualizes how vehicles in the CarPerformance dataset are distributed across three horsepower ranges: low (≤120 HP), medium (121–160 HP), and high (>160 HP). Each slice’s size reflects the count of vehicles in that category, with colored segments and a legend for identification. The visualization loads data from a CSV file using `d3.csv`, then applies `d3.pie` and `d3.arc` generators to create the slices. A `d3.scaleOrdinal` color scale maps the categories to distinct colors, while `arcGen.centroid` positions the labels within each slice.

CarPerformance pie chart

This pie chart shows the distribution of cars by cylinder count in the CarPerformance dataset. The visualization groups entries by cylinder type and maps the resulting counts to pie arc sizes, with each segment labeled by its cylinder category. It uses D3 v7 APIs including `rollups` for aggregation, `pie` and `arc` for generating the chart geometry, and `scaleOrdinal` for color encoding. A legend identifies the color-to-cylinder mapping, and the data is loaded and parsed via D3's `csv` function from a GitHub-hosted CSV file.

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes relationships in automobile performance data, comparing miles per gallon against vehicle attributes including weight, horsepower, displacement, and acceleration. Each point is colored using a plasma interpolator based on horsepower, and the x-axis automatically cycles through different attribute comparisons every three seconds. The visualization uses the reusable chart pattern from D3 v6, combining scaleLinear, extent, axisBottom, axisLeft, and transition-based animation. Data comes from a CarPerformance CSV dataset hosted on raw GitHub.

company_growth.csv

A bar chart depicts company profit growth over time from 2018 to 2030. The chart uses a static dataset of financial records with year and profit values. Built with React and D3 v5, the visualization renders scalable vector graphics (SVG) and employs `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Bars are colored indigo, with grid lines and tick labels formatted in millions, and the chart includes a title and a legend.

Fork of ICE 6 Scatter Plot Chart

This scatter plot shows projected company financials—Revenue, Expenses, and Profit—from 2018 to 2030, with each point colored by category and interactive hover tooltips revealing year, value, and employee count. Built with React components and D3.js v5, it uses `scaleLinear` and `extent` for scales, `axisBottom` and `axisLeft` for axes, and `csvParse` on static CSV data. The SVG rendering includes custom grid lines, a legend, and drop-shadow effects on hover.

Fork of company_growth

This line chart displays company financial performance from 2018 to 2030, tracking revenue, expenses, and profit in millions of dollars. It uses the D3 library’s `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render three colored lines with corresponding scatter points. The chart includes interactive hover effects via a legend that fades non-hovered metrics to 0.2 opacity. Data is embedded directly in configuration as CSV and parsed with `csvParse`.

Fork of Fork of Scatter plot

A scatter plot visualizes company financial performance from 2018 to 2030 using CSV data, encoding Revenue, Expenses, and Profit as colored circles whose size reflects employee count. D3 v7 API calls including `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom` render the SVG chart, while mouseover events trigger a positioned tooltip showing metric details. A legend distinguishes the three financial metrics, and a secondary legend maps circle size to employee numbers.

Fork of ICE 6 Scatter Plot Chart

This bar chart tracks company profit from 2018 to 2030, with each year’s profit value labeled above its corresponding bar. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and SVG rendering. Synthetic financial data provides the year and profit values, while CSS drop-shadow filters and hover effects add visual depth.

Fork of company_growth.csv

This visualization presents company financial performance over time, showing revenue, expenses, and profit for each year from 2018 to 2030. It uses grouped bar charts where lighter bars represent expenses and darker bars overlay to show revenue, with profit values labeled above each bar. The implementation combines React's state management with D3.v7 for rendering, using `scaleBand` for the x-axis years, `scaleLinear` for the y-axis amounts, `axisBottom` and `axisLeft` for axes, and a `ResizeObserver` for responsive sizing. Clicking a bar highlights that year's data.

Fork of Fork of Fork of ICE-6 (Multi series chart)

This multi-series chart combines bar and line encodings to compare financial metrics of a fictional company across years, highlighting revenue and expenses as bars against profit and employee counts as overlaid lines. Built with React and D3 v6, the visualization uses separate y-scales for bars and each line series, with axes rendered via `axisLeft`, `axisRight`, and `axisBottom` on an SVG. The code employs `scaleBand` and multiple `scaleLinear` instances, then draws bars as `rect` elements and lines using D3's `line` generator, with gridlines created from a reused left axis.