C

chilukuritagore1427@gmail.com

@Tagore1427·27 public vizzes

Loading thumbnail…

ICE-7 Tagore Line Chart (3)

This example displays population figures for U.S. states in 2022 using a line chart rendered as an SVG via React and D3 v7. It shows a single line connecting states, with a rotated x-axis label and a y-axis for population. The visualization fetches CSV data from a remote gist, parses the population column, and uses `d3.scaleBand` and `d3.scaleLinear` for axes, while `d3.line` generates the path. The code highlights a line chart despite the title’s reference to “ICE-7 Tagore,” and includes styling for readability.

Loading thumbnail…

ICE-7 Tagore Area chart(4)

This area chart, titled “Population Trends in States,” visualizes state population values for the year 2022 using an SVG-based D3.js v7 implementation within a React framework. It shows each state’s population as a filled area, with a steel-blue semi-transparent region spanning horizontally across the categorical x-axis. The chart uses `d3.area` to generate the path, with `d3.scaleBand` positioning states and `d3.scaleLinear` mapping population counts, while rotated x-axis labels enhance readability. Data is loaded from a CSV file via `d3.csv` and parsed by stripping commas. Axis labels and tick formatting follow standard D3 axis components, with margins adjusted for label rotation.

Loading thumbnail…

ICE-7 Tagore Pie Chart (2)

This pie chart displays state population data for a selected year, with each slice sized proportionally to the population value. The visualization uses D3 v5's `pie()` and `arc()` generators to create the chart, while `scaleOrdinal()` maps state names to a custom color palette. The chart includes labeled slices, a legend, and population figures positioned using `arcGenerator.centroid()`. Data is loaded from a CSV file hosted on GitHub, and the visualization defaults to the first available year column. The React framework is not actually used in the rendering logic, which is plain D3 with SVG.

Loading thumbnail…

ICE-7 Tagore Scatter Plot (1)

This example presents a reusable scatter plot built with D3.js, visualizing state population changes between 2020 and 2021 from a CSV dataset. It shows the relationship between the two years' population figures, with each circle representing a state. The code defines a configurable `scatterPlot` function using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, then loads data via `csv` and renders SVG circles with axes. The plot is styled with the Share Tech font and adapts to the full window size, with axis labels added directly in `index.js`.

Loading thumbnail…

ICE 6 scatter plot

This scatter plot displays student grades, plotting English scores on the x-axis against Physics on the y-axis, with each point colored by class category (First, Second, or other). The code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for both axes, and renders circles using SVG. It also encodes additional dimensions through the `rx` and `ry` attributes, mapping Science and Math scores to each circle’s horizontal and vertical radii, while using `d3.axisLeft` and `d3.axisBottom` for labeled axes.

Loading thumbnail…

Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping English scores to the x-axis and physics scores to the y-axis, with each circle’s fill color indicating class membership (First, Second, or default). The chart uses D3 v6 to load CSV data via `d3.csv`, scale axes with `scaleLinear`, and render circles as SVG elements. The x-axis is labeled “science” while the y-axis is labeled “english,” though the code actually plots physics against English, creating a slight mismatch in the visible labels.

Loading thumbnail…

Fork of ICE_6

This example visualizes population estimates for a subset of U.S. states using a horizontal bar chart rendered as SVG via React and D3. It shows the relative population sizes for ten states, with each bar’s length encoded by the population value and the state name labeled along the vertical axis. The code loads CSV data from a remote URL, parses the population column as numbers, and uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It also employs `axisLeft` and `axisBottom` indirectly through custom tick rendering, with grid lines and tick labels drawn manually using D3 selections and React’s `map` function.

Loading thumbnail…

ICE - 6 Scatter Plot

This D3.js scatter plot visualizes student grades from a CSV file, plotting English scores on the x-axis and physics scores on the y-axis, with points colored by class (First class, Second class, or other). It uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. The SVG rendering includes circles sized by a fixed radius, with axis labels for English and science. The code also reads additional metrics (science and maths) into each data point, though these are not directly used for the visual encoding.

Loading thumbnail…

Fork of ICE 6 Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length and width as x/y coordinates while coloring points by species (setosa, virginica, and versicolor). Each circle’s radius is fixed, though additional sepal measurements are encoded in the `rx` and `ry` attributes, which are set but not visually reflected. The visualization uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles, with custom tick font sizing and axis labels for petal length and sepal length.

