Anitha Shivaramaiah (11537410) - ICE 7, Pie Chart

100%

Anitha Shivaramaiah (11537410) - ICE 7, Pie Chart

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 29, 2023

This pie chart visualizes monthly expenses by sorting the data by amount and displaying the top ten cost categories as colored slices with a legend listing each expense name and its dollar value. The chart is rendered as an SVG using D3 version 5, loading CSV data from a GitHub gist and leveraging `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for layout, shape generation, and color mapping. Mouseover events log the expense amount to the console.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie Chart ICE-7

This pie chart visualizes monthly expenditures, with each slice labeled by a spending category and its numeric value. The chart is rendered as an SVG using D3 v5, with the `d3.pie()` and `d3.arc()` functions generating the segments and their centroids. Data is loaded asynchronously from a CSV file via `d3.csv()`, and a legend lists each category with its corresponding dollar amount. Slice colors are assigned using `d3.scaleOrdinal` with a predefined array of color names.

AAnanyaSamala

82% match

Loading thumbnail…

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures from a CSV file as a pie chart. The chart displays categories as colored slices, with each slice labeled by its associated data value, and includes a legend that maps the colors to their numeric values. The visualization is built using D3 version 5, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for the pie geometry, arc paths, and color mapping. Data is fetched asynchronously via `d3.csv` from a GitHub gist URL, and the SVG canvas is rendered with a fixed width and height.

AAnanyaSamala

79% match

Loading thumbnail…

Anitha Shivaramaiah (11537410) ICE-7, Area chart

This area chart displays earnings data from 2012 to 2023, using a pink filled area with a dark blue line to emphasize trends over time. The visualization loads CSV data via `d3.csv`, parses dates with `scaleTime`, and maps costs using `scaleLinear`. It renders axes with `axisLeft` and `axisBottom`, applies `curveBasis` smoothing to both the `line` and `area` generators, and includes gridlines via tick sizing. The SVG output uses custom CSS classes for styling and labeled axes.

AAnitha Shivaramaiah

78% match

Loading thumbnail…

AnithaShivaramaiah(11537410) 3D Scatter plot using D3.js

This example visualizes monthly expense data across two sets of three months using a 3D scatter plot. It displays two series of markers: one mapping April, August, and December expenses, and another mapping January, February, and March expenses, each with distinct colors, sizes, and opacity. The visualization is rendered using Plotly's `scatter3d` trace type via the `Plotly.newPlot` API, while the data is loaded and parsed with D3.js's `d3.csv` function from a GitHub Gist. Interactive 3D axes with customized background colors, grid lines, and titles represent the different expense categories.

AAnitha Shivaramaiah

78% match

Loading thumbnail…

AnithaShivaramaiah (11537410) 3D Bar Chart with D3.js

This example shows monthly expenses from January through December for multiple expense categories as a 3D multi-series bar chart. The chart renders in an X3DOM scene, driven by the d3-x3d library alongside d3-3d, with D3 v5 loading CSV data from a GitHub gist. The code uses `d3.csv` to parse the data, `d3.select` to attach the chart to a div, and the `d3.x3d.chart.barChartMultiSeries()` component to generate the 3D visualization. Axes and scales are not explicitly customized, relying on the chart component’s defaults.

AAnitha Shivaramaiah

78% match

Loading thumbnail…

Sriram ice 7 pie chart

This pie chart visualizes monthly expenditures by department, with each slice labeled and colored distinctly. A legend on the right lists each department alongside its formatted dollar amount. The code uses d3.pie and d3.arc to generate the segments, d3.scaleOrdinal for coloring, and d3.csv to load data from a remote GitHub gist. Text labels are positioned using the arc centroid method, while the legend is built with SVG rectangles and text elements.

SSriram-Voruganti

78% match

Loading thumbnail…

DV ICE7- Pie Chart for Monthly spendings data

This example shows a pie chart of monthly spending across departments, with each slice labeled and a legend displaying both the department name and its expenditure amount in dollars. The chart is rendered as an SVG using D3 v5, with the pie layout and arc generator (via `d3.pie` and `d3.arc`) computing slice positions and paths. A categorical color scale (`scaleOrdinal`) assigns colors to slices, and text elements are placed at arc centroids using `arcGenerator.centroid`. Data is loaded asynchronously from a CSV file via `d3.csv`, and the legend is built manually with appended rectangles and text elements.

Ppravalika.thogaru10@gmail.com

77% match

Loading thumbnail…

Pie Chart ICE-7

This pie chart visualizes monthly expenditures by department, using proportional slices and a color-coded legend. The chart is rendered in SVG on an HTML page. The code loads CSV data from a GitHub gist, processes it with `d3.csv`, and builds arcs using the `d3.pie` and `d3.arc` APIs. Section colors are assigned via `scaleOrdinal`, and labels and legend values are formatted with `d3.format`.

KKande2011

77% match