Pseudo viz for symbol filled in blocks

100%

Pseudo viz for symbol filled in blocks

✓ Published0🌍 Public

Last edited Feb 6, 2023

Created on Feb 6, 2023

This visualization uses filled SVG symbols to represent employment data across three categories. Red rectangles mark unemployment, blue marks non-agriculture employment, and green marks agriculture, with each symbol standing for 5,000 people. The code employs d3.symbol with d3.symbolsFill to generate the symbols, d3.range for population distribution, and d3.select with .join to create the rectangles and symbols. The layout uses window.innerWidth and innerHeight to size the SVG dynamically.

AI-generated description

Pseudo viz for the employment data. Each symbol represent 5000 people. Symbols inside 1.the red rectangle are unemployment 2.the blue rectangle are non-agriculture 3.the green rectangle are agriculture

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows the duration of unemployment by industry, plotting each industry on a vertical scale against the number of months on a horizontal axis. Circles represent individual data points from a CSV file, with all circles uniformly filled in steelblue via CSS. The visualization uses d3.scaleLinear and d3.scalePoint for positioning, while d3.axisLeft and d3.axisBottom generate the axes with gridlines. SVG rendering is handled through D3 selections, and the chart includes a title and axis label.

KKateryna

72% match

Loading thumbnail…

assign 2.8: tree

This visualization displays a hierarchical tree of employment sector categories, including government, private sector, and stock market nodes with subcategories like supply-demand and laborer. The code uses d3.tree and d3.hierarchy to compute the layout, then renders the structure as SVG text elements connected by d3.linkHorizontal paths. The dataset comes from data.json, and the visualization includes zoom functionality via d3.zoom. Nodes are de-duplicated and repositioned using underscore.js utilities, with the last root-level branch highlighted in steel blue. Transitions animate node movement using d3 transitions.

Ppjdhungana@gmail.com

68% match

Loading thumbnail…

Fork of Shapes with SVG

This visualization displays population data for 14 countries using horizontal bars rendered as SVG rectangles. The code loads data from a CSV file and multiplies the population values by 1000. It uses d3.scaleLinear for the x-axis scale and d3.scaleBand for the y-axis, though the bar heights are fixed at 300 pixels and the y-scale is not applied to the rectangles. The example demonstrates basic data loading with d3.csv, scaling, and SVG element creation.

Aabhimanyu-dhar

68% match

Loading thumbnail…

Hello D3 Version 6

The visualization displays a box-and-whisker style summary of country populations, with a horizontal box, line, and scatter of circles, plus a red triangle marker at the median. It uses D3 v6 modules including `select`, `csv`, `scaleLinear`, `scaleBand`, `min`, `max`, and `d3.quantile` to compute quartiles from CSV data. The SVG rendering draws rectangles, lines, circles, and a symbol path via `d3.symbolTriangle`, with axes commented out, focusing on statistical distribution rather than individual bars.

Ppodduturipr

68% match

Loading thumbnail…

Visu_Part3

This visualization shows unemployment rates across French regions from 2013 to 2017 as animated multi-line charts. Users can toggle between viewing all regions at once or selecting individual regions via radio buttons and legend clicks. The D3 v4 code loads CSV data, nests values by region, and draws SVG paths using `d3.line` with color-coded strokes. Legend text elements respond to clicks to toggle line opacity, while animated transitions update the display based on user selection.

AAminaSGitHub

67% match

Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Hharika-1929

67% match

Loading thumbnail…

Symbol Map

A symbol map displays the population of each U.S. state as a circle centered on the state’s centroid, with circle area proportional to population via a square-root scale. The visualization overlays these circles on a gray state map rendered with `d3.geo.path`, using TopoJSON for state boundaries and GeoJSON for state centroids. The code loads both datasets with the queue library, sorts states by population, and draws each symbol as an SVG path with a white stroke and semi-transparent steelblue fill.

Mmbostock

67% match

Loading thumbnail…

Viz Test

This example renders a static SVG visualization of a blue circle centered on a 600x400 canvas, with a hardcoded dataset of five countries and their GDP values prepared for display using D3’s `scaleOrdinal` and `schemeDark2` color scale. The code uses `d3.select` to append the circle and defines the data array, though no bar chart or other shapes are actually drawn from the dataset. The page loads D3 v6 via a CDN, and the SVG is styled with basic attributes like `stroke` and `fill`.

RRan Guin

67% match