S

salimjivani

@salimjivani·20 public vizzes

Loading thumbnail…

Social Network Graph

This example visualizes a small social network graph, showing six nodes representing a user and their friends, connected by weighted links that indicate relationship strength. The graph is rendered as SVG using D3.js v2’s force layout, which positions nodes through simulated physics with gravity, charge, and distance parameters. The code loads JSON data from `graphFile.json` and maps the nodes and links into the visualization. Node labels are displayed as text, and link thickness is scaled to the square root of each connection’s weight. The implementation uses `d3.layout.force`, `force.drag`, and tick event handlers to update node and link positions dynamically.

Loading thumbnail…

Tree Example

This example shows an interactive tree diagram built with D3.js, where clicking a node collapses or expands its children with smooth animated transitions. The data is a hardcoded JSON structure representing a family hierarchy, with names like Roshan and Nimmat. The code uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` to draw curved links between parent and child nodes. Node and link elements are rendered as SVG circles, text, and paths, with transitions handled by D3's `transition` API.

Loading thumbnail…

ICE 8 - Country Map

This example displays a choropleth map of the United States, with each county filled in green and outlined in brown, and hovering turns a county yellow. It uses the D3.js library's `geoPath` and `geoAlbersUsa` projection to render the map, drawing from the `us-atlas` counties-10m GeoJSON data source. County data is loaded via a JSON request, and the map’s SVG elements are built dynamically using D3’s selection and data-binding methods.

Loading thumbnail…

World Map w/ Rotation

This example presents an interactive world map as a rotating orthographic globe. The visualization loads geographic boundary data from a JSON file and renders it as SVG paths, continuously adjusting the map’s rotation with a timer. The animation rotates the projection along its horizontal axis using `projection.rotate()`, while a tilting offset adjusts the vertical perspective. The map uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoProjection` to create the spherical effect, and the countries are filled with a solid green color.

Loading thumbnail…

Line Chart

This line chart displays sales volume over time for multiple districts, using distinct colors to differentiate each district’s trend. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smoothed paths, and `nest` to group data by district. Data comes from a CSV file parsed with dayjs. A custom `colorLegend` function renders the color key, and axis labels and a title annotate the chart.

Loading thumbnail…

Line Chart

A line chart visualizes sales volume by month across multiple districts, with time on the x-axis and temperature-derived sales values on the y-axis. Using D3 v5 and SVG rendering, the code employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, and `nest` to group data by district. Axes are generated via `axisLeft` and `axisBottom`, with data fetched from a CSV and dates parsed using dayjs. A custom `colorLegend` function displays the categorical color scale.

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of seven documentary films by their associated values, presented with a legend on the right. The chart uses D3.js v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `format` to compute the arc segments and render them as SVG paths. The data is loaded from `data.json` and sorted in its original order. Each legend entry displays the film label, its raw value, and percentage, with colors mapped via a categorical color scale.

Loading thumbnail…

Pie Chart

A pie chart visualizes the distribution of documentary film titles by their associated values and percentages, with an accompanying legend displaying each label, numeric value, and percentage. The chart uses D3 v5’s `pie()` generator with a null sort to compute arc segments, which are rendered as SVG paths via the `arc()` function. A color scale (`scaleOrdinal`) maps values to a custom palette. The legend is built manually with rectangles and text elements, formatted using `format('.4~g')` for the values. The data is loaded asynchronously from a local JSON file using `json()`.

Loading thumbnail…

Scatter Plot

This example presents a scatter plot of the Iris dataset, using petal length and width for the x- and y-positions, with three species color-coded as green, yellow, and red circles. The code loads CSV data with d3.csv, uses d3.scaleLinear and d3.extent to set scales, and renders axes with d3.axisLeft and d3.axisBottom. The SVG circles also carry sepal length and width values, though these are not mapped to visual channels. Rendering is done entirely in a static SVG.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length with points colored by species (blue, green, red). Built with D3 v6, it loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to position points, and renders with SVG circles and axes. The chart is implemented as a reusable function in `scatterPlot.js`, though the main `index.js` also directly adds labels and styling.

Loading thumbnail…

Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, mapping petal length and width for each specimen. Points are colored by species (setosa, versicolor, or virginica) using a categorical color scheme. The SVG rendering uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes and plot, with data loaded asynchronously via `d3.csv`. Circle size is fixed, and the layout adapts to the browser window dimensions.