Loading thumbnail…

ICE_6

This horizontal bar chart displays population estimates for a subset of US states using React and D3 v5. The visualization maps state names to the y-axis and population values to scaled bar widths on the x-axis. Population data is loaded from a CSV file via `d3.csv`, parsed with `parseInt`, and sliced to 11 records. The chart uses `d3.scaleBand` for categorical y-positions and `d3.scaleLinear` for quantitative scaling, with SVG `rect` marks for bars and manual axis tick rendering via `xScale.ticks()`.

Loading thumbnail…

Population in states

This bar chart displays the top 10 most populous countries for 2019. The visualization uses React to manage the user interface and the D3 library for the SVG rendering. Specifically, it uses D3's `csv` to load data, and `scaleBand` and `scaleLinear` to map the categorical and quantitative variables to visual channels, with bars representing population values.

Loading thumbnail…

1234

This example shows the basic monthly cost of Netflix in 15 countries using horizontal bars, with country names on the y-axis and cost values on the x-axis. React manages the component state, while D3’s `csv` loader fetches the data and `scaleBand` and `scaleLinear` position the rectangles. The SVG rendering includes custom gridlines and tick labels, with the chart’s width and height fixed at 960 by 500 pixels. The code uses D3 v5 and React 16.9 to create the visualization.

Loading thumbnail…

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

This visualization displays the basic cost of Netflix in different countries. The code uses React 16.9.0, ReactDOM, and D3 v5.11.0 to create an SVG bar chart. It fetches data from a Gist CSV URL via `d3.csv`, slices the first 15 rows, and manually renders axes and tick marks using D3’s `scaleBand` and `scaleLinear`. Rectangles represent each country’s cost, sized by the `basic_cost` field.

Loading thumbnail…

ICE 6 Tagore

This example uses a bar chart to show the number of COVID-19 cases for the first 20 countries in a dataset loaded from a CSV file. The visualization displays the data using green rectangles, with countries plotted on the y-axis and case counts on the x-axis. The code loads the data with `d3.csv`, transforms it in React state, and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. It renders axes and bars as SVG elements within a React component, styled via CSS.

Loading thumbnail…

trail

This example visualizes the top ten most populous countries in 2019 using horizontal bars, where bar length encodes population size. It first shows the ranked categorical comparison, then reveals the implementation through a React component that loads CSV data via D3’s `csv` function and uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The code explicitly maps ticks, draws grid lines, and renders rectangles for each bar, while axis labels and margins structure the SVG layout. The visualization relies on D3 v5 and React’s `useState`/`useEffect` hooks for data fetching and state management.

Loading thumbnail…

Fork of Simple Bar Chart000000

This example displays a horizontal bar chart of the ten most populous countries for 2019, loaded from a CSV file via d3.csv. It renders the bars as SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and d3.scaleLinear for the population axis. Gridlines and axis ticks are generated manually using d3's scale methods, with values formatted directly from the data. The chart is built using React components that manage state and lifecycle hooks to fetch and process the data before rendering.

Loading thumbnail…

Fork of Responsive Bar Chart

This example shows the ten most populous countries in the world using a responsive horizontal bar chart, displaying each country’s total population in thousands. The visualization pulls data from the `@curran/un-population-estimates-2024` library, filters for country-level records, and sorts them in descending order. Using D3’s `scaleBand` and `scaleLinear`, the chart maps country names to categorical positions and population values to a linear scale. It relies on the `@curran/responsive-axes` library’s `observeResize` and `axes` functions to handle dynamic resizing, rendering bars as `rect` elements with a gray inner rectangle for a clean presentation.

Loading thumbnail…

ICE 6

ICE 6 renders a static visualization of a single rectangular plot area within an SVG canvas, filled with a light gray background. The code uses D3's selection and data-join methods to create the SVG and draw the rectangle, with margins defining the inner plotting region. The example demonstrates basic SVG drawing primitives via D3, establishing a blank canvas for potential future data layers, though no data or axes are shown.

Loading thumbnail…

ICE 6

