Skip to main content
Log in
Y

yazneshpara2@gmail.com

@Yazneshpara·14 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Simple World Map

A choropleth world map visualizes 2024 national population estimates, with countries shaded on a yellow-green scale from light to dark by population size. The visualization employs an SVG rendering with the `d3.geoNaturalEarth1` projection, `d3.geoPath` for map geometry, and `d3.axisBottom` for a gradient legend. Population data is joined to country features by name, with missing values shown in grey. Tooltips display the exact population count on hover. The map uses TopoJSON data from the world-atlas package and D3 v7.

Nov 9, 2025
Loading thumbnail…

Fork of Fork of Fork of Simple World Map

This choropleth map visualizes global population distribution for 2024, using a yellow-green sequential color scale to represent population values for fifteen major countries while leaving others in light gray. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath` over TopoJSON country boundaries from the world-atlas package. Hovering over a country reveals a tooltip with the country name and population figure, while a gradient legend with `d3.axisBottom` displays the value scale. The visualization uses D3 v7 and the topojson-client library to convert TopoJSON features into renderable paths.

Nov 9, 2025
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of D3 Starter

This example shows a hierarchical tree of a university department structure, with colored nodes connected by curved links. The layout is computed using D3’s `d3.stratify` and `d3.tree` APIs, which organize the data into parent-child relationships and positions nodes in a tidy tree. Node positions are rendered as SVG circle and text elements, while links are drawn as cubic Bézier paths using template literals. Data is loaded remotely from a CSV file via `d3.csv`, and all rendering uses the D3 v7 library.

Nov 9, 2025
Loading thumbnail…

Fork of Fork of Fork of Fork of D3 Starter

This example displays a university department hierarchy as a vertical tree diagram, using circles for nodes and labeled edges to show parent-child relationships. It loads CSV data from a GitHub Gist via `d3.csv`, then applies `d3.stratify` to build a hierarchical root and `d3.tree` to compute the layout. The SVG output draws curved links with `path` elements and positions nodes and labels based on computed coordinates, with all styling handled through CSS. The tree’s structure is immediately visible, with text placed left or right of nodes depending on whether they have children.

Nov 9, 2025
Loading thumbnail…

Fork of Fork of Fork of D3 Starter

This example visualizes the average engagement of social media posts per year, drawing on a CSV dataset that includes author, follower count, engagement, platform, and post date. A monotone X-curved line chart displays the trend, with the y-axis scaled to a maximum value 10% above the data’s peak. Built with D3 v7, the code uses `d3.csv`, `d3.rollup`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`, rendering to an SVG with styled margins and a red stroke line.

Oct 28, 2025
Loading thumbnail…

Fork of Fork of D3 Starter

This example shows the distribution of social media posts across platforms with a pie chart, displaying the number of posts per platform. The visualization computes platform counts from a CSV file using `d3.rollup`, then renders slices with `d3.pie` and `d3.arc`, filling each segment with a color from `d3.scaleOrdinal` and `d3.schemeTableau10`. Platform labels are positioned at each slice’s centroid. The SVG is created with D3 v7, and the chart includes a bold title, with a white stroke separating the slices.

Oct 28, 2025
Loading thumbnail…

Fork of D3 Starter

The visualization is a scatter plot that shows the relationship between an author's number of followers and their post engagement, using data from the `social_media_activity.csv` file. Each point represents an author, with the x-axis mapping follower counts and the y-axis mapping engagement levels. The chart is rendered as an SVG using D3 v7, with data loaded via `d3.csv` and scales created with `d3.scaleLinear`. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and the points are styled with a fixed radius, fill color, and opacity.

Oct 28, 2025
Loading thumbnail…

Fork of HTML Starter

This example renders a simple static web page that displays the text “Hello HTML!” prominently in the center of the viewport. The page loads a single stylesheet and a JavaScript module, and the console outputs the message “hello world”. The visualization uses plain HTML and CSS, with the `.message` class setting the font size to 12em and centering the text. No external libraries or data sources are involved; the presentation is purely a starter template.

Oct 28, 2025
Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of 100 randomly generated quantitative data points, visualizing each item’s value as a vertical steelblue rectangle. It uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The code generates the dataset in-browser using `Math.random()`, applies rotated labels to sparse x-axis ticks, and includes chart and axis titles for context.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a multi-series line chart comparing sales, profit, and expense data across 150 synthetic data points. The chart uses D3.js v7 to generate random values for each series, which are then plotted as three distinct colored lines using `d3.line()` and `d3.scaleLinear()` scales. The visualization includes axis labels, a title, and a manual legend, all rendered as SVG elements within a single `<svg>` container. The code explicitly handles margin calculations and applies `d3.axisBottom()` and `d3.axisLeft()` for axis generation.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length for each flower. The code uses D3 v7 to load the CSV data, creates linear scales for both axes, and renders individual tomato-colored circles. SVG is used for the chart, with D3’s axis generators adding labeled bottom and left axes, plus a chart title.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This bar chart displays categorical values from a remote CSV file hosted on GitHub. The visualization uses D3.js v7 to load the data with `d3.csv` and renders it as an SVG. The chart's y-axis is scaled linearly with `d3.scaleLinear` and includes nice tick marks, while the x-axis uses `d3.scaleBand` for categorical spacing. The code appends steelblue rectangles, rotates x-axis labels, and adds a title, with margins and axes positioned via SVG transforms.

Oct 20, 2025
Loading thumbnail…

Fork of HTML Starter

This visualization renders a pizza using SVG circles and ellipses layered to depict the crust, sauce, cheese, spinach, purple pepperoni, and chili flakes. Built with D3 v7, the code uses `d3.select` to append elements and JavaScript loops with trigonometric functions to position toppings evenly around the center. Random chili flakes are placed using `Math.random()` to scatter dots across the pie.

Sep 22, 2025
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This SVG and CSS example demonstrates basic shape rendering and styling within a 960x500 pixel canvas, using a scale transform to enlarge the graphics. The visualization displays circles, rectangles, lines, and a path, showcasing how inline presentational attributes like `fill`, `stroke`, and `stroke-width` combine with an external stylesheet to define appearance. A CSS class applies stroke properties to grouped line elements, while an SVG path uses round line joins and caps. The graphics are constructed directly in markup without a JavaScript library, relying on native SVG elements.

Sep 22, 2025