Loading thumbnail…

Resusable Scatter Plot

This interactive demo showcases a reusable scatter plot built with D3.js, visualizing the classic Iris dataset. It cycles through four flower measurements every two seconds, swapping the x-axis variable while maintaining the y-axis, so the changing distributions and correlations between sepal and petal dimensions are easy to compare. The plot uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions within a custom `scatterPlot` module, drawing SVG circles and updating them in place with a `setInterval` timer. The data is loaded remotely from a CSV file via `d3.csv`.

Loading thumbnail…

Scatter Plot with Iris Data

This scatter plot visualizes the Iris dataset, showing petal length and width on the x- and y-axes, with each point scaled by sepal dimensions and colored by species (setosa in black, versicolor in yellow, virginica in blue). It uses D3 v6 with `d3.csv` to load data, `scaleLinear` for scales, `axisLeft` and `axisBottom` for axes, and SVG circles for rendering. The data is parsed from a GitHub-hosted CSV, and axis labels are positioned with D3’s selection and append methods.

Loading thumbnail…

Untitled

This example renders a 3D scatter plot from a CSV dataset using Plotly.js within a D3 v6-loaded HTML page. It visualizes two series of coordinates—x1/y1/z1 and x2/y2/z2—as distinct marker groups with differing colors and opacity. The code loads data via D3’s `d3.csv` and transforms rows using a custom `unpack` function to extract columns for the Plotly traces, which are configured as `scatter3d` markers. The layout margins are set to zero to maximize the plot area.

Loading thumbnail…

Untitled

A 3D bar chart displays revenue for three product categories across four states, with vertical bars for Nail polish, Eyebrow pencil, and Lipstick, and color-coded series for Florida, Texas, Arizona, and Nevada. The chart is built using the AnyChart JavaScript library, which handles data mapping, animation, tooltips, and legend rendering. The SVG output is generated dynamically via the AnyChart API, with dollar-formatted Y-axis labels and rotated x-axis labels.

Loading thumbnail…

Untitled

This visualization displays a 3D surface plot of mountain elevation data, with latitude and longitude coordinates mapped onto the x- and y-axes and elevation values represented on the z-axis. It uses Plotly’s `newPlot` API to render the interactive surface, while D3’s `csv` method fetches the dataset from a remote CSV file. The React and ReactDOM libraries manage the page structure, though the actual chart is rendered entirely by Plotly. The layout sets explicit pixel dimensions and margins, and the color gradient on the surface encodes elevation variations across the terrain.

Loading thumbnail…

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

A React application renders a horizontal bar chart of the top 10 most populous countries from a CSV dataset. The chart displays each country's title on the y-axis and the number of reviews on the x-axis using `scaleBand` and `scaleLinear`. The app loads data with the `csv` function from D3 v5, maps review values from strings to numbers, and renders SVG bars via React components, with axis ticks and labels generated through manual iteration over scale domains.

Loading thumbnail…

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

This visualization displays the top 10 most populous countries for 2019 as a horizontal bar chart. It uses React with the D3 v5 library, leveraging `d3.csv` to load the data and `d3.scaleBand` and `d3.scaleLinear` to map country names and population values to positions in an SVG canvas. The chart renders grid lines, tick labels, and bars using React’s declarative syntax.

Loading thumbnail…

home_cinema

This example uses a static SVG illustration of a home cinema setup, depicting the room’s architecture with a curved screen wall, two side speakers, and a central projector console. The scene is stylized with flat colors and geometric shapes, framed within a fixed viewBox. Rendered via a single inline SVG element, the code relies on vanilla D3 v4 (loaded from a CDN) and React, though no data binding or interactive behaviors are demonstrated. The visualization focuses on a detailed, diagram-like representation of the spatial layout.

Loading thumbnail…

Fork of Smiley Face Part I

A smiling face is drawn with a large red circle for the head, orange stroke, two black eyes, and a thick arc for a mouth, alongside two smaller blue-ish circles and a partial arc rendered as a mustache. The visualization uses React to create SVG elements, with the `arc` function from D3 v7 generating the mouth and mustache paths. All shapes are centered and positioned using SVG transforms and coordinate offsets, and the static composition is rendered directly to the page without interaction or animation.