manthenasirisha06@gmail.com

Fork of Fork of MBB Q8.2

ICE-8 Network Graph

ICE-8 TREE GRAPH

Fork of Reusable D3 Scatter Plot

This fork of a D3.js scatter plot animates through three pairings of nutritional data from a CSV file of menu items: carbohydrates versus protein, carbohydrates versus total fat, and protein versus total fat. The code uses D3 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles with an SVG. A `setInterval` callback updates the x and y value mappings every two seconds, changing the chart’s title accordingly. The visualization employs a custom `scatterPlot` function and D3’s `selectAll` and `join` for efficient updates.

Fork of Reusable D3 Scatter Plot

This example presents three separate scatter plots visualizing nutritional information from a menu items dataset, comparing carbohydrates, protein, and total fat across different food items. Using D3.js v7, each plot renders with SVG circles, band scales for the categorical menu items along the x-axis, and linear scales for numeric nutritional values on the y-axis. The code loads the CSV data with `d3.csv`, then calls a reusable `createScatterPlot` function to generate each chart with rotated axis labels, titles, and rotated text ticks.

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the nutritional values of ten popular McDonald's menu items, comparing carbohydrates, protein, and total fat. The data is loaded from a CSV file and rendered using D3.js v7. The chart uses a band scale for the x-axis and a linear scale for the y-axis, with each item positioned along the bottom. Three distinct symbol types—diamond, cross, and circle—represent the different nutrients, plotted using `d3.symbol` and colored red, blue, and green respectively. The visualization includes labeled axes, a titled chart, and rotated x-axis labels for readability.

Fork of Reusable D3 Scatter Plot

The scatter plot visualizes nutritional values—carbohydrates, protein, and total fat—for McDonald's top ten selling menu items, using a red, blue, and green circle for each nutrient per item. It loads CSV data via `d3.csv` and renders SVG circles positioned with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated labels, while `d3.select` and `append` build the chart.

Fork of ICE 7 Area Chart

This area chart displays Domino’s stock closing prices over time, with the x-axis showing years and the y-axis showing price. The chart uses d3.area to create the shaded region, d3.scaleTime and d3.scaleLinear for the scales, and d3.axisBottom and d3.axisLeft for the axes, with gridlines added via tickSize. Data is loaded asynchronously from a CSV using d3.csv and parsed with d3.timeParse. The SVG rendering includes axis labels and a semi-transparent steelblue fill for the area.

Fork of ICE 7 Area Chart

This area chart visualizes Domino’s sales in India from 2009 to 2019, with a filled region and overlaid line showing sales growth over time. Built with D3 v7, it uses `d3.area()` and `d3.line()` with a monotone X curve, while `d3.scaleTime()` and `d3.scaleLinear()` map dates and sales values. The SVG rendering includes a grid, axes, and labeled y-axis, with data loaded from a CSV file hosted on GitHub. The chart emphasizes trend clarity through a semi-transparent steelblue fill and a bold stroke.

Fork of ICE 7 Area Chart

This example visualizes Domino’s stock price over time as a smooth line chart, emphasizing the overall trend in closing values. It uses D3 v7 to load CSV data, parse dates, and construct an SVG area plot with a monotone curve. The chart includes labeled axes, a grid for readability, and a clear title, while the code applies D3’s `scaleTime`, `scaleLinear`, and `d3.line` APIs to map data points.

Fork of Line Chart

This visualization displays Domino's stock closing prices over time as a line chart. The line graph shows the trend of stock value changes, with a light gray grid providing reference points. The chart is built using D3.js v7, employing `d3.csv` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.line` to generate the path. Both axes are labeled "Date" and "Close Price," with gridlines created via `d3.axisBottom` and `d3.axisLeft`.

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Total Fat and Protein content for a curated selection of McDonald’s menu items, with circle size encoding the Carbohydrate level. The chart uses D3.js (v7) to build linear scales and axes, drawing circles for each food item. A reusable scatter plot module, configured with accessor functions for the x, y, and z values, renders the data from a CSV file loaded via D3’s `csv` function. The visualization highlights nutritional comparisons among popular items, using axis labels and gridlines to clarify the quantitative values.

Fork of Line Chart

