Skip to main content
Log in
A

Ananthulaaditya

@Ananthulaaditya·12 public vizzes

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes a road and ride measurement dataset, cycling through four attribute combinations on the x-axis while y remains fixed. Data points are colored by category (word-wrap, word-color, word-country) and rendered as ellipses with variable rx and ry radii. The visualization uses D3 v6 with the reusable `scatterPlot` module, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` for rotation. It loads data via `d3.csv`, appends SVG circles, and includes a custom legend with labels.

Jul 1, 2022
Loading thumbnail…

Area_Chart_ICE7

This area chart visualizes Netflix stock prices over time, with a smooth line tracing price movement and a gray shaded region beneath the curve. The chart uses a time-scaled x-axis for years and a linear y-axis for stock prices, formatted with short scale notation. Built with React and D3 v5, the visualization employs `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` for the smoothed fill. Data comes from a CSV file parsed via `d3.csv`, rendered as an SVG with labeled axes and gridlines.

Jun 29, 2022
Loading thumbnail…

Line Chart_ICE7

This line chart displays Netflix stock prices over time, using a time-scaled x-axis for years and a linear y-axis for price values. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to plot the data. The chart includes labeled axes, gridlines, and a title, with data loaded from a CSV file hosted on GitHub. The code formats dates using `d3.timeParse` and scales the price range from zero to the maximum value.

Jun 29, 2022
Loading thumbnail…

Pie_Chart_ICE7

This pie chart visualizes the total number of movies and shows available on Amazon Prime, broken down by country for the top ten entries. The chart uses D3 v5’s `pie` and `arc` generators to create the SVG segments, with a `scaleOrdinal` color scheme distinguishing each country. A legend lists the country names and their corresponding library sizes, formatted as plain numbers. The data is loaded as CSV from a GitHub gist, then sorted and filtered before rendering in the SVG container.

Jun 29, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through different petal and sepal measurements on the x-axis while plotting sepal length on the y-axis. Data points are color-coded by species (setosa in orange, versicolor in blue, virginica in white) with a fixed legend. Built with D3 v6, the visualization uses a custom `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `setInterval` cycles through four measurement columns every few seconds. The SVG rendering includes labeled axes and a species legend, with all text styled white against a black background.

Jun 29, 2022
Loading thumbnail…

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

This example displays country-wise basic internet costs as a horizontal bar chart, loading data from a CSV file and rendering it as SVG marks. The React component uses state and effects to fetch and parse the data, while D3’s `scaleBand` and `scaleLinear` map country names and cost values to pixel positions. Axes are manually constructed using array mappings for ticks and labels, with rectangle elements representing each bar. The visualization integrates React’s declarative rendering with D3’s scaling utilities, demonstrating a hybrid React-and-D3 approach for static chart generation.

Jun 26, 2022
Loading thumbnail…

Scatter Plot with Iris DataSet

This example visualizes the Iris flower dataset using a scatter plot, mapping petal length and petal width to the x and y axes, with each point colored by species (setosa, versicolor, or virginica). It loads CSV data via D3’s `csv` function, transforms numeric columns, and renders SVG circles with `selectAll` and `join`. The plot uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to position points and axes, with custom margins and labels. The data source is a remote GitHub-hosted CSV file.

Jun 24, 2022
Loading thumbnail…

Scatter Plot with Iris DataSet

A scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica) using red, yellow, and blue markers. Built with D3 v6 and React, the visualization loads data from a CSV via `d3.csv`, applies `scaleLinear` and `extent` for axes, and renders circles with SVG attributes. Axis labels appear rotated, and the code also includes a separate React-based bar chart component using `scaleBand` and `scaleLinear` for country cost data, though the primary display focuses on the scatter plot.

Jun 24, 2022
Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with circles colored by species (red, yellow, blue). It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG `circle` elements. Data loads from a remote CSV, and additional sepal dimensions are stored as circle properties but not visualized. Axes labels are added via SVG text, with a fixed radius of 5 pixels per point.

Jun 24, 2022
Loading thumbnail…

ICE 5

This example uses D3 v5 within a React app to display a static SVG visualization. It shows a base64-encoded JPEG image as a background fill within an SVG pattern, with the pattern applied to a rectangle covering the entire canvas. The code uses an SVG `<pattern>` element with `patternContentUnits` referencing the embedded image, and includes minimal styling for HTML text elements. No interactive or data-binding features are present in this simple rendering.

Jun 22, 2022
Loading thumbnail…

Fork of Smiley Face Part III

This example renders a stylized smiley face entirely with React and D3 v5, using SVG elements for all shapes. It constructs the face from circles for the head, eyes, and pupils, while using the `d3.arc` function to generate the mouth, lips, and eyebrows as path data. The face is centered via a group transform, and the code demonstrates how D3’s arc generator can produce both standard and custom angular spans, combining React’s declarative component structure with D3’s geometry utilities.

Jun 18, 2022
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face composed of SVG shapes, rendered with React and D3 v5. It uses D3’s `arc()` generator to draw the mouth, lips, and eyebrows as path elements, while the face and eyes are simple circles with layered highlights. The code constructs all geometry from hardcoded numeric constants for offsets and radii, and renders the final scene through a React component into an SVG container.

Jun 18, 2022