R

reddysushma994@gmail.com

@MSushmaReddy·38 public vizzes

Loading thumbnail…

Fork of area chart

This fork of an area chart visualizes annual car production data loaded from a CSV file, showing production values over time as a single lightgreen filled polygon. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.csv` to fetch data, `d3.area` to generate the path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. The x-scale maps years linearly, while the y-scale starts at zero, with axes labeled "Year" and "Production".

Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Loading thumbnail…

Fork of line chart

This example shows a line chart tracking the number of students enrolled per month, with the x-axis representing time and the y-axis representing enrollment counts. The visualization uses D3.js v7 to load a CSV dataset, parse month names into date objects, and render an SVG line chart with axes and labels. It employs `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.line` for the path generator, and `d3.axisBottom`/`d3.axisLeft` for ticks. The data comes from a remote CSV file, and the chart includes rotated y-axis and bottom x-axis titles.

Loading thumbnail…

Fork of ICE-7 (Part-3) Rohith Annadurai

This D3.js visualization presents two charts analyzing movie data: a line chart tracking revenue across movies by name and genre, and a reusable scatter plot comparing budget against revenue. The line chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the revenue axis, and `d3.line` to render the path, with rotated axis labels. The scatter plot uses `d3.scaleLinear` for both axes and appends circles to an SVG via `d3.select`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, with date parsing via `d3.timeParse`.

Loading thumbnail…

Fork of Akshitha Rapala Fork of ICE-7 Line Chart

This line chart visualizes monthly electronics sales for 2023, with months on the x-axis and sales figures on the y-axis. The chart uses D3 v5’s `scalePoint` for categorical month labels and `scaleLinear` for the sales axis, while `d3.line()` generates the orange path. Data is loaded from a CSV file via `d3.csv`. The SVG rendering includes labeled axes, grid lines, and a green title, with the y-axis label rotated and styled in red.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This visualization combines a pie chart and a line chart to explore 2022 USA auto sales by brand. The pie chart shows each brand’s year-to-date sales as a proportion of the total, with colored segments and a legend displaying percentages and sales values in thousands. The line chart tracks monthly electronics sales, using a point scale for months and a linear scale for sales figures. The code uses D3’s `pie`, `arc`, `scaleOrdinal`, `scalePoint`, `scaleLinear`, and `line` APIs, loading data from a CSV via `d3.csv`.

Loading thumbnail…

Fork of line chart

This fork of a line chart displays monthly electronics sales for 2023, using a point-based x-axis for months and a linear y-axis for sales values. The visualization loads CSV data from a remote URI, then renders axes with grid lines, labels, and a colored line path. It leverages D3’s `scalePoint`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators within a React app, with margins and a title included. The chart highlights sales trends across the year, emphasizing monthly fluctuations without converting month names to dates.

Loading thumbnail…

Fork of Fork of Face with d3.js!

This example shows a line chart of monthly student enrollment in 2023, using a categorical point scale for the months and a linear scale for the enrollment counts. It loads D3 from UNPKG, imports `select`, `scalePoint`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` from the library, and fetches its CSV data from a GitHub gist. The chart draws axes with gridlines, labels, and a title, while the `line()` generator creates the path connecting data points, all rendered inside an SVG with fixed margins.

Loading thumbnail…

Fork of HTML Starter

This example visualizes customer data from a CSV file as a pie chart, showing the distribution of values in the sixth column across categories in the fourth column. It uses the Chart.js library to render the chart on an HTML canvas element, with data fetched from a GitHub Gist URL. The chart displays up to ten color-coded slices, and the rendering approach relies on Chart.js’s pie chart type with a fixed canvas size of 400 by 400 pixels.

Loading thumbnail…

Fork of Fork of Fork to pie chart

This pie chart displays total sales by item category, using data fetched from a Walmart CSV file hosted on GitHub. The visualization breaks down sales proportions across categories, with each slice representing a category’s contribution. It loads the data via the Fetch API, parses the CSV text, and passes the category labels and total sales values to Chart.js. The chart is rendered on an HTML canvas element with a fixed 400x400 size, using a semi-transparent color palette for each slice. The code explicitly sets the chart type to `pie` and disables responsive resizing.

Loading thumbnail…

Fork of World Cities

This visualization displays a world map with cities as small dots, rendered using a Natural Earth projection. It uses D3’s `geoNaturalEarth1` for the projection and `geoPath` to draw country boundaries, graticules, and an outline. City data is loaded from a CSV containing latitude, longitude, and population, with each point plotted via `projection`. The map updates asynchronously, fetching TopoJSON country boundaries and city data before rendering. The graticule and country paths are styled with light fills and strokes, while cities appear as tiny circles, emphasizing global population distribution.

Loading thumbnail…

Fork of Menu with D3

This example demonstrates how to populate an HTML select element with a dropdown menu using D3, displaying the currently chosen car brand as text below. The code uses D3’s `selectAll` and `join` to bind menu options, setting their `value` and text, while the `change` event updates the state via `setState`. The selected value, initialized to "volvo", is reflected in a message div. Styling relies on Bootstrap and custom CSS, with the entire interaction driven by D3’s data-join pattern.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, showing how temperature varies across the days of the year for multiple years. The chart uses multiple lines, one per year, with a color scale from the plasma interpolator to differentiate between years. The year 2024 is emphasized with a red, thicker line, while other years appear semi-transparent. The code leverages D3’s `scaleLinear`, `scaleSequential`, `flatGroup`, and `line` APIs, along with the `@curran/responsive-axes` library for axes, to render the visualization from the provided dataset.

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render a set of overlapping circles in an SVG canvas, with each circle positioned by explicit x/y coordinates and given a distinct fill color and semi-transparent opacity. It demonstrates the D3 General Update Pattern by selecting all circles, binding an array of data objects, and using method chaining with `.attr()` calls to set visual properties. The visualization highlights how static data drives the rendering of basic geometric shapes, with a light green background providing contrast for the colorful circles. The code uses D3’s `select`, `selectAll`, and `join` APIs to manage the DOM efficiently.

Loading thumbnail…

Fork of Fork of Fork of Fork to pie chart

This example presents a pie chart of total sales by item category, loaded from a Walmart CSV file. It shows the distribution of sales across categories, with each slice sized by the total sales value. The visualization is built using the Chart.js library, which renders the pie chart onto an HTML canvas element. Data is fetched asynchronously from a GitHub gist, parsed from CSV format, and then mapped to chart labels and values. The chart uses a fixed canvas size and disables responsive resizing to maintain a consistent aspect ratio.

Loading thumbnail…

Fork of Fork of Fork to pie chart

This pie chart displays total sales by item category, using data fetched from a Walmart CSV file hosted on GitHub. The visualization breaks down sales proportions across categories, with each slice representing a category’s contribution. It loads the data via the Fetch API, parses the CSV text, and passes the category labels and total sales values to Chart.js. The chart is rendered on an HTML canvas element with a fixed 400x400 size, using a semi-transparent color palette for each slice. The code explicitly sets the chart type to `pie` and disables responsive resizing.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight using a dataset of car names loaded from a CSV file. The chart renders as an SVG with D3.js v7, mapping horsepower to the x-axis and weight to the y-axis using linear scales. Each data point is drawn as a circle with a fixed radius, and axis labels are appended to clarify the variables. The visualization employs D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot, with margins and dimensions set programmatically to produce a clean, reusable layout.

Loading thumbnail…

Fork of ICE-7 (Part-1)

This scatter plot visualizes the relationship between temperature and humidity from a weather dataset. The visualization encodes each data point as a circle, with temperature mapped to the x-axis and humidity to the y-axis. Using D3 v7, the code loads CSV data via `d3.csv`, constructs linear scales with `scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. SVG circles are appended to the plot, with a hover effect that changes their fill color to orange.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes a scatter plot of the Iris Dataset, showing the relationship between temperature and humidity for individual data points. The plot uses D3 v3 to generate SVG circles positioned by linear scales, with labeled axes for both variables. The code loads data from a CSV file via `d3.csv`, then maps numeric values to screen coordinates. The scatter plot demonstrates a reusable chart pattern from `scatterPlot.js`, which exposes configurable accessors and dimensions through a closure-based API.

Loading thumbnail…

Fork of Fork of Fork of Cat smiley

This example displays a scatter plot of the Iris dataset, plotting petal length against sepal length with points colored by species: orange for setosa, blue for versicolor, and green for virginica. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map measurements and render the axes with SVG. Circle elements represent individual observations, while axis labels indicate the measured dimensions in centimeters.

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This scatter plot visualizes the relationship between beak length and wingspan for various bird species, with each circle representing an individual bird. The visualization uses a D3 v6 SVG rendering with linear scales for both axes, and includes axis labels and a title. Data is loaded asynchronously from a CSV file hosted on GitHub, parsed with `d3.csv`, and mapped to positions using `scaleLinear` and `extent` functions. The code demonstrates core D3 data-binding patterns through `selectAll`, `data`, and `join` to create circles, while `axisLeft` and `axisBottom` generate the coordinate grid.

Loading thumbnail…

Fork of Fork of Fork of Cat smiley

This example visualizes the top ten students by height using a horizontal bar chart rendered as SVG. The chart displays each student’s name along the y-axis and their measured height along the x-axis, with bars colored in a muted green. The code combines React with D3 v7, using `scaleBand` and `scaleLinear` to map data to positions and sizes. Data is loaded asynchronously from a remote CSV file, and the visualization includes labeled axes and gridlines generated from the scales.

Loading thumbnail…

Fork of Fork of Cat smiley

This example visualizes the top ten students in a class by their height, displayed as horizontal bars. It uses React with D3 v7 to load a CSV dataset and render an SVG bar chart. The code employs `scaleBand` for the y-axis names, `scaleLinear` for the x-axis values, and `max` to determine the domain. A CSV URL provides the data, which is sliced to ten entries. The chart includes grid lines, tick labels, and teal-colored bars, with margins and dimensions set for clear presentation.

Loading thumbnail…

Fork of Fork of Fork of Fork of Svelte + D3 Starter

This example visualizes a dynamic network of colored nodes connected by lines, with the layout evolving over time through physical simulation. The nodes drift and settle as forces repel them apart while links pull connected pairs together, creating an organic, clustered structure. Built with Svelte and D3, the code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, while rendering each frame directly to the DOM through Svelte’s reactive updates. The dataset is generated procedurally with random nodes and edges, demonstrating a lightweight, interactive graph visualization.

Loading thumbnail…

Fork of Fork of Fork of Svelte + D3 Starter

This example demonstrates a fork of a Svelte and D3 starter template, showcasing a data visualization built with the D3 library. It renders a visualization using a force simulation, likely displaying a network or hierarchical structure, as indicated by the use of `d3.forceSimulation`. The code imports an App component from Svelte and mounts it to a container element, while the package configuration loads D3 globally from a CDN path. The visualization’s data source is not specified, but the rendering approach relies on D3’s layout and drawing capabilities within a Svelte component, emphasizing reusable, component-based interactive charts.

Loading thumbnail…

Fork of Fork of Svelte + D3 Starter

This fork of the Svelte + D3 starter visualizes a force-directed network graph. It uses `d3.forceSimulation` with charge and center forces to position nodes, while links are drawn as straight lines between connected points. The simulation updates in real time via Svelte’s reactive bindings, and the canvas is rendered inside a Svelte component. The code imports D3 7.8.5 and initializes the app with a single `main` export, demonstrating a minimal integration of D3’s simulation API with Svelte’s lifecycle. The visualization shows an interactive node-link diagram without additional data source specified.

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js! by Shailu

This example uses React to build a bar chart from student height data, loading the first ten records from a remote CSV file. The code employs `scaleBand` and `scaleLinear` from D3 to position rectangular bars along a horizontal axis. SVG elements are rendered declaratively, with gridlines and labels mapped from the data's name and height fields. The chart is displayed within a fixed 960x500 pixel viewport, and the bars are colored with a light green fill.

Loading thumbnail…

Fork of Cat smiley

This example displays a horizontal bar chart of the top ten students by height, sourced from a CSV file loaded with `d3.csv`. The visualization uses React to manage state and render an SVG, while D3’s `scaleBand` and `scaleLinear` position the bars and axes. Axis ticks and gridlines are generated with `xScale.ticks()`, and each bar is a styled `rect` element. The chart updates asynchronously after data loads, showing a loading message until then.

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js! by Shailu

This example builds a natural scene using only HTML and CSS, without any JavaScript libraries. It shows a static landscape with a blue sky, green grass, a radiant sun, stylized trees with brown trunks and circular green canopies, pink flowers, and a cat and bird silhouette. The scene is constructed entirely from positioned `<div>` elements with class-based CSS styling, using gradients and border-radius to create the sun and shapes. No data or dynamic rendering is involved; the visualization relies solely on layered, absolute positioning within a full-viewport container to compose the final image.

Loading thumbnail…

Fork of Fork of Cat smiley

This example demonstrates a data-driven dashboard that loads a CSV dataset from a remote URL and computes the sum of a population column, displaying the result alongside file size in a styled container. The page also embeds three external SVG images related to population and coverage statistics, which are rendered as static visuals. The code uses the D3.js v7 library for fetching and parsing the CSV via `d3.csvParse`, while the raw text is retrieved with the Fetch API. A simple reduce operation calculates the column total, and the outcome updates a `<pre>` element. The design focuses on presenting summary metrics with minimal interactivity.

Loading thumbnail…

Fork of Svelte + D3 Starter

This example visualizes a dataset using a force-directed graph layout, displaying nodes as circles positioned by physics simulation. It shows how data points relate through computed spatial arrangement. The implementation uses Svelte for component rendering and D3’s `d3.forceSimulation` for the underlying physics, with forces for centering, collision, and linkage. The code imports `App.svelte` and mounts it into a target container, relying on D3’s global library from the VizHub configuration. The rendering approach is SVG-based, as indicated by the use of Svelte’s templating and D3’s manipulation functions. No specific data source is hardcoded, suggesting the dataset is external or generated within the component.

Loading thumbnail…

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

This example uses D3.js version 7 to draw a simple still-life scene composed of a house, mountains, a bike, and a television. The code imports `select` and `arc` from the d3 module, though only `select` is used to append SVG shapes like rectangles, polygons, and circles. Each object is placed inside its own `<g>` group element with a translation transform, and shapes are styled with static fill and stroke attributes. The visualization demonstrates basic SVG rendering with D3 without any interactive or data-driven behavior.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example shows a simple yellow face with two black eyes, drawn using basic SVG circle shapes within a fixed 960 by 500 coordinate space. The face is implemented with hardcoded circle attributes, including a large yellow circle for the head and two smaller black circles for the eyes, all placed on a blank white background. The code loads the d3.v5 library and React, but the visualization itself relies solely on static SVG elements rather than any D3 functions. The rendering occurs directly in an HTML file with an embedded `<svg>` tag.

Loading thumbnail…

Fork of Face with d3.js!

This example renders a stylized smiling face using D3.js version 7, drawing all shapes as SVG elements within a centered group. The face consists of a yellow circle for the head, two ellipse eyes, and curved eyebrows generated with `d3.arc()`, which creates path data for circular arcs. A mouth is also built with `d3.arc()`, producing a filled arc path to suggest a wide smile. The code imports the `select` function from the `d3` module and chains SVG attribute setters to position elements relative to the canvas center.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by Shailu

This example builds a static natural scene using HTML and CSS, displaying trees, flowers, butterflies, a sun, grass, and a cat through styled `<div>` elements. The code uses CSS positioning and radial gradients for the sun, while tree trunks and leaves are constructed with colored rectangular and circular shapes. Although the files reference JavaScript, the visible implementation relies entirely on CSS styling and DOM structure rather than D3.js or other visualization libraries, with the scene remaining non-interactive and fixed in place.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A purely CSS-driven digital scene constructs a static landscape with a sky, sun, grass, tree, flower, cat, and bird arranged through absolute positioning and styled divs. The page uses no JavaScript or data binding; instead, the HTML structure and stylesheet define each element’s shape, color, and placement, with radial gradients for the sun and rotated squares for the bird. The rendering approach is entirely declarative, relying on CSS layout properties rather than SVG, canvas, or D3.js despite the title. The example demonstrates how layered, styled HTML elements can simulate a simple animated-free environment.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow face is drawn as a static SVG circle with two smaller circles for eyes, using D3.js v5 within a React framework. The code renders directly to an SVG element, setting circle positions with fixed coordinates and stroke attributes for the face outline. No animation or interaction is present; the example focuses on basic shape composition in a minimal, full-viewport layout.