A line chart displays Tesla sales from 2010 to 2022, with years on the x-axis and sales figures on the y-axis. The SVG graphic uses D3 v7’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to plot the data. A CSV file is loaded via `csv` and parsed, converting sales to numbers and years to Date objects. The chart includes labeled axes, grid lines, and a title, with margins positioning the plot area inside an 800×600 viewport.

Fork of Line Chart

This example visualizes Tesla’s historical stock closing prices as a line chart over time. It first shows the price trend across the date range, then uses D3.js v7 to load CSV data, parse dates, and map the values to a time-based x-scale and linear y-scale. The code draws the line with a steelblue stroke, adds axes and labels, and relies on `d3.csv`, `d3.timeParse`, `d3.scaleTime`, and `d3.line`. The rendering uses SVG, with the data sourced from a remote CSV file hosted on GitHub.

Fork of ICE-7 Line Chart

This example visualizes nutritional component comparisons across ten McDonald’s menu items, plotting three lines for total fat, protein, and carbohydrates on a shared band scale. It uses D3 v7 with SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `curveMonotoneX` for smooth paths. Data is loaded from a CSV via `d3.csv`, and `d3.schemeCategory10` colors the lines. The chart includes rotated x-axis labels and a legend, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Fork of ICE - 7 Pie Chart Maanas Katta

This example visualizes the calorie counts of McDonald's top 10 best-selling menu items in a pie chart, with a legend listing each item and its calorie value. It uses D3.js v7 to load CSV data, compute the pie layout with `d3.pie()`, and render the arcs using `d3.arc()`. The chart is drawn as an SVG, with a color scale (`d3.scaleOrdinal`) mapping each item to a distinct color. The data comes from a remote CSV file containing nutritional information, and the visualization emphasizes the relative caloric contribution of each item.

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes the relationship between total fat content and calories for various food items, with each data point represented as a circle. The chart uses D3.js v7 (d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft) to load nutritional data from a GitHub gist and render an SVG with interactive hover effects that enlarge dots. Axes include gridlines, while labeled axes and a title clarify the comparison.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example demonstrates how to build interactive charts by combining React and D3 v7. It renders a bar chart and accompanying line series using SVG, where user-driven selections update the displayed marks and channels. The visualization highlights how D3's data-join and scales work with React's component model to produce declarative, reusable chart elements.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays top-selling car brands based on price data loaded from a CSV file. The visualization uses React for component structure and D3.js v7 for scaling and axis rendering. The code leverages `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and SVG `rect` elements to draw bars. The chart renders in a browser with a title, showing each model's price on the y-axis and model names on the x-axis.

Fork of Fork of Fork of Loading and Parsing CSV Data

This example visualizes the placement status of students from a CSV dataset using D3.js. The data is loaded and parsed with `d3.csv`, then summarized with file size, row count, and column count displayed as text. A pie chart rendered in SVG compares the percentage of placed versus unplaced students, using `d3.pie` and `d3.arc` with distinct colors and percentage labels. The visualization demonstrates loading, parsing, and aggregating CSV data, followed by a simple categorical comparison via a donut-style pie chart.

Fork of Fork of Create a face with d3.js!

This example builds a stylized face from basic SVG shapes, including circles, ellipses, rectangles, and an arc-generated mouth. It demonstrates how D3 selections and the `arc` function from d3-shape construct a static visual composition. The code explicitly imports `select` and `arc` from D3 v7, and loads a local CSV file from a Gist URL, though the data is not used in the rendering. The face is centered on a 960×500 canvas, with eyes, eyebrows, and a red arc mouth positioned relative to the face’s radius.

Fork of Fork of Create a face with d3.js!

This example demonstrates how to build a simple face visualization using D3.js, drawing a circle for the head, ellipses for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code loads D3 v7 from UNPKG and also fetches a CSV dataset from a remote URL, logging its size and structure to the console. Using SVG rendering, the visualization positions shapes with explicit coordinates and styling, while the dataset loading showcases D3’s `csvParse` function for handling tabular data.

Sirisha

This example draws a cheerful beach scene with a smiling sun, a palm tree, fish, and ocean waves using D3 v7. It demonstrates basic SVG shape generation with `select`, `append`, and attribute setters like `attr`, constructing elements from hard-coded coordinates. The visualization includes a sky, ocean, sand, and two fish with fins and bubbles, all built programmatically. It shows how to compose a static illustration without data binding, using simple geometric primitives and loops for repeated elements like palm leaves.