This example shows a gray rectangle positioned inside a larger SVG canvas, demonstrating how margins define the "inner rectangle" where data marks are placed while reserving space for axes. The code uses D3's `select` and data joins to create an SVG element sized to the container, then draws a single rectangle with fixed margins of 50 pixels on all sides. The inner dimensions are calculated by subtracting these margins from the full width and height, and the rectangle is filled with a light gray color to visually highlight the plotting area. This straightforward setup illustrates the foundational layout pattern used before adding data-driven visual elements.

Loading thumbnail…

ICE-6 Tagore

ICE-6 Tagore demonstrates a blank visualization canvas with a black inner rectangle. The code uses D3.js to set up an SVG container, dynamically calculating the inner drawing area by applying fixed margins (50 pixels on each side). A single filled rectangle is rendered inside those margins, showing how the `select` and `join` API from D3 manages the SVG element. The example highlights the fundamental role of margins in positioning marks and leaving space for future axes.

Loading thumbnail…

ICE 6

This example presents a responsive bar chart of the top 10 most populous countries, using population estimates from the UN Population Estimates 2024 dataset. It highlights each country’s total population in thousands, with bars sorted in descending order. The visualization is built with D3.js, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the quantitative y-axis, while `axisLeft` renders the population scale. The code integrates `@curran/responsive-axes` for resizing and `observeResize` to adapt the chart’s dimensions, with a light gray inner rectangle framing the plotting area.

Loading thumbnail…

ICE-5 Tagore

This example visualizes the top 50 highest-grossing films from Wikipedia data by displaying them in a static, decorative SVG theater scene. The visualization uses a movie-screen metaphor with drawn curtains, seats, and a screen, while the film data itself appears as a table below. The code employs D3.js v7 to fetch a CSV file from a GitHub gist, parse it, and generate a dynamic table of the movie records. It also uses D3’s `csv` and `csvFormat` methods to display file size and row/column counts, providing both a thematic and analytical view of the dataset.

Loading thumbnail…

Fork of ICE 4 Scene

This fork of ICE 4 Scene builds a static SVG beach scene with a blue sky, sun, water, sand, stick-figure people, birds, palm trees, and beach balls. The code uses fundamental D3.js DOM manipulation to construct and style each SVG element, including rectangles, circles, lines, paths, and polygons. All visual components are directly defined in the HTML file with hardcoded coordinates and dimensions, and the rendering relies on the `<svg>` element’s declarative structure without any data binding or animation.

Loading thumbnail…

ICE 4 Scene

A night scene shows a house, grass, moon, flower, and an animated butterfly moving between the grass and sky, all rendered in SVG. The code uses D3.js selection and transition methods (`d3.select`, `transition.attr`) to construct the DOM elements and animate the moon's horizontal drift and the butterfly's looping flight path between two positions. The butterfly includes wings, eyes, and legs drawn with SVG paths and shapes.

Loading thumbnail…

Chilukuri Tagore Reddy

A dynamic SVG nature scene depicts a continuously changing landscape with an animated sky, sun, birds, trees, dogs, flowers, stars, and a moving red truck. The sky and sun transitions use SVG `<linearGradient>` and `<radialGradient>` elements with `<animate>` tags to cycle through colors over a 24-second period. Birds flap their wings via `<animateTransform>`, while dogs and flowers are generated procedurally through JavaScript helper functions that create SVG elements using `createElementNS` and the `http://www.w3.org/2000/svg` namespace. The scene is built at runtime with random positioning for some elements.

Loading thumbnail…

Tagore Reddy

This example renders a static nature scene of a sky, ocean, sun, palm tree, sandy island, and a stylized fish. It demonstrates loading D3 via UNPKG in an HTML file and using the `select` function from the imported `d3` module to append SVG shapes. The visualization builds the image by directly manipulating SVG elements such as `rect`, `circle`, `ellipse`, and `polygon` objects, with a loop for the palm leaves.

Loading thumbnail…

Fork of Fork of Fork of Cat smiley

This interactive visualization, built with React and D3.js v7, displays a grid of five stylized cat faces, each with distinct body, eye, and ear colors. It shows how D3's `arc` function defines the geometric shapes for the eyes, mouth, and ears within an SVG canvas. The code maps over an array of attributes to generate each cat component, using transformations for positioning and rotation, and renders the final composition via ReactDOM.