P

pethavenu

@pethavenu·19 public vizzes

Loading thumbnail…

ICE-8 Peppa Pig Network Graph

This network graph visualizes character relationships from the Peppa Pig universe as a force-directed layout. All eight characters from the JSON data appear as purple circular nodes with labels, connected by orange lines that indicate friendship links between characters. The visualization uses D3.js version 6 with `d3.forceSimulation` to position nodes, applying link, charge, collision, and center forces. Users can drag nodes to explore the network, and hovering switches node outlines to green through the `nodeHover` CSS class. The SVG rendering approach is visible in the source code.

Loading thumbnail…

Visualizing Tree ICE-8

A collapsible tree diagram visualizes a hierarchical file system and music directory, with root "Directory" branching into "Document," "Pictures," "Music," and "Rock." The example uses D3.js version 3.5's `d3.layout.tree` and `d3.svg.diagonal` to render purple node-link SVG diagrams, with an animated transition on update. The data is hardcoded as a JavaScript array, with interactive node clicking enabled.

Loading thumbnail…

Country map ICE-8

A choropleth map of Indian states renders each region in a distinct categorical color, with state names shown as hover titles. The visualization uses d3.geoMercator for projection and d3.geoPath to generate SVG paths from TopoJSON data. State boundaries are stroked in black for clarity, while d3.scaleOrdinal with schemeCategory10 assigns the fill colors. The code loads the India states TopoJSON from a remote URL and removes the first feature before rendering.

Loading thumbnail…

ICE-8 Venu

This example depicts a world map using the Natural Earth 1:110m dataset, with each country rendered as a filled purple polygon with black, semi-transparent strokes against a white sphere backdrop. It employs D3.js version 5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library’s `feature` function extracts country geometries from the remote GeoJSON file. The visualization shows the sphere boundary and country borders as distinct SVG elements, loaded dynamically via a Promise.

Loading thumbnail…

ICE 7 Pie Chart

This pie chart visualizes car production sales by U.S. state, with each slice labeled with its sales value in thousands and accompanied by a color-coded legend. The chart is rendered as an SVG using D3 v5, with data loaded from a CSV file via the `csv` function. Slices are generated using `d3.pie` and `d3.arc`, colored through `scaleOrdinal`, and label positions are computed with the arc centroid method. The title and background styling come from a separate CSS file.

Loading thumbnail…

ICE-7venu

This example uses the classic Iris dataset to create a scatter plot, mapping petal width on the x-axis and sepal length on the y-axis. The visualization is rendered as an SVG using D3.js v6, employing the `scaleLinear`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `symbol` APIs to position and shape the data points. The plot includes styled axis labels for both dimensions and a main title, with categorical species represented by distinct symbol types. Data is loaded asynchronously from a CSV file fetched via the `csv` function.

Loading thumbnail…

Penguins dataset

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length and body mass on the x- and y-axes while encoding species with distinct colors. Each circle’s size also incorporates bill length and depth as visual variables. The code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles and axes as SVG using `d3.select` and `d3.axisBottom`/`d3.axisLeft`. Circle radius is fixed at 5 pixels, with species-specific fill colors assigned manually.

Loading thumbnail…

ICE-7 Scatter Plot

This interactive scatter plot, built with D3, displays the Iris dataset and animates a cycle through different feature combinations on the x-axis while the y-axis remains fixed. The visualization uses a reusable chart API, defining a `scatterPlot` function with methods for width, height, data, and margin, and leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` for rendering. The animation is driven by `setInterval`, updating the x-value every two seconds, and the plot is rendered as an SVG with a custom font loaded from Google Fonts.

Loading thumbnail…

Venu_ICE_7_Area_Chart

This area chart displays the price range of cars in India from 2009 to 2018, with years on the x-axis and sales prices on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `line` generators with a `curveBasis` interpolation to create a smooth purple filled region beneath a black stroke line. Data is loaded from a CSV file via `csv()`, parsed, and rendered as an SVG with axes configured using `axisBottom` and `axisLeft`.

Loading thumbnail…

Venu_ICE7_Line_Chart

This line chart displays car sales prices in the USA from 2009 to 2018, with the year on the x-axis and sales price on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` for the temporal axis and `d3.scaleLinear` for price values. A `d3.line` generator creates the purple path, while `d3.axisBottom` and `d3.axisLeft` produce labeled axes with gridlines. Data comes from a remote CSV file loaded via `d3.csv`, then parsed into Date and numeric values.

