D

Deegutla123

@Deegutla123·21 public vizzes

Loading thumbnail…

Fork of Pie Chart-hover

This example displays global internet usage percentages for countries such as Afghanistan, Australia, and China. It presents the data as a pie chart rendered with SVG, where hovering over a segment highlights it and displays a tooltip with the country name and value. The chart is built using D3 v4 pie and arc layouts, with mouseover and mousemove events managing the tooltip’s position and opacity. The data originates from a CSV file loaded via D3's csv function within a React framework.

Loading thumbnail…

Fork of Interactive Cars Scatter plot

This visualization displays a scatter plot of car horsepower against weight, with acceleration mapped to the radius of each circle. The plot uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and gridlines. A tooltip appears on mouseover, showing the car’s name, origin, and acceleration. The data is loaded from a CSV via `d3.csv` and rendered as SVG circles, with hover effects that change the circle’s fill color.

Loading thumbnail…

PIE CHART

This pie chart visualizes global internet usage rates by country, with each slice sized proportionally to the internet user rate and colored via a categorical scale. Hovering highlights a slice and displays a tooltip with the country name and rate, while a legend lists all countries. Built with D3 v5, it loads CSV data from a GitHub gist and renders the chart as SVG using the `pie` and `arc` generators, with `scaleOrdinal` for colors.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot animates the Iris Dataset, cycling the x-axis through three variables: Marks, time_study, and number_courses. Built with D3 v3, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, updating every five seconds. The chart is rendered full-screen with a custom font.

Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

This fork of the D3.js v5 area chart visualizes annual Facebook user counts from 2008 to 2017. The chart combines a smooth line and a filled area to show the growth trend over time, with data loaded from a CSV file. The visualization uses D3's `scaleLinear`, `line`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` APIs, rendering to an SVG canvas. Custom styling is applied via CSS to color the axes, labels, and the pink area fill.

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays the closing rate of Salesforce stock from July to November 2020 as a red line chart. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to render SVG axes, gridlines, and a path. The data is loaded from a remote CSV using `csv` and parsed with `d3.timeParse`. The y-axis is labeled "Closing Rate" and the x-axis "Date," with margins and tick padding styled via CSS.

Loading thumbnail…

Fork of Area Chart

This example shows electronic sales closing rates from 2013 to 2021 using a combined line and area chart. The orange line traces the data points with a smooth curve, while the red area beneath fills the space down to the baseline. The visualization loads CSV stock data and uses d3.csv, d3.scaleTime, d3.scaleLinear, and d3.line with d3.area and curveBasis to render the SVG paths. Axes are generated with d3.axisLeft and d3.axisBottom, with dates parsed via d3.timeParse.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization shows Salesforce stock closing rates from July to November 2020, combining a smooth line chart with an area chart beneath it. The SVG renders with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to create the curved paths. Data is loaded via `csv` from a GitHub gist, with the x-axis representing months and the y-axis showing closing rates.

Loading thumbnail…

GLOBAL INTERNET USAGE

The visualization displays global internet usage trends over time as a line chart, plotting yearly data. The chart uses D3.js v5 within a React framework to render an SVG, with axes labeled “Year” and “Automobile sales.” Data is loaded via the `d3.csv` method from a GitHub URL. The implementation leverages D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the coordinate system, while the line path is generated with `d3.line` and styled with a blue stroke.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This pie chart shows the total runs scored by ten top cricketers, with each slice sized proportionally to a player’s run count and a color-coded legend listing names and values. The chart is rendered in SVG using D3 v5, with `d3.pie()` computing the arc angles and `d3.arc()` drawing the segments. Colors come from `d3.scaleOrdinal(d3.schemeCategory10)`, while data loads asynchronously from `Data.json`. Text labels display run totals using `d3.format`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This fork of an ICE example visualizes the top 10 countries by air pollution deaths in 2020 as a pie chart, with each slice labeled by death count in thousands and a matching color-coded legend. Using d3.csv to load data from a GitHub gist, it applies d3.pie, d3.arc, and d3.scaleOrdinal to compute and render SVG paths, while d3.arc.centroid positions the slice text labels.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React and D3

