RevanthGrreddy

ICE - 8 Singapore Map(Revanth)

This interactive map of Singapore displays planning area boundaries loaded from a JSON file hosted on GitHub. The visualization uses D3’s geo-mercator projection and geoPath to render the polygons within an SVG, and supports mouse-wheel zoom and drag-panning via d3.zoom. Each region is clickable and changes color on hover, with the area name shown as a tooltip. The map is built with D3.js and topojson, styled with a pink background and blue fill.

Jul 10, 2022

3D Scatter Plot(Revanth)

This 3D scatter plot visualizes the berrylily dataset, showing relationships between calyx length, calyx width, and both curlicue length and width. The visualization uses Plotly.js to render three-dimensional markers, with D3.js loading the CSV data from a GitHub gist. Two separate traces display different z-axis measurements, distinguished by marker colors and opacity, with all interactive rotation and zooming handled by Plotly's built-in 3D scene controls.

Jul 6, 2022

3D-bar chart(Revanth)

This example shows a 3D bar chart of top-10 car sales, with bars grouped by country of origin (United States, India, UK) and height representing sales in billions of USD. Using Highcharts with the highcharts-3d extension, the chart renders with a rotation angle and perspective via the `options3d` settings, with columns configured through `plotOptions.column` for depth and stacking. The page loads Highcharts from a CDN within a minimal HTML wrapper, with data specified as coordinate pairs in the series.

Jul 6, 2022

Reusable D3 Scatter Plot(Revanth) ICE-7

This reusable scatter plot visualizes the Iris dataset, mapping student marks against time spent studying. The visualization cycles through different data columns every five seconds, automatically updating the x-axis to display marks, study time, or course count. Built with D3.js, the chart uses scaleLinear, extent, axisLeft, and axisBottom to render SVG circles with animated transitions. The implementation follows the "Towards Reusable Charts" pattern, making the plot configurable through chained method calls for width, height, margins, and data mappings.

ICE 7 Area Chart(Revanth)

This area chart visualizes car sales in India from 2009 to 2019, using a pink-filled area beneath a black line to show sales trends over time. The chart is rendered as an SVG using D3 v5, with `scaleTime` and `scaleLinear` for axes, and `area` and `line` generators with `curveBasis` for smooth curves. Sales data is loaded from a CSV file, parsed with `d3.timeParse`, and displayed with custom axis labels and gridlines.

Fork of ICE-7 Line Chart(Revanth)

A line chart displays annual US auto sales from 2005 to 2022, with a blue line tracing sales volume over time against labeled axes. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and `line()` to generate the path. Data is loaded from a CSV and rendered as SVG, with titles and axis labels styled via CSS. The chart emphasizes long-term sales trends.

ICE-7 Line Chart(Revanth)

This line chart displays annual US automotive sales from 2005 to 2022, using a blue path to show sales trends over time. It loads data from a CSV file via d3.csv, parses the Year and Sales columns, and renders with SVG. The visualization uses d3.scaleTime and d3.scaleLinear to map data to axes, with d3.axisBottom and d3.axisLeft generating labeled tick marks. A d3.line generator constructs the path, while the chart includes a title, axis labels, and gridlines created through tick sizes.

ICE 7-of Pie Chart(Revanth)

This pie chart displays 2022 US auto sales by brand, with each slice sized proportionally to year-to-date sales and accompanied by a legend showing brand names, percentage of total sales, and sales volume in thousands. The visualization uses d3.pie and d3.arc to generate SVG paths, with d3.scaleOrdinal assigning categorical colors. Sales data is loaded as CSV from a GitHub gist and processed in JavaScript, while percentages are formatted using d3.format.

Pie Chart ICE 7(Revanth)

This pie chart visualizes the protein content (in grams) of various cereals, displaying each cereal as a colored slice with a corresponding legend. The chart uses D3 v5, reading CSV data from a GitHub gist, and renders the pie slices using the `pie` and `arc` functions. Each slice is filled based on the cereal name using a categorical color scale, while legends are appended with a rect and text, with protein values formatted using `format` and genre-specific styling.

Fork of Fork of ICE7 Pie Chart

This chart displays the ten best-selling beauty products by revenue as a simple pie chart, with each slice sized proportionally to sales value and colored by category. A legend to the right pairs each product name with its revenue, formatted using D3’s `format` function. Built with D3 v5, it loads data from a JSON file and renders slices via `arc` and `pie` generators within an SVG canvas, using `scaleOrdinal` with the `schemeCategory10` palette for coloring.

Fork of Pie Chart for USA Flights On-time Performance

This pie chart visualizes USA flight on-time performance by depicting monthly departure delays as radial segments. Each slice’s length corresponds to the delay value, with all slices rendered in light blue against a white stroke. The visualization uses React for component management and D3’s `arc` generator to compute the SVG paths, with data loaded via D3’s `csv` parser. The chart reads from a CSV file sourced from a GitHub gist on flight delay data.

Fork of Reusable D3 Scatter Plot Dasbach

This fork of a reusable D3 scatter plot displays New York Times COVID-19 rolling average data for US states, plotting deaths per 100,000 against cases per 100,000. Each circle represents a state, with position determined by d3.scaleLinear scales derived from the data extent. The visualization uses D3 version 6.7.0, employs d3.csv for data loading, and renders as SVG with d3.axisLeft and d3.axisBottom axes. The chart is implemented as a configurable closure function, allowing width, height, margins, and radius to be set via method chaining.