Loading thumbnail…

ICE-6

This bar chart visualizes the cost of cars by year, showing the price range for 15 selected model years from a CSV dataset. Purple horizontal bars are rendered as SVG rectangles within a React component using D3 scales (`scaleBand`, `scaleLinear`). The chart includes custom axes with blue gridlines and tick labels, with data loaded asynchronously via `d3.csv`. The visualization uses D3 v5 and React hooks (`useState`, `useEffect`) to manage state and rendering.

Loading thumbnail…

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

This example shows the basic monthly cost of Netflix across fifteen countries using horizontal bars, ranked by price. The visualization loads data from a CSV file via `d3.csv`, slices it to the first fifteen rows, and renders static rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn manually with `d3.axisBottom` and `d3.axisLeft` components built from tick values. The entire chart is composed as a React component with `useState` and `useEffect`, producing SVG output through React elements rather than direct DOM manipulation.

Loading thumbnail…

ICE-6

This visualization displays car pricing data for fifteen countries, using horizontal bars to compare each country’s basic cost. The chart is built with React and D3 v5, loading CSV data via `d3.csv` and rendering an SVG. Scales are created with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes added using `axisLeft` and `axisBottom`.

Loading thumbnail…

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

This example shows earthquake data as a scatter plot with longitude on the x-axis and latitude on the y-axis, using blue circles to mark each seismic event. The code loads a CSV file via `d3.csv`, computes the data domain with `d3.min` and `d3.max`, and maps coordinates using `d3.scaleLinear`. The SVG is appended directly to the body, with axes and point positions created through D3 selections and SVG circle elements. The visualization runs within a React shell, although the rendering itself relies entirely on D3’s imperative API.

Loading thumbnail…

ICE5

This interactive globe visualization displays global earthquake data loaded from a CSV file, with pan and zoom capabilities. The page shows metadata about the dataset, including file size, row count, and column count, computed using `d3.csv` and `d3.csvFormat`. Built with d3.v7, the visualization incorporates geographic shapes from TOPOJSON World Atlas and uses `d3.geoPath` for rendering, drawing inspiration from orthographic projection examples like Versor Dragging. The background features a decorative SVG image, with the globe centered on a dark, space-themed interface.

Loading thumbnail…

ICE5

This visualization displays earthquake regions using a React and D3.js framework. It loads earthquake data from a remote CSV file and uses D3’s `d3.csv` method to parse the dataset. The page provides a link to the source data and renders the geographic information through an embedded SVG reference. The visualization abstracts the SVG and group containers using a `VizContainer` component that follows the margin convention, making the layout modular and customizable.

Loading thumbnail…

Venu Gopal Raju Petha

This example uses D3.js to construct an animated smiley face entirely from SVG shapes. It appends circles and lines to a central group, positioning the head, ears, eyes, pupils, nose, and whiskers. While the code creates the faces’ static components, a linked video demonstrates the interactive eyebrow movement. The visualization relies on fundamental D3 selection and DOM manipulation methods, such as `select`, `append`, and `attr`, within a 960×500 SVG canvas.

Loading thumbnail…

11650230

A smiling animal face built from D3.js SVG shapes demonstrates basic DOM manipulation. The example constructs the figure using circles and lines for features like eyes, pupils, ears, whiskers, and a nose, all positioned with the `attr` method. It uses `d3.select` to append elements to an SVG canvas. No data or interactivity is present; the sketch is static, showing only how D3 can create and style primitive vector shapes.

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives. The code uses D3 selections and d3.arc to append a circle head, eyes, and a mouth to an SVG canvas. Eyebrow rectangles are positioned relative to eye coordinates, though the final block references an undefined `eyebrowG` variable. The visualization shows how D3 binds data to SVG elements through chained attribute setters, creating a static facial composition with a light blue fill and black stroke.