Ramya19-hub

@Ramya19-hub·15 public vizzes

Social Network Graph

A force-directed social network graph visualizes connections among ten individuals, each assigned to a department group: Math, Science, or English. Node color encodes the group, while red links highlight cross-group connections and gray links show same-group ties. The visualization uses D3 v5’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute physics-based layout, rendering nodes as circles with labels and links as SVG lines that update position on each simulation tick.

Apr 12, 2023

Loading thumbnail…

Tree Visualization

This example visualizes a hierarchical dataset of car types, including sedans, SUVs, and trucks, using an interactive SVG tree layout created with d3.tree. The root node is rendered as a red circle, first-level children as green rectangles, and leaf nodes as blue triangles, with curved links connecting parent and child nodes via cubic bezier paths. D3 v5 hierarchy is used to structure the data, while SVG shapes and text labels display each car model name. The visualization demonstrates a simple, color-coded dendrogram for categorical product categories.

Apr 12, 2023

Loading thumbnail…

Map of Spain

This visualization displays a map of Spain using D3.js version 5. It loads world country geometries in TopoJSON format from the world-atlas package and extracts the feature for Spain. The code applies a geoMercator projection fitted to a 960×500 pixel viewport, then renders the country outline as a single SVG path using d3.geoPath. The map appears without additional styling, showing only the vector boundary of the Spanish territory.

Apr 12, 2023

Loading thumbnail…

World Map

This visualization displays a world map using a Robinson projection. The map is rendered as a single SVG path, with countries derived from the world-atlas TopoJSON dataset. The code converts the TopoJSON data to GeoJSON using the topojson-client, then projects it with d3.geoRobinson and generates the path with d3.geoPath. The final SVG is sized at 960 by 500 pixels and appended directly to the page body.

Apr 12, 2023

Loading thumbnail…

Untitled

The visualization plots three dimensions of retail data as a 3D scatter plot, showing the relationship between average total sales, average price per unit, and average operating profit for various U.S. states. Data is loaded from a local CSV file using `d3.csv`, then trace1 is constructed with marker styling and rendered via Plotly’s `Plotly.newPlot`. The layout configures axis titles for each dimension within a scene, while margins are disabled. The example uses Plotly 2.20.0 and D3 3.5.17 libraries.

Apr 3, 2023

Loading thumbnail…

3D Bar Chart with d3.js

This example presents a 3D-style bar chart that visualizes average sales across five Midwestern states using D3.js. The chart displays bars in a two-dimensional SVG canvas, with the illusion of depth created through a z-scale that controls bar opacity—a z-axis labeled "Opacity" appears without tick values. Each bar’s height maps to the `avg_sales` value via a linear `yScale`, while an `xScale` positions states along the horizontal axis. The code uses `d3.axisBottom` and `d3.axisLeft` to render axes, and includes mouseover and mouseout event handlers that change bar color and opacity interactively.

Apr 3, 2023

Loading thumbnail…

Untitled

This visualization displays average sales data across U.S. states using 3D cubes, with each cube’s height representing the sales value and its color denoting the region. Users can interactively rotate the cube arrangement by dragging the mouse, which triggers animated transitions in both cube positions and text labels showing numeric values. The implementation combines d3.v4 with the d3-3d plugin, leveraging `d3._3d()` for cube geometry, `d3.drag()` for interaction, and ordinal color scaling. Data is embedded directly in the script, drawn as SVG elements with smooth tweening for label updates.

Apr 3, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of users across five car companies: Honda, Nissan, Tesla, Hyundai, and Toyota. The chart uses colored segments with corresponding value labels and a legend for identification. Built with D3 v5, the visualization uses `d3.pie()` to compute arc angles and `d3.arc()` for rendering SVG paths. The legend combines colored rectangles with text labels, and the data is hardcoded in the script.

Mar 30, 2023

Loading thumbnail…

US Students in the University from 2000-08 Area Chart

This area chart displays the number of US university students from 2000 to 2008, using a smooth curve to show the trend over time. The visualization combines a black line and an aqua-filled area beneath it, with labeled axes for year and student count. Built with D3 v5, it uses `d3.line()` and `d3.area()` with `curveBasis` for smoothing, along with `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes. Data is loaded as CSV from a GitHub gist and rendered as SVG.

Mar 30, 2023

Loading thumbnail…

US Auto Sales from 2005 to 2022 Line Chart

This line chart displays US auto sales from 2005 to 2022, with the x-axis mapping years and the y-axis mapping sales figures. The visualization uses d3.v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path, with sales data loaded via `csv` from a GitHub gist. Axis labels and a title are appended as SVG text, and the line path is styled with a blue stroke. The chart is encoded in a single SVG element with margins, tick lines, and rotated y-axis label.

Mar 30, 2023

Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot displays the Iris Dataset, coloring each point by species (setosa, versicolor, virginica) and animating through different feature-pair combinations every six seconds. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles, while the chart factory pattern (`scatterPlot()`) exposes setters for width, height, margins, and accessors. The animation cycles x-axis values across petal width, sepal width, petal length, and sepal length, updating axes and marks accordingly.

Mar 29, 2023

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris Flower Dataset, mapping sepal length on the x-axis and petal length on the y-axis. Points are colored by species—blue for setosa, yellow for versicolor, and red for virginica—using filled circles rendered as SVG elements. Built with D3 v6 and React, the visualization uses `d3.csv` to load data from a GitHub Gist, `d3.scaleLinear` for continuous axes, and `d3.axisLeft` and `d3.axisBottom` to draw labeled axes. The plot dynamically sizes to the browser window.

Mar 22, 2023

Loading thumbnail…

ICE-6 Bar Graph

This example shows the Olympic medal count for the top 12 countries as a horizontal bar graph, with red gridlines along the x-axis and country labels on the y-axis. The visualization loads data from a CSV file and renders the bars as SVG rectangles sized by each country’s total medal count. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` for data loading, with `select` and `axisLeft`/`axisBottom` available but not applied directly.

Mar 22, 2023

Loading thumbnail…

ICE 5

This example displays an image of an ice-themed scene within a web page, styled with a darkslategray background and a goldenrod border. The page includes a title and a description, rendered as SVG. The code uses an embedded base64-encoded PNG image within an SVG pattern, and stylized elements via CSS. D3.js is included as a library.

Mar 6, 2023

Loading thumbnail…

IC4-overlapping Buddha

A colorful, generative composition layers hundreds of randomly positioned circles and rectangles over a detailed SVG path of a Buddha figure. Built with React, the sketch renders overlapping ellipses and shapes using the `Ellipse` component, which draws two rotated ellipses per instance. The visualization uses JavaScript’s `Math.random()` to place elements and assign RGB fill values, creating a chaotic, pink-background collage. The Buddha path itself is rendered as an SVG `<path>` element, with React managing the component-based structure and SVG output.

Mar 1, 2023