Fork of Reusable D3 Scatter Plot

This example demonstrates the classic Iris Dataset, plotting sepal and petal measurements as animated circles. A scatter plot visualizes the data, with the x-axis cycling through different measurement columns every two seconds. Implemented using D3 v6, the chart is built as a reusable function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `csv` and rendered as SVG circles, with transitions updating the x-value to reveal different feature relationships.

Ice-6 Scatterplot

This interactive scatterplot visualizes the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization renders data points as semi-transparent red circles that animate from the center outward to their positions over two seconds, staggered by index. Built with D3 v5, the example uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to construct scales and axes, while a custom dropdown menu component and SVG transitions handle interactivity and rendering.

Fork of ICE-6 Scatter Plot

This interactive scatter plot lets users explore the relationship between any two variables from the auto-mpg dataset by switching columns via dropdown menus. Rendered as an SVG with D3 v5, the visualization uses `scaleLinear` for axes and `dropdownMenu` to bind selections to x and y coordinates. The code parses numeric fields with `+d.mpg` and updates the plot dynamically through callbacks, demonstrating reusable D3 components for data-driven comparisons.

ICE-6 Scatter Plot

This interactive scatter plot explores relationships between numeric attributes of cars from the auto-mpg dataset, such as horsepower, weight, and acceleration. Users select which columns appear on the x- and y-axes via two dropdown menus built with a reusable `dropdownMenu` function. The plot is rendered as SVG using D3 v5 scales, axes, and a custom `scatterPlot` module, with circles sized at a radius of 10 pixels. The code demonstrates a modular pattern for combining menu-driven selection with d3’s `csv` data loading and linear scaling.

Fork of Fork of React & D3 Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length with semi-transparent circles. It demonstrates a scalable React and D3 integration, using React hooks (useState, useEffect, useRef) to manage data loading and the component lifecycle. D3 v7 handles SVG rendering and scales, including axis generation via d3.axisLeft and d3.axisBottom. The visualization fills the browser window, encoding each flower measurement as a point.

Fork of React & D3 Starter

This visualization displays the classic Iris flower dataset as a scatter plot, plotting sepal length against petal length. It demonstrates a decoupled integration of React and D3, where the React component manages the SVG element lifecycle while D3 handles the rendering logic. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to compute scales and draw axes, with React hooks managing data loading via `useData`.

Fork of HTML Starter

This example displays the text “Hello HTML!” as a large, centered message using plain HTML, CSS, and JavaScript. It demonstrates a minimal setup where a single CSS class styles the text size and alignment, while the body contains the content directly. No external libraries are used, relying solely on the browser’s native rendering of HTML elements and CSS rules. The page serves as a basic template for understanding how markup, styling, and scripting interact in a simple web document.

Fork of Hello VizHub

This example demonstrates how to set up a minimal VizHub project that loads D3.js from a CDN and uses ES6 modules to display a static text message. It shows a message div centered and styled with large font size, with content set through D3’s `select` and the `.text()` method. The code imports the `select` function from D3 v5 and a local string constant from `myMessage.js`, illustrating how to combine external library imports with local module imports in a browser-based visualization environment.

ICE-6 Scatter Plot

This interactive scatter plot compares two variables, with dropdown menus above the chart allowing the user to switch which data columns are plotted on the x- and y-axes. The visualization is built with React and renders as an SVG using D3.js v5, leveraging D3’s selection and axis-generation methods to draw the points and tick marks. The source data is loaded from a local `v3` dataset, and the menus are populated dynamically from its column names.

ICE-6 Electric bar graph

This stacked bar chart visualizes personal electricity consumption over time, with each bar segment representing usage attributed to a specific account. The bars are color-coded using a categorical scale from d3.scaleOrdinal and d3.schemeCategory10, and hovering highlights a segment while a tooltip displays its kilowatt-hour value. The visualization is built with React and D3, using d3.stack to aggregate data by date and account, d3.scaleBand for the x-axis, and d3.scaleLinear for the y-axis. Rendering is done via SVG with canvas-based text measurement for layout adjustments.

ICE-5

This example displays a static webpage that loads an insurance dataset from a GitHub gist, using D3.js’s `d3.csv` to fetch and parse the CSV file. It shows the data’s size in kilobytes, row count, and column count in a preformatted text block. The page also features an embedded SVG image of a home, styled with CSS flexbox and centered layout. The code relies on D3 v7 and basic HTML/CSS for structure and styling, with no interactive visualizations or charts.

Jun 22, 2022

Fork of Data Visualization ICE5

This example displays a web page titled “ICE 5” with a large heading, a summary message about a CSV dataset, and two static SVG images (a house and a human) positioned side-by-side. It loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then calculates and displays the dataset’s size in kilobytes, row count, and column count in a styled `<pre>` element. The page layout is built with custom CSS, including flexbox for the image row and colored backgrounds for text elements. React is listed as the framework, though the visible code uses plain HTML and JavaScript with D3.

Jun 22, 2022

Fork of homework smiley face

This smiley face visualization displays a large yellow circular face with two blue eyes, green eyebrows, a curved mouth, and several black and brown line strokes creating facial features. The React component renders SVG elements, using D3’s `arc` generator to create the mouth path. Circles, ellipses, and lines are positioned absolutely within an 800×500 viewport, with the face centered via a D3-created translation group. The code uses React 17 and d3.v7, rendering all shapes directly in the SVG markup.

Jun 19, 2022