Skip to main content
Log in
A

Aditya Pujari

@adityapujari98·14 public vizzes

Loading thumbnail…

ICE8 - World Map

This example displays a natural Earth projection of the world with countries filled in yellow and outlined with faint black strokes, set against a blue sphere and white background. It uses D3 v5 with `geoNaturalEarth1` for the projection and `geoPath` to render geographic features. Country boundaries are loaded from the world-atlas TopoJSON file via `d3.json` and converted to GeoJSON with the `topojson.feature` method, then drawn as SVG paths.

Apr 4, 2022
Loading thumbnail…

ICE8 - USA Map

This example renders a map of the United States using an Albers projection and SVG paths. It shows state boundary lines overlaid on a landmass shape, with a gray sphere background. The code uses `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the geography, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from the US Atlas dataset. React manages the component state to load the data asynchronously via `d3.json`.

Apr 4, 2022
Loading thumbnail…

Family Tree

This example presents an interactive family tree visualization rendered as a collapsible hierarchy of boxes and links. It demonstrates how D3.js v3, jQuery, and local ES6 modules work together to load data from a JSON file and display it as an SVG tree. The code uses D3’s tree layout, zoom and drag behavior, and custom arrow definitions to show parent-child relationships. Node colors vary by type, and the layout dynamically adjusts its size based on the tree’s depth and width.

Apr 4, 2022
Loading thumbnail…

ICE8 - Social Network Graph

This D3.js network graph visualizes social connections among eight people, with nodes representing individuals and lines representing friendships. The graph uses a force-directed layout with `d3.forceSimulation`, combining link forces, many-body repulsion, and collision detection to position nodes, while user interaction via `d3.drag` allows repositioning. Hovering highlights a node. The SVG rendering employs arrow markers for link endpoints, and the underlying data comes from a JSON file listing node groups and directed link relationships with weights.

Apr 4, 2022
Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through four Iris flower measurements on the x-axis, visualizing the classic Iris dataset. Color-coded circles represent the three species, with a legend identifying each. Built with D3 v6, the visualization uses an interval timer to swap the x-axis variable among petal width, sepal width, petal length, and sepal length, redrawing the chart and axis labels with each change. The scatter plot is constructed using D3's scaleLinear, axisBottom, and axisLeft functions to render the SVG.

Mar 28, 2022
Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This example presents a reusable D3 scatter plot visualization built with the v3 API. The scatterPlot.js file defines a charting function that accepts data and configuration, then renders points using D3 scales and SVG circles. The visualization demonstrates the reusable pattern for creating multiple scatter plots on a page, with the index.js script likely containing the data binding and invocation. Styling is handled through styles.css, while the actual plot construction uses core D3 methods like d3.svg.axis and d3.scale.linear to map values to screen coordinates. The HTML file currently only displays a placeholder message, indicating the JavaScript components are loaded externally.

Mar 28, 2022
Loading thumbnail…

Area Chart Data Visualization

This area chart displays Amazon's stock price over time, using a smooth, curved line and a gray shaded region beneath it to emphasize the trend. The visualization is built with D3 v5 within a React framework, rendering as an SVG. It uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `d3.line` and `d3.area` generators with `curveBasis` for smoothing. The data is loaded from a CSV file and parsed with `d3.timeParse`, while axes are drawn using `axisBottom` and `axisLeft`.

Mar 28, 2022
Loading thumbnail…

Line Chart- Data Visualization

This line chart displays Amazon’s stock price over time, with the year on the x-axis and price on the y-axis, using an SVG rendered with D3 v5. It loads a CSV dataset via `d3.csv`, parses dates with `d3.timeParse`, and maps data using `scaleTime` and `scaleLinear`. The chart includes labeled axes with gridlines, and draws the price trend as a single line path generated by `d3.line`.

Mar 28, 2022
Loading thumbnail…

Pie Chart

This pie chart visualizes the top ten countries by total Netflix library size, using a categorical color scheme. It is rendered as an SVG with D3 v5, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and a custom legend. The data is loaded from a CSV file and sorted to display the largest values. Hovering over a slice logs the library size to the console.

Mar 28, 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 points colored by species (setosa, versicolor, virginica). The SVG rendering uses d3.scaleLinear for axes, and each point’s radius is fixed, though the code also accesses sepal measurements. Data is loaded via d3.csv from a remote URL, with the plot sized to the window and annotated with axis labels using d3.axisLeft and d3.axisBottom.

Mar 7, 2022
Loading thumbnail…

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

This example shows the cost of Netflix subscriptions across twelve countries using horizontal bars, where bar length encodes price and country names appear on the y-axis. Built with React and D3, the component loads CSV data via `d3.csv`, then renders SVG marks directly in JSX using `scaleBand` for country categories and `scaleLinear` for cost values. Axes are drawn manually with `xScale.ticks()` and `yScale.domain()`, while `useEffect` fetches the data asynchronously.

Mar 6, 2022
Loading thumbnail…

ICE 5

This example visualizes an ice-themed dataset using D3.js v5 within a React framework, rendering SVG elements. It displays a labeled diagram with geometric shapes, including rectangles and lines, paired with text annotations. The visualization uses D3’s selection and styling capabilities to manipulate SVG attributes, while the code also incorporates static SVG markup for structure. The data appears to be pre-defined or externally sourced, as no dynamic data loading or interactive forces are present.

Feb 28, 2022
Loading thumbnail…

ICE 5 : Loading and Parsing CSV Data with D3.js

This example shows how to load and parse a remote CSV file with D3 version 6 or 7. The page displays basic dataset statistics—size in kilobytes, number of rows, and number of columns—in a styled `<pre>` element. It uses `d3.csv` to fetch the Netflix dataset from a GitHub gist and `d3.csvFormat` to calculate the data’s size. The script also demonstrates chaining a promise with `.then` to handle the parsed data. A commented-out line references `document.getElementById`, though the active code updates the text container directly.

Feb 28, 2022
Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a simple emoji-like face using SVG elements composed with React and D3. A yellow circle forms the face, two brown circles serve as eyes, and a red mouth is generated with the `d3.arc` shape generator, which creates a semi-circular path. The layout is positioned by translating a `<g>` group to the center of the viewport, while coordinates for the eyes and mouth are defined as constants. The code demonstrates mixing React’s JSX syntax with D3’s arc API, and uses static SVG circles and a path for the final output.

Feb 21, 2022