mounishnaidu96@gmail.com

Fork of HTML Starter

Fork of HTML Starter

Fork of Social Network Graph --> ICE-8

Fork of Fork of ICE 7 Area Chart

The visualization displays infant mortality rates from 1998 to 2011 using a combined line and area chart. It shows the trend of the infant rate over time, with the area under the curve emphasizing the magnitude of the values. The chart is built with D3.js v5, using `d3.scaleLinear` for both axes, `d3.line` and `d3.area` with `curveBasis` for smooth interpolation, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. The data is loaded via `d3.csv` from a remote CSV file and rendered as SVG.

Fork of ICE-7 Line Chart

This line chart visualizes annual cotton sales from 2009 to 2021, using a red polyline to trace the trend over time. It demonstrates a D3 v5 workflow with an SVG-based rendering approach. The code employs `scaleTime` for the year-based x-axis and `scaleLinear` for the sales y-axis, while `line()` generates the path. Axes are rendered via `axisBottom` and `axisLeft` with gridlines, and data is loaded as CSV from a remote gist. The chart includes labeled axes, a title, and a styled line, showcasing typical D3 data-joining and margin conventions.

Fork of Fork of Fork of HTML Starter

This example shows the calorie distribution of various foods using a pie chart, with a legend displaying each food's name and calorie count. It loads a CSV dataset from a GitHub gist using D3's `csv` function and renders the chart as SVG. The code uses `pie()` to compute arc data, `arc()` to generate the path segments, and `scaleOrdinal()` to assign categorical colors. Text labels and legend entries are added with `select()` and `append()`, while `format('.4~g')` formats the calorie values in the legend.

Fork of Reusable D3 Scatter Plot

This gallery item presents a fork of a reusable D3 scatter plot that visualizes nutritional data from a Food dataset, plotting variables like Protein and Calories as points. The chart cycles through different x-axis dimensions—Calories, Carbohydrates, Fat, and Protein—every two seconds using `setInterval`, updating the visualization with animation. Built with D3 v6, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined and updated dynamically. The implementation follows a reusable chart pattern, using closures and setter functions to configure the plot’s properties.

Fork of Fork of ICE 7 Area Chart

This chart visualizes US cancer cases from 2009 to 2022, plotting the infant mortality rate against the year. It combines a black line representing the trend with a filled area beneath it to emphasize the data’s magnitude. The visualization uses D3 v5’s `scaleLinear`, `line`, and `area` generators, with `curveBasis` for smooth interpolation. Data is loaded from a CSV file via `csv()`, and axes are rendered with `axisBottom` and `axisLeft`. The SVG output includes labeled axes and gridlines, with the area chart styled in purple.

Fork of Fork of ICE 7 Area Chart

This visualization presents U.S. cancer case data from 2009 to 2022, combining a smooth line chart with an area fill to emphasize the upward trend. The SVG uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to plot the data, with the area generator creating the shaded region beneath the line. Data is loaded from a CSV via `d3.csv`, and the code applies `curveBasis` for smooth transitions between points. The chart labels both axes, and the area’s dark purple fill contrasts with the black line, highlighting the change in case counts over time.

Fork of Area Death's

This line chart displays temperature data (in degrees Celsius) for one week in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render an area chart with a smooth curve, mapping dates to the x-axis and temperature values to the y-axis. The code employs D3’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs to generate the filled path, with axes formatted using `axisBottom` and `axisLeft`. The chart is drawn as an SVG, featuring a red title and orange fill, with gridlines and axis labels styled via CSS.

Fork of ICE 7 Area Chart

This example visualizes the area and line chart of car sales in India from 2009 to 2019, with country names parsed as time values on the x-axis and the area metric on the y-axis. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, and `line` with `curveBasis` to create smooth paths. The chart loads CSV data from a GitHub gist, applies a blue line and orange filled area, and customizes axes with tick formatting and labels.

Fork of ICE 7 Area Chart

This fork of the ICE 7 area chart visualizes car sales in India from 2009 to 2019, combining a smoothed line and a filled area to show sales trends over time. The chart uses D3.js v5 with SVG rendering, leveraging `scaleTime` and `scaleLinear` for axes, `line()` and `area()` generators with `curveBasis` for smooth paths, and `csv` to load the data. Axis labels and gridlines are styled via CSS, with sales values formatted using `.3s` notation.

Fork of Line Chart For The Restaurant Data

This fork of a line chart visualizes cotton production and calorie data from a restaurant dataset, plotting profit in millions against year. The chart uses an SVG rendering approach with D3.js v7, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It draws a green line via `d3.line()` and adds interactive circles with hover tooltips using D3’s `join` pattern and `title` elements. The data is loaded from a CSV file hosted on GitHub, with Poppins fonts and a teal background styled via CSS.

MOUNISH_ICE6

This visualization displays the relationship between Revenue and Crop1 Length across different countries, with each circle representing a data point colored by country. The scatterplot uses D3.js v6 to load CSV data, scale the axes with `scaleLinear`, and render the circles as SVG elements. The x-axis shows Revenue Length while the y-axis shows Crop1 Length, with axis labels added via `axisBottom` and `axisLeft`. Country-specific colors are assigned through a marker function, and the visualization adapts to the full viewport size using `window.innerWidth` and `window.innerHeight`.

Fork of A4_Bar-chart

A bar chart compares the populations of cities, with each bar colored steel blue and turning orange on hover, while a tooltip displays the city name and population value. The visualization is built with React and uses D3 v6 to load data from a CSV file via `d3.text`, parse it into an array, and render the chart as SVG. Axes are added with `d3.axisBottom` and `d3.axisLeft`, using a band scale for cities and a linear scale for population, with the chart including rotated x-axis labels and a title.

Fork of A4_Bar-chart

This fork of A4_Bar-chart visualizes fruit sizes as a bar chart. The SVG bars are rendered using D3’s `scaleBand` and `scaleLinear`, with a `mouseover` handler that turns a bar orange and shows a tooltip. Data is fetched from a GitHub gist and parsed from CSV text. The chart includes rotated x-axis labels and axis titles labeled "FRUITS" and "SIZE". Built with React but uses vanilla D3 for SVG layout and interactions.

Fork of Fork of Loading and Parsing CSV Data

This example visualizes the loading and parsing of CSV data using D3.js, displaying a summary of the dataset alongside a static quantum circuit diagram. The page shows a purple circle for each qubit and a CNOT gate, with text labels for Q0, Q1, and Q2. The code uses `d3.csv` to fetch and parse the external CSV file, then computes and displays file size in kilobytes and bytes, row count, and column count in a `<pre>` element. The visualization combines SVG shapes for the quantum schematic with D3’s data-handling methods to report dataset metadata.

Fork of A smiley moon with star and cloud

A night scene in SVG shows a blurred white moon with a visible eye, eyebrow, and red smile, alongside a star, cloud, rain, a human figure, tree, bird, and vehicle. The code uses SVG filters like `feGaussianBlur` for the moon’s glow, radial gradients for the eye, and basic shapes like `circle`, `polygon`, and `path` for objects. All elements are drawn directly in HTML with inline SVG, rendered on a blue background.