S

srivalliwuyyuru

@srivalliwuyyuru·17 public vizzes

Loading thumbnail…

Network Graph Diagram

This example uses a network graph diagram to visualize connections within the Kenneth Rainin Foundation, displaying both main nodes and child nodes. Built with D3.js v6, it uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes that are rendered as SVG circles, with text labels for names. Links are drawn as lines, and the graph is interactive, supporting drag-and-drop via the `drag()` behavior and zooming through the `zoom()` handler. The data is defined in JavaScript, with node colors indicating checked status.

Loading thumbnail…

Family Tree (

This example shows an animated family tree built with D3.js v6. It visualizes hierarchical relationships between family members using a tree layout, with nodes as circles colored by generation depth and connected by lime-green links. The data is defined as an array of child-parent pairs, processed with `d3.stratify()` and `d3.tree()`. The SVG rendering animates path connections and circle radii using `transition().duration()`, and labels each node with the child name.

Loading thumbnail…

mexico map

This visualization displays a map of Mexico highlighting its internal state boundaries and graticule lines, rendered using an SVG projection. The map uses a Mercator projection centered on the country and geoJSON data sourced from ArcGIS, processed through mapshaper. The React app loads topojson data via d3.json and converts it to GeoJSON using topojson.feature, while d3.geoPath generates the geographic paths. Each state is drawn as a teal landmass with white borders against a light graticule overlay.

Loading thumbnail…

World map

This visualization displays a natural Earth projection world map, with countries rendered as colored SVG paths on a blue sphere. The map uses d3.geoNaturalEarth1 and d3.geoPath to project and draw geographic features, while d3.zoom enables pan and zoom interactions that transform the entire map group. Country boundaries come from the world-atlas TopoJSON dataset, and the rendering uses SVG paths with hover highlighting that changes the fill color.

Loading thumbnail…

BONUS ICE SCATTER PLOT

This example visualizes a 3D scatter plot of body measurements, plotting Height, Weight, and BMI as points in three-dimensional space. The data comes from a CSV file loaded via `d3.csv`, and each marker is rendered as a black circle with defined opacity and size. The visualization is built using the Plotly.js `scatter3d` trace type and the `Plotly.newPlot` API, with axis titles styled in distinct colors. The layout configures margins and scene axes to frame the data within a minimal HTML page.

Loading thumbnail…

Bonus ICE

This example shows the top 10 billionaires in 2021, grouped by their country of origin, using a 3D stacked bar chart. The chart displays net worth in billions of USD, with each bar representing a billionaire and colored segments indicating their home country. It uses the Highcharts library with the highcharts-3d module, enabling 3D column rendering through the `options3d` configuration for depth and rotation. The data is hardcoded into three series for the United States, France, and India, with categories listed on the x-axis.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 v6 scatter plot visualizes insurance data, mapping BMI and charges via the extensible `scatterPlot()` chart factory. The SVG rendering initially plots petal width against sepal length, then cycles through four data columns every two seconds, animating the axis scales and circles with `setInterval`. The chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the getter-setter pattern supports dynamic updates. Data loads as CSV from a remote gist, with custom labels added for the x- and y-axes.

Loading thumbnail…

Reusable _scatter_Plot

This interactive scatter plot visualizes the Iris dataset, displaying petal and sepal dimensions as colored circles with a legend and axes. It uses d3.csv to load data and d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.scaleOrdinal to map values. An animation cycles through different x-axis attributes every two seconds. The reusable scatterPlot function configures margins, radius, and dimensions, rendering with SVG in the browser.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Loading thumbnail…

line chart

This line chart displays the number of Android users over time, with years on the x-axis and user counts on the y-axis, both labeled accordingly. The visualization uses D3 v5 with an SVG rendering, employing `scaleTime` for the temporal axis, `scaleLinear` for the numeric axis, and `line` to generate the path. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse`. The chart includes gridlines, axis labels, and a red line path styled through an external CSS file.

Loading thumbnail…

Area chart

This area chart displays the number of Android users over time, plotted as a smooth, filled curve. The visualization uses D3 v6 to load CSV data, parse date values, and generate an SVG area path with `d3.area` and `curveBasis`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while scales from `scaleTime` and `scaleLinear` map data to pixel coordinates. The dataset comes from AndroidUsers.csv, and the chart includes labeled axes and a title.

Loading thumbnail…

Pie Chart

This pie chart displays the top 10 US states by GDP, with each slice sized proportionally to the state’s economic output. The visualization is built with React and D3 v4, using `d3.pie` and `d3.arc` to generate SVG paths. Hovering a slice highlights it and reveals a tooltip with the state name and value. A legend alongside the chart identifies each state, while the data is sourced from a CSV file containing state GDP figures.

Loading thumbnail…

Pie Chart

This pie chart displays the total car production value for each country in 2019, sourced from a CSV file loaded via d3.csv. The chart uses d3.pie and d3.arc to generate SVG path segments, with each slice colored by a categorical scale from d3.scaleOrdinal. A custom legend lists each country with its corresponding color and formatted value, and the entire visualization is positioned within a 960x500 SVG canvas.

Loading thumbnail…

Scatter Plot Using superstore.csv

This scatter plot visualizes the relationship between Sales and Profit in the Superstore dataset, with each circle representing a data point. The code loads data from a remote CSV file using `d3.csv`, then maps Sales and Profit values to x and y coordinates with `scaleLinear`. Axes are generated using `axisLeft` and `axisBottom`, while SVG circles are appended with a fixed radius. The plot is rendered using D3 v6 within a full-window SVG, with styled axis labels for both dimensions.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows the top 10 films by category and sales from a Superstore dataset, rendered as a horizontal bar chart using React and D3. It loads CSV data from a GitHub gist and maps sales values to bar widths via `d3.scaleLinear`, with categories positioned by `d3.scaleBand`. The SVG output marks axes with `scaleBand.ticks` and renders each bar as a `rect` element created through React components. The chart updates dynamically when the data loads, demonstrating a hybrid approach where React manages the DOM while D3 handles scales and data parsing.

Loading thumbnail…

Data visualization

This example displays metadata about a CSV file of flavor data, including its size, row count, and column count, alongside a static SVG image of the flavors. The page uses d3.csv to fetch the remote CSV from a GitHub gist, then d3.csvFormat to calculate the file size in kilobytes and d3’s array properties to count rows and columns. The results are inserted into a pre element styled with magenta background, while a red h1 heading labels the page. The layout relies on basic CSS for centered text and image sizing.

Loading thumbnail…

smiley face with eyebrows

A yellow smiley face with animated eyebrows is rendered in an SVG canvas. The face consists of a yellow circle with a black outline, two eyes, and a mouth drawn as an arc. The eyebrows, represented as rectangles, move up and down in a looping animation using D3 v5 transitions within a React framework. The facial elements are positioned relative to the center of the canvas, demonstrating basic SVG shape construction and animation techniques.