Z

zoniyac

@zoniyac·53 public vizzes

Loading thumbnail…

map-dot-density

This map shows the percentage of stunted children across eight blocks in Palghar, India, using a choropleth coloration over administrative boundaries. The visualization is implemented with D3 v5, projecting the GeoJSON geometry using `geoMercator` and rendering the polygons with `geoPath`. A slider, from `d3-simple-slider`, adjusts the color scale bins, while textures from the `textures` library are applied to the SVG. Hovering over a block reveals a tooltip with the exact percentage.

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page containing a language selector dropdown with options for English, French, and Nederlands. The dropdown uses standard HTML `<select>` and `<option>` elements, with inline CSS styling that references flag images from an `images/` directory. The code does not include any JavaScript or external libraries, showcasing a static, bare-bones approach to building a user interface component. It serves as a starting point for integrating form elements into a larger web application.

Loading thumbnail…

map-dot-density

This example visualizes the prevalence of stunted children across eight blocks in Palghar, India, using a dot-density map. It displays the geographic boundaries of each block, filled with a texture pattern that varies based on the percentage of stunted children, and includes an interactive slider to filter the data range. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` to project GeoJSON boundaries, while the `textures` library generates circle and line patterns for the fills. A tooltip appears on mouseover to show the block name and its stunted child percentage.

Loading thumbnail…

Untitled

A bar chart displays the values of three fruits (apple, banana, pineapple) from a CSV file, with each bar colored red, green, or blue. The chart uses D3 v4's `d3.select`, `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` to render an SVG visualization with rotated x-axis labels and a fixed y-axis range from 0 to 100.

Loading thumbnail…

dot-size

Five square panels display a progression of dot-size textures, from fine to coarse, demonstrating how changing the radius and stroke width of a repeating circle pattern alters visual density. Each panel is filled using a distinct texture created with the D3 textures library, applied via `svg.call()` and referenced with `texture.url()`. The example uses D3 v5 to construct SVG rectangles, with circles generated programmatically as tiling patterns.

Loading thumbnail…

orientation

This example displays ten square panels arranged in two rows, each filled with a distinct geometric pattern such as hexagons, crosses, woven shapes, waves, and lines. It demonstrates the textures library’s ability to generate SVG patterns for filling shapes. Using d3 selections and the textures API, the code creates ten texture objects and applies them to the rectangles via `style.fill` with their `.url()` references.

Loading thumbnail…

textured pie chart

A textured pie chart visualizes categorical data using SVG paths filled with repeating custom patterns. Built with D3.js v4 and the textures library, the code defines four distinct path-based textures via `textures.paths()`, applying them to a pie layout. The chart renders within an SVG container, using D3's data join to generate slices, with each slice receiving a unique texture from the pre-defined set. The example demonstrates how to integrate third-party texture generation with D3's declarative SVG manipulation for enhanced visual distinction between categories.

Loading thumbnail…

button

Four buttons cycle a rectangle’s fill through four SVG textures generated by the textures library: circles, lines, crosses, and a custom banana-shaped path. The example demonstrates how to apply texture definitions to an SVG node via `svg.call(t1)`, then update the rectangle’s fill on button click with `changeColor(t.url())`. A slider, wired through `d3.select("#mySlider").on("change", ...)`, adjusts the line texture’s size, though the slider element itself is not defined in the visible markup. All rendering uses D3 v4 and SVG.

Loading thumbnail…

slider

Two range sliders control the density and radius of a procedural circle texture applied to a rectangular SVG shape. Dragging either slider updates a texture generated with the `textures` library, which is then used as the rectangle’s fill via `textures.circles().size()` and `.radius()`. The SVG is rendered with d3.v4, which appends the rectangle to the chart area. Each slider also displays its current numeric value in an accompanying HTML paragraph.

Loading thumbnail…

Untitled

This example demonstrates how a slider controls the size of a pattern-filled circle in an SVG. The circle’s radius stays fixed, but the pattern scale changes as the slider moves between 2 and 40. The code uses the `textures` library to generate the fill, applying it via `t1.size(size)` and `svg.call(t1)`, with updates triggered by the slider’s `change` event. The visualization is rendered using D3 v4 and React, with the SVG drawn at 400 by 200 pixels.

Loading thumbnail…

Untitled

This example shows four circles arranged horizontally, each with a fixed radius of 10 pixels. A slider control allows the user to select a value between 2 and 40, and the chosen value is written to the document via `document.write` in the `changeSize` function. The visualization uses d3.v4 to bind an array of X positions to the circles and listens for slider changes with `d3.select("#mySlider").on("change")`. The SVG is rendered directly in the HTML with a fixed width of 400 pixels and height of 200 pixels.

Loading thumbnail…

orientation

This example demonstrates how to dynamically change a circle’s fill using a texture pattern. The circle, drawn with D3, initially has no fill, and clicking buttons applies or removes a texture generated by the `textures` library’s `paths()` API. The texture is set via `.url()` and passed to a `changeColor` function, which updates the circle’s `style("fill")`. Rendering is SVG-based, with the D3 v5 selection and attribute methods controlling the visualization.

Loading thumbnail…

D3 Example

This example presents a bar chart of religious populations using SVG rendering, with each bar filled by a distinct path-based texture pattern. The visualization maps the `religion` column to the x-axis and `population` to the y-axis, using `d3.select` and SVG attributes to construct the chart. The code leverages the `textures` library to generate four unique path fills applied via `svg.call()`, while D3 v3 handles the axis and layout with specified margins and bar padding. The chart communicates categorical population data through textured bars, offering a visually distinctive alternative to solid color fills.

Loading thumbnail…

orientation

A 2x5 grid of black-bordered squares displays ten distinct texture fills generated by the textures.js library. The patterns include hexagons, crosses, caps, woven lines, waves, squares, circles, a complemented circle set, and diagonally oriented lines. D3.js v5 selects the SVG element and appends each rectangle, assigning the texture’s `url()` as the fill style via `d3.select('svg')` and chained `.attr()` calls. The example demonstrates the variety of available texture API options, including shape, size, and line orientation parameters.

Loading thumbnail…

Untitled

A rendered SVG pear demonstrates how viewport matching works. The green fruit shape uses a filled path, while its brown stem and leaf are drawn as stroked paths. This example pairs a fixed viewport with a matching viewBox, using SVG path data for each element. The code defines the shapes directly within an HTML page, with no JavaScript library involvement.

Loading thumbnail…

textured pie chart

This example displays a textured pie chart with five categorical segments, each filled with a distinct pattern and color derived from dummy data. It uses the D3.js `d3.pie` and `d3.arc` APIs to compute angles and render SVG paths, while the textures library (via `textures.paths`) generates hexagonal, cross, cap, woven, and wave patterns. The chart is styled with a black stroke and a categorical color scale.

Loading thumbnail…

textured pie chart

This example shows a pie chart whose five slices are filled with distinct geometric textures instead of solid colors. Each slice uses a different pattern generated with the `textures` library, including hexagons, crosses, caps, woven, and waves. The chart is built using `d3.pie` and `d3.arc` to compute the slice paths, while `d3.scaleOrdinal` maps each data category to a texture URL. Rendered as an SVG, the chart includes a black stroke around each slice to visually separate the textured areas.

Loading thumbnail…

D3 Example

This example shows a bar chart comparing the population of five religions, using SVG rendering within a React framework. The bars are filled with distinct texture patterns—hexagons, crosses, caps, woven, and waves—generated by the textures library, with each religion assigned a unique pattern via an ordinal color scale. The code uses D3 v3 APIs including `d3.scale.ordinal`, `d3.svg.axis`, and `d3.csv` to load and visualize the `religionWorldTotals.csv` data, with axes formatted using a custom SI tick formatter that converts "G" to "B" for billions.

Loading thumbnail…

test texture.js

A choropleth map of Palghar district, India, uses SVG paths from `d3.geoPath` to show the percentage of stunted children per block. Each polygon’s fill is a texture pattern from the `textures` library, with stroke width varying by value. A range slider (from `d3-simple-slider`) filters the choropleth by adjusting low/high thresholds, triggering an animated `transition` on the fills. Tooltips display block names and exact percentages on hover.

Loading thumbnail…

map-line-density

This example visualizes the percentage of stunted children across administrative blocks in Palghar, India, using a choropleth map. The map renders GeoJSON polygon boundaries with d3.geoPath and a Mercator projection, while fill patterns from textures.lines encode the data values. An interactive range slider, built with d3-simple-slider, dynamically adjusts the classification thresholds, triggering a CSS transition to recolor the map. Hovering over a block displays its name and value in a tooltip, with data sourced from a CSV file and joined to the GeoJSON features.

Loading thumbnail…

orientation

This example shows a large, dark square filled with two distinct path-based patterns created using the textures library. Each pattern is generated by a different custom path function and applied to the square as a fill. The code uses `textures.paths()` to define the patterns and `svg.call()` to register them, then assigns the texture URLs to the rectangle via `.style("fill", t1.url())`. The rendering is done with D3 v5 and SVG, with the square drawn as a single `rect` element.

Loading thumbnail…

Untitled

This example shows a heatmap with pattern-filled cells instead of solid colors, using wave textures of varying density to represent values. The heatmap displays data for groups A through J and variables v1 through v10, loaded from a CSV file. The code uses the textures library to generate four wave patterns with different sizes, then maps values to these patterns via `d3.scaleOrdinal`. Each cell is drawn as an SVG `rect` positioned with `d3.scaleBand` for the x and y axes, with a black stroke and a fill from the selected pattern URL.

Loading thumbnail…

map-line-density

This example visualizes the percentage of stunted children across administrative blocks in Palghar, India, using a choropleth map. The map renders GeoJSON polygon boundaries with d3.geoPath and a Mercator projection, while fill patterns from textures.lines encode the data values. An interactive range slider, built with d3-simple-slider, dynamically adjusts the classification thresholds, triggering a CSS transition to recolor the map. Hovering over a block displays its name and value in a tooltip, with data sourced from a CSV file and joined to the GeoJSON features.

Loading thumbnail…

Untitled

This example shows a 10-by-10 heatmap of categorical data, where each cell’s fill pattern encodes a numeric value instead of color. Four texture patterns with different circle sizes are mapped to value ranges via a `d3.scaleOrdinal`. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG `<rect>` elements for cells. Data is loaded from a remote CSV file, and textures are generated with the textures.js library.

Loading thumbnail…

stacked bar

This stacked bar chart displays fruit production quantities across multiple years, with each bar segment representing a different fruit type. The visualization uses d3.layout.stack() to compute the stacked layout, d3.scale.ordinal() for the x-axis, and d3.scale.linear() for the y-axis. The bars are rendered as SVG rectangles, while textured patterns from the textures.js library—including lines, circles, crosses, and waves—replace solid colors to distinguish the four fruit categories. Axes are drawn with d3.svg.axis(), and tooltips show segment values on mouse movement.

Loading thumbnail…

Untitled

This example shows the distributions of two variables as overlaid histograms, enabling visual comparison of their frequency shapes. The code uses d3.csv to load a dataset, then d3.histogram with 40 bins to compute counts per range for each variable. Bars are rendered as SVG rectangles with semi-transparent fills, while d3.scaleLinear and d3.axisBottom/axisLeft construct the axes. A handmade legend uses circles and text to distinguish the two series.

Loading thumbnail…

textured area chart

This example visualizes the change in three named groups—Helen, Amanda, and Ashley—over time using a stacked area chart. Instead of solid colors, each group is filled with a distinct SVG pattern texture: hexagons, waves, and squares. The chart is built with D3.js v4 and the `textures` library, which generates the pattern URLs assigned via a color scale. Data is loaded from a CSV, stacked using `d3.stack`, and rendered as SVG paths with `d3.area`. The React framework is noted in the project metadata, though the visible code uses plain JavaScript embedded in HTML.

Loading thumbnail…

Untitled

This example visualizes six French cities on a Mercator map, encoding each location with a circle whose size corresponds to a numeric value and whose fill pattern distinguishes three categorical groups (A, B, C). The map uses `d3.geoMercator` and `d3.geoPath` to project and draw France from a GeoJSON source, while the textures library generates distinct striped patterns via `textures.lines()` for each group. Circles are positioned with the projection, sized via `d3.scaleLinear`, and styled with dashed black strokes and transparent fills to emphasize the pattern overlays.

Loading thumbnail…

map-other-size

This example shows a choropleth map of Palghar district blocks, using texture patterns to encode the percentage of stunted children. A slider filters the displayed range, and hovering over a block reveals its name and value in a tooltip. The visualization merges block-level GeoJSON with CSV data, then renders it using D3’s `geoMercator` projection and `geoPath`. Interactive brushing and zooming are enabled, with textures generated via the `textures` library to differentiate value bands, and transitions animate the fill changes.

Loading thumbnail…

map-other-density

This example displays a choropleth map of eight blocks in Palghar district, India, using SVG paths rendered via `d3.geoPath` with a `geoMercator` projection. The map shows the percentage of stunted children per block, with fill patterns generated using the textures library and a slider to adjust classification thresholds. A tooltip appears on mouseover, and zooming is enabled through `d3.zoom`. Data is loaded from a CSV file and joined to GeoJSON features.

Loading thumbnail…

map-line-size

This example visualizes stunted child percentages across administrative blocks in Palghar, India, using a choropleth map. A slider allows users to adjust the classification range, dynamically recoloring regions with textured diagonal lines of varying stroke widths. The map uses d3.geoMercator and d3.geoPath to project GeoJSON boundaries, while d3.csv-joined data drives the fill logic. Interactive features include zooming via d3.zoom, hover tooltips, and smooth transition animations on slider input. The textures library creates the line patterns, and Bootstrap styles the slider interface.

Loading thumbnail…

stroke dash gap

Five circles of decreasing radius demonstrate how the stroke dash gap scales with size, using line textures as fill patterns. The example uses the textures library’s `textures.lines()` method with varying `size` parameters (from default to 10, 5, 3, and 2) to create vertical line patterns. Each circle is rendered as an SVG element with D3 v5, applying the texture URL via `.style("fill", t.url())` while maintaining a black stroke outline. The visualization highlights how pattern density changes relative to circle dimensions.

Loading thumbnail…

heatmap3

This visualization shows a world map where each country is filled with circular dot patterns of varying density, using the size and spacing of the dots to represent population ranges from the world_population.csv dataset. The geographic boundaries come from a GeoJSON file, rendered as SVG paths via d3.geoPath and the d3.geoMercator projection. A d3.scaleThreshold maps population intervals to pre-defined textures generated by the textures library, specifically textures.circles with different radii. The project uses d3.v4 alongside React, applying the fill attribute to each path based on the matched population bin.

Loading thumbnail…

textured pie chart

This example shows an area chart with three stacked series, where each series is filled with a distinct geometric texture pattern instead of color. The chart plots the number of individuals named Helen, Amanda, and Ashley over time from a CSV dataset. The code uses D3 v4 with `d3.stack`, `d3.area`, and `d3.scaleOrdinal` to build the chart, while the `textures` library generates SVG patterns for circles, lines, and crosses via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The patterns are applied as fill URLs through the ordinal scale, with black strokes separating each area.

Loading thumbnail…

textured area chart

A stacked area chart uses the Textures library to fill each series with a distinct pattern—circles, lines, and crosses—instead of solid colors, applied via `textures.circles()`, `textures.lines()`, and `textures.paths()`. Built with React and D3 v4, it loads CSV data, nests it by year, and stacks three groups using `d3.stack()`. The SVG paths are drawn with `d3.area()`, with each layer’s fill set to the corresponding texture’s URL from a `d3.scaleOrdinal` palette, creating a visually separated multi-series comparison over time.

Loading thumbnail…

line-density

This example creates a bubble chart from a CSV dataset, mapping GDP per capita to the x-axis, life expectancy to the y-axis, and population to bubble radius. A D3 ordinal color scale applies circle-pattern textures from the textures library to the bubbles, with each texture defined via `textures.circles()` and varied sizes. The chart uses D3 v4 with SVG rendering, adding axes and circles through standard `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` calls.

Loading thumbnail…

background color

Five square panels demonstrate background-pattern combinations using the textures library with D3 v5. Each 100×100 SVG rect applies a different circle or cross texture via `textures.circles()` and `textures.paths()`, varying fill, stroke, and background colors. The examples show how transparent, white, black, and stroked textures alter visual contrast.

Loading thumbnail…

heatmap4

This visualization is a choropleth map of world population using a Mercator projection, with each country filled by a line pattern texture instead of color. The texture orientation encodes population ranges, from vertical lines for the lowest values to horizontal for the highest. The map is rendered in SVG, using d3.geoPath with d3.geoMercator for projection, and textures.lines() to generate the patterns. Data comes from a GeoJSON file of world boundaries joined with a CSV of population values.

Loading thumbnail…

heatmap2

This heatmap demonstrates global population distribution using a textured choropleth map. Each country is filled with a circle pattern whose density increases with population size, using six threshold-based visual levels. The visualization employs D3.js v4 with the `d3.geoMercator` projection and `d3.geoPath` to render world GeoJSON boundaries, while the `textures` library generates varying circle sizes for the fills. Population data comes from a CSV file matched to country codes, with color thresholds defined by `d3.scaleThreshold` and ranges from sparse to dense circle patterns.

Loading thumbnail…

heatmap

This heatmap visualizes world population data across countries using a choropleth map. The map renders SVG paths for each country, with fill patterns representing population thresholds. It uses D3.js v4 for data loading and map generation, specifically `d3.geoMercator` for projection and `d3.scaleThreshold` to map population ranges to distinct line-texture patterns from the `textures` library. Country boundaries and population data come from external GeoJSON and CSV files fetched via `d3.queue`.

Loading thumbnail…

stroke dash gap

Five white circles with black outlines demonstrate the visual effect of decreasing stroke-dasharray values, from 30,30 to 1,1, which creates progressively finer dash-and-gap patterns along each circumference. Rendered as static SVG shapes using d3 v5, the example calls d3.select to append circle elements and sets their stroke, stroke-width, and stroke-dasharray attributes directly. The textures library is included but unused in the visible code.

Loading thumbnail…

stroke-dash type

Three SVG path elements demonstrate the visual effect of varied stroke-dasharray values in React. Each horizontal line uses a different dash pattern—uniform segments, a repeating 10,10,5,5,8 sequence, and a longer 20,10,5,5,5,10 cycle—all rendered with black strokes on a white background. The SVG markup defines the paths directly with stroke-dasharray attributes, showcasing how dash spacing and repetition create distinct line textures without additional JavaScript or data.

Loading thumbnail…

stroke-dash gap

This example shows how adjusting the gap value in an SVG stroke-dasharray changes the visual rhythm of a line, progressing from wide, distinct gaps to a nearly solid stroke. Using React for rendering, it draws five horizontal paths within an SVG group, each with a fixed dash length of 5 and gap lengths that shrink from 20 down to 1. The code applies the stroke-dasharray attribute directly to each path element, demonstrating the effect with black strokes on a white background.

Loading thumbnail…

shape

Five squares demonstrate different texture patterns from the `textures` library applied as SVG fills. Each rect uses a distinct generator—circles, vertical lines, transparent circles, hexagons, and crosses—created via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The examples show varied stroke widths, radii, and fill opacity for the texture elements, all rendered on a 960×500 SVG canvas using D3 v5 to append and style the rectangles.

Loading thumbnail…

stroke-width

Five horizontal black lines demonstrate the SVG `stroke-width` property, with widths increasing from 2 to 10 pixels. The paths are drawn inside a `<g>` element with `fill="none"` and `stroke="black"`, using hardcoded `d` coordinates for straight lines. The example uses React for rendering and raw SVG path elements, showing a static comparison of stroke thickness without interactivity.

Loading thumbnail…

stroke-width

This example demonstrates the visual impact of varying stroke widths on a simple pattern. It presents five white squares, each filled with vertical line textures of increasing thickness, from one to nine pixels, while the squares’ own black outlines also grow in width. The visualization is built using D3.js (v5) and the `textures` library, specifically calling `textures.lines().orientation().strokeWidth()` to generate each pattern within an SVG canvas. The code directly manipulates SVG `rect` and texture attributes to create a clear comparative scale.

Loading thumbnail…

line-size

Five squares display vertical line textures with increasing stroke widths, from one to nine pixels, arranged left to right. The example uses the textures library to generate line patterns, applied as SVG fills via `textures.lines()` with the `.orientation()` and `.strokeWidth()` methods. Each rect is drawn with d3.js, assigning the texture URL to its fill style. This demonstrates how texture density and visual weight change with stroke thickness.

Loading thumbnail…

line-size

Five squares display vertical line textures with increasing stroke widths, from one to nine pixels, arranged left to right. The example uses the textures library to generate line patterns, applied as SVG fills via `textures.lines()` with the `.orientation()` and `.strokeWidth()` methods. Each rect is drawn with d3.js, assigning the texture URL to its fill style. This demonstrates how texture density and visual weight change with stroke thickness.

Loading thumbnail…

dot-density

Five square panels each display a distinct dot-density texture, ranging from a sparse chevron pattern to progressively denser grids of circles. The visualization demonstrates how varying dot sizes and spacing create different visual densities and surface textures. It uses the textures library to generate SVG pattern fills, with each rectangle importing a different texture via the `.url()` method. The code calls `textures.paths()` for the chevron design and `textures.circles()` at four different sizes to populate the remaining panels.

Loading thumbnail…

dot-density

Five square SVG rectangles display a graduated sequence of dot-density textures using the textures.js library for D3 v5. Each rectangle uses a `textures.circles()` pattern with progressively smaller circle sizes, from large to tiny dots, and applies the texture via `style("fill", t.url())`. The example demonstrates how varying pattern scale creates visual differentiation across identical shapes.

Loading thumbnail…

textured pie chart

This textured pie chart displays categorical data using SVG paths filled with five distinct pattern-based textures instead of solid colors. The visualization relies on the D3.js v4 library for chart construction and the textures package to generate repeating geometric motifs, including circles, lines, hexagons, and crosses. D3's pie function computes the arc segments from the input data, while `d3.arc` defines the path geometry. Each slice’s fill references a texture URL mapped through `d3.scaleOrdinal`, and the chart is centered within a 450×450 SVG canvas with a black stroke outlining every segment.

Loading thumbnail…

shape

Five squares demonstrate different texture patterns from the `textures` library applied as SVG fills. Each rect uses a distinct generator—circles, vertical lines, transparent circles, hexagons, and crosses—created via `textures.circles()`, `textures.lines()`, and `textures.paths()`. The examples show varied stroke widths, radii, and fill opacity for the texture elements, all rendered on a 960×500 SVG canvas using D3 v5 to append and style the rectangles.

Loading thumbnail…

line-density

Five squares display the same vertical line pattern at five distinct densities, from widely spaced to finely packed lines. D3 selects SVG rectangles and applies line textures generated by the textures.js library, with each texture's spacing controlled by the `.size()` method. Thick black outlines frame each rectangle, isolating the visual effect. The example demonstrates how varying the size parameter alters perceived line density while keeping orientation constant.