RamyapriyaPutta

Fork of USA Country Map

This fork of the USA Country Map visualizes state boundaries with a custom geographic projection. The map shows land areas in sky blue and state interiors outlined in pink, rendered as SVG paths. Using d3.geoPath with the geoAlbersUsaTerritories projection, it draws features from a TopoJSON dataset loaded via d3.json. The code applies topojson.feature and topojson.mesh to extract land polygons and interior boundaries, then renders them through React components. The visualization displays only the map with no interactive elements, focusing on the territorial shape of the United States.

Apr 4, 2022

ICE8 World Map

This visualization presents a world map using a natural Earth projection, with countries filled in sky blue and outlined in black against a maroon sphere, all set on a pink background. The map is rendered as an SVG using D3.js (v5) and topojson, pulling geographic data from a remote GitHub gist. The code demonstrates the use of `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the country boundaries, while styling is applied via CSS classes for the sphere and countries.

Apr 4, 2022

Fork of ICE8 network graph

This network graph visualizes connections between US cities, with nodes representing locations like Philadelphia, Dallas, Austin, and Newark, and orange links showing relationships between them. The graph uses a force-directed layout powered by the older `d3.layout.force` API, which simulates physical forces to position nodes, with node charge and gravity parameters affecting the spatial arrangement. Nodes appear as pink circles with yellow borders and black labels, rendered as SVG elements, and users can interactively drag nodes around the canvas. The data comes from a linked `graphFile.json` file, and the implementation leverages the D3.js v4 library alongside an older v2 script for the force simulation.

Apr 3, 2022

Reusable Scatter plot

This reusable scatter plot presents the Iris dataset, mapping petal and sepal measurements onto a dynamic SVG visualization. The code employs D3.js v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to parse data and render animated circles. A `setInterval` cycles through different measurement columns every two seconds, updating the x-axis mapping while colors distinguish iris species (green, blue, red). The chart leverages a custom `scatterPlot` module with a fluent interface for width, height, margins, and radius, encapsulating the reusable chart pattern.

Fork area

This visualization shows the number of applications over time as a purple filled area chart, with the title "Number of Applications" displayed above the plot. The code loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the chart using D3 v6’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs. Axes are drawn with `axisBottom` and `axisLeft`, including grid lines and custom tick formatting. The SVG output includes styled axis labels, ticks, and a title, all laid out within specified margins.

ICE 7 : Line Chart

This line chart shows college applications over time, with the x-axis representing years and the y-axis showing application counts. The visualization uses D3.js v5 within a React framework, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to render the SVG path. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse`. The chart includes grid lines, styled axis labels, and a red line against a dark background.

ICE - 7 Pie Chart

This example displays the percentage of total sales for different items in a pie chart using D3 v5. The code loads CSV data from a GitHub gist and renders an SVG with a pie chart and a legend, with each slice and legend entry colored by a fixed ordinal scale. It uses `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arc segments, and `d3.scaleOrdinal` for color mapping, while formatting the percentage labels with `d3.format`.

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths attributed to air pollution in 2020, using d3.pie and d3.arc to generate SVG path segments and labels. Each slice displays its death count in thousands, while a legend uses d3.scaleOrdinal with a hardcoded color array to map countries to colors. The data is fetched asynchronously from a CSV URL using d3.csv, and the chart is rendered on a 960×500 SVG canvas.

Pie Chart

This visualization is a pie chart showing 2022 US auto sales by brand. Each slice of the pie represents a brand’s year-to-date sales volume, with a corresponding legend on the right displaying the brand names and their sales values in thousands. The chart is built using D3 v5, leveraging the `pie`, `arc`, `scaleOrdinal`, and `format` APIs to create and style the SVG segments. Data is loaded from a remote CSV file via `d3.csv`.

Pie Chart

A pie chart displays 2022 US auto sales by brand. The SVG visualization is generated with D3 v5, where the chart partitions data into colored slices using the `d3.pie` layout, `d3.arc` for path and label geometry, and a categorical color scheme. Data is loaded from a remote CSV file, and labels are positioned via arc centroids.

Pie Chart

This interactive dashboard combines a world map with a timeline to visualize historical rocket launches. A bubble map displays launch sites as red points overlaid on a geographic basemap built with `d3.geoPath` and TopoJSON world atlas data. A brushing-enabled date histogram below, constructed with React and D3 scales, filters the map’s displayed launch points based on the selected date range. The visualization uses D3 v7 for projections and SVG rendering within a React component hierarchy.

ICE 6 Scatter Plot

This scatter plot visualizes the Iris dataset by mapping petal length and petal width to point positions. Each point represents an iris flower, and its color indicates the species (pink for setosa, red for versicolor, green for virginica). The visualization is built using D3 v6 and rendered as SVG, with axes created using `axisLeft` and `axisBottom`. The code loads data from a CSV file, uses `scaleLinear` for coordinate mapping, and applies `selectAll` with a `join` operation to create the circle marks.

Mar 7, 2022

RamyaPutta

This example displays the population of ten countries in 2019 using a horizontal bar chart rendered as SVG. It fetches CSV data via `d3.csv` and uses React hooks (`useState`, `useEffect`) to load and manage the dataset. The chart employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and custom tick rendering with grid lines and labels. Bars are drawn as green `<rect>` elements, with axes manually created using D3’s scale functions rather than `axisLeft` or `axisBottom`.

RamyaPutta

This example visualizes sales data for 10 U.S. states using a horizontal bar chart rendered as SVG. It loads a CSV file from a GitHub gist, uses `d3.csv` for data parsing and `scaleBand`/`scaleLinear` for positioning. React manages the component state and lifecycle, while D3’s `max` and `format` handle numeric scaling. The chart includes gridlines and axis labels built with custom SVG elements, with bars colored blue by default. The data updates asynchronously, showing a loading message until the CSV is fetched and processed.

Ramya - ICE-6

This interactive bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Horizontal bars are ordered by country name, with population values formatted in billions along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements to render each bar. Hovering over a bar reveals a tooltip with the formatted population value.

fork

This visualization displays a horizontal bar chart of the top 10 most populous countries for 2019, with country names on the y-axis and population values on the x-axis. The chart uses React state and hooks to load and manage data, while D3 v5 handles the scaling and rendering through `scaleBand` and `scaleLinear` functions. Data is fetched asynchronously via `d3.csv` from a GitHub-hosted CSV file, with population values parsed as numbers. The SVG output includes manually drawn axes, gridlines, and blue bars, bypassing D3's axis generators in favor of custom tick rendering.

Fork of Fork of fork1

This fork shows a horizontal bar chart of the top 10 most populous countries, using data from the year 2019. The visualization renders to SVG via React and uses D3's `scaleBand` and `scaleLinear` to map country names and population values to coordinates. Axes and grid lines are drawn using `axisLeft`, `axisBottom`, and `ticks()`. The dataset is loaded from a CSV URL, though the URL is empty in the code.

Fork of fork

This example displays a horizontal bar chart of the top 10 most populous countries, using population data from 2019 loaded via `d3.csv`. The visualization is built with React and rendered as SVG, with `d3.scaleBand` positioning the country labels and `d3.scaleLinear` mapping population values to bar widths. Grid lines and tick marks are generated manually using `xScale.ticks()`, and axes are drawn with custom SVG elements rather than D3’s axis components. The chart updates reactively when the CSV data finishes loading.

ICE-5

This example displays an SVG image of a map, overlaid on a green background with a heading, while also presenting dataset statistics. It loads a CSV file from a GitHub gist using D3’s `d3.csv` method, then calculates and reports the file size in kilobytes, the number of rows, and the number of columns. The page structure is defined in HTML with the image sourced from a raw GitHub URL, and styling is handled by an external CSS file. The code uses D3 v7 loaded via UNPKG to parse the CSV and update the DOM.

Feb 28, 2022

ICE-4 Fork of HTML Starter

This example shows a simple SVG face rendered using React and D3. The code uses React to create SVG circle, ellipse, and line elements, with D3’s `arc` module imported but not used in the final output. The face features sky-blue circular head with a black stroke, two white eyes with black outlines, and green pupils rendered as ellipses. A white horizontal line acts as the mouth. The visualization relies on static coordinates and basic geometry within a 960x500 viewport.

Fork of Not so Smiley Face

This fork of “Not so Smiley Face” uses React and D3 to render a yellow SVG smiley face, showing a circular head with black eyes and a mouth arc that is half-complete. D3’s `arc` API generates the mouth path, with its start and end angles set to create a downward curve, while the head and eyes are drawn as SVG circles. The visualization is static, with the face centered on a 960×500 canvas, and the mouth positioned separately below the face. The rendering relies on React’s `StrictMode` and `ReactDOM.render` to output the SVG.

ICE-4 Fork of emoji

This visualization renders a classic smiley face emoji as a yellow circle with black stroke, two eyes, and a mouth arc, centered in an SVG canvas. It uses React to declaratively construct the SVG elements and D3’s `arc` generator to compute the mouth path. The code imports the `arc` function directly from d3 and sets explicit pixel values for dimensions and offsets, with D3 loaded via a CDN script tag into the React component.

ICE-4 Fork of Smiley Face

A React-based SVG renders a yellow smiley face with a green stroke, combining a circular head with custom eye and mouth components. The composed SVG uses React components (`Eyes`, `Smile`) positioned and scaled via SVG `g` transforms within the main `App` component. The eye and mouth artwork is drawn with detailed SVG paths, ellipses, and circles, colored by CSS classes defined in `style.css`. The visualization demonstrates programmatic SVG assembly using React 16.9 and `ReactDOM.render`.