This bar chart displays 2021 global internet usage rates for 16 countries, sorted by country name along the vertical axis and percentage values on the horizontal axis. The chart uses React functional components with hooks to load and manage data from a CSV file, while d3.scaleBand and d3.scaleLinear calculate the chart’s scales. The visualization is rendered as SVG, with bars drawn as rect elements and custom axis ticks created from d3’s scale methods.

Loading thumbnail…

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

This visualization displays the top 20 countries by reported coronavirus cases, rendered as horizontal bars in an SVG chart. The application uses React hooks such as `useState` and `useEffect` to asynchronously load and process CSV data via D3’s `csv` method. The chart encodes population counts along a linear scale (`d3.scaleLinear`) for the x-axis and country names on a band scale (`d3.scaleBand`) for the y-axis. Custom grid lines and tick labels are drawn manually, with rectangle marks filled green via CSS.

Loading thumbnail…

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

This example demonstrates a web page for rendering marks and channels using React and D3. It displays a bar chart representing data over time, with axes and labels. The code uses the React and ReactDOM libraries alongside D3 functions like `scaleBand`, `scaleLinear`, and `axisBottom` to construct the visualization. The SVG output is generated from a CSV data source loaded via `d3.csv`. The example also includes a pie chart using `d3.arc` and `d3.pie`.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flowers. The code loads CSV data using `d3.csv`, parses numeric fields, and renders circles with D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom`. Axes are labeled with SVG text elements, and the chart fills the browser viewport. The visualization uses an SVG rendering approach with data-driven circle positioning.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot animates through different dimensions of the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length. The visualization uses D3.js APIs including `select`, `append`, `attr`, and `join` to render SVG circles and axes, with data loaded via `csv`. A reusable `scatterPlot` module defines the chart structure, while the main script uses `setInterval` to trigger time-based updates. Species are color-coded orange, blue, and black, with a legend for setosa, versicolor, and virginica.

Loading thumbnail…

Fork of React & D3 Starter

This visualization is a scatter plot of the Iris dataset, showing the relationship between sepal length and petal length. It is built using a React front-end with a D3.js backend, where React manages the SVG canvas and D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions handle the scaling and axes. The code demonstrates a decoupled architecture, using a `useData` hook to load CSV data and a `viz` function to render circles and axes, highlighting a pattern for scaling complexity in real-world projects.

Loading thumbnail…

ICE-6

This example displays a horizontal bar chart of the ten highest national populations in 2019, using annual ticket sales data from a CSV file. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for the axes, while `csv` loads the dataset. Rendered as SVG, the chart includes blue bars, gridlines, and axis labels, with the title "highest population" shown above the graphic.

Loading thumbnail…

ICE-5

This example, titled ICE-5, demonstrates a basic web page for loading and parsing CSV data using D3.js. The page displays a summary of the parsed Netflix credits dataset, showing the data size in kilobytes, the number of rows, and the number of columns. The visualization is a simple text-based report presented in a `<pre>` element, with a static image of an SVG included for visual interest. The code uses the D3.js `d3.csv` API to fetch and parse the remote CSV file, and `d3.csvFormat` to calculate its size, while styling is handled with custom CSS.

Loading thumbnail…

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

This example uses D3.js v5 with SVG rendering to construct a stylized face composed of geometric shapes. It draws a yellow circle as the head, then adds eyes, eyebrows, a nose using the `arc()` API, a mouth formed from an arc path, and rectangular teeth. Additional circles serve as ears positioned outside the main face element, all within a fixed 960×500 SVG canvas. The visualization demonstrates declarative shape composition and coordinate transformations via `select()`, `append()`, and `attr()` methods.

Loading thumbnail…

Smiley Face

A yellow smiling face is rendered as an SVG graphic, composed of a circular head, two eyes, and a curved mouth alongside a small nose. The drawing is generated using React, with the D3.js arc generator creating the mouth and nose paths. The component positions each shape relative to a central coordinate system, using integer values for offsets and radii to define the features. The final output is a static, centered illustration on a full-window canvas.