Skip to main content
100%

Lichen.js Official Languages in the Americas

✓ Published0🌍 Public
Aandrew-reid
Last edited May 13, 2018
Created on Feb 6, 2018

This map of the Americas colors each country according to its official language(s), using the Lichen.js stripe library to encode multiple languages per country as striped patterns. The visualization uses a transverse Mercator projection to render the continents, with each country filled by a distinct stripe pattern assigned by the `stripeManager`. A legend on the right side lists each language with its corresponding stripe color, making it easy to identify the official languages spoken across the region, including countries with multiple official languages. The map is rendered as SVG and uses D3 v4 with the Lichen.js library for the stripe generation.

AI-generated description

A more formal attempt at a proper d3 utility, lichen.js, for patterning SVG shapes.

The utility and the block are an evolution of this block.

Similar vizzes

Loading thumbnail…

National Official Languages in the Americas 2

A choropleth of the Americas colors each country according to its official languages, using a repeating stripe pattern generated by the d3.patternStripes helper. The map is rendered with SVG paths from GeoJSON, with each nation assigned a distinct stripe direction or color combination from the d3.autoStripes palette. Hovering over a country highlights its borders and reveals the specific official languages in a tooltip.

Aandrew-reid
83% match
Loading thumbnail…

National Official Languages in the Americas

This visualization displays the national official languages of countries in the Americas using an SVG map built with D3 v4. The map renders geographic boundaries from the Americas.json TopoJSON file, with each country filled by a color-coded pattern indicating its official language(s). Patterns are generated using custom d3.patternStripes and d3.patternGetNextClass helper functions, which create SVG stripe patterns with configurable colors, widths, angles, and opacities to distinguish between languages. The use of striped patterns rather than solid fills allows for the representation of multiple official languages per country, with each language assigned a distinct stripe color.

Aandrew-reid
82% match
Loading thumbnail…

Lichen.js Choropleth + Texture / Bivariate Choropleth.

A choropleth map of the United States encodes two variables per state: opioid prescription rates are shown with a purple sequential color scale, while death rates are overlaid with a texture of circles whose density varies across four thresholds. The textures are generated with Lichen.js, which defines SVG patterns with different circle spacings. Two layered path layers—one colored, one textured—are drawn for each state using an Albers USA projection. Opioid prescription and death rate data are joined to GeoJSON features by state ID, producing a bivariate choropleth that visually separates the two measures.

Aandrew-reid
66% match
Loading thumbnail…

Lichen.js Basic Example

This example demonstrates how to create a simple striped pattern using the Lichen.js library and apply it as a fill to an SVG rectangle. The code defines a `ln.stripe()` pattern with alternating crimson, yellow, and steelblue bands of varying widths. It then uses the pattern’s `.use()` method to fill a 960 by 500 SVG rectangle, leveraging D3 v4 to select the SVG element. Lichen.js generates the pattern definition in the SVG's `<defs>` section, and the example shows the basic workflow for creating and applying reusable patterns.

Aandrew-reid
66% match
Loading thumbnail…

Fork of countries

This scatterplot of countries uses urban population as the x-axis and country names as the y-axis, with circles colored by each nation’s official language. Hovering over the color legend filters the displayed points to only those matching that language, dimming non-matching data. The visualization is built with React, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and custom React components for axes, marks, and the interactive legend. Data loads from a CSV via `d3.csv`, and all elements render as SVG inside a single `<svg>` canvas.

Rrushithareddyy
65% match
Loading thumbnail…

CS 360 final project choropleth

This choropleth map displays the most popular languages (l1–l5) per country using October 2022 data, with each country colored by its primary language’s share of page views. Hovering over a country highlights it and reveals the top five language names and their proportional bar lengths in a custom axis. The visualization uses d3.geoPath with a geoEquirectangular projection to render the world map, d3.scaleThreshold and d3.schemeBlues for coloring, and d3.axisTop for the interactive bar chart that appears on hover.

EEmperor-Nathan
65% match
Loading thumbnail…

Fork of Map

This map shows the most spoken language for a selection of countries, with each country colored according to its dominant language and popups revealing total and native speaker counts along with linguistic origin. Built with Leaflet for map rendering and D3.js for loading GeoJSON country boundaries and CSV speaker data, the visualization uses a custom hashing function to assign distinct HSL colors to each language. A legend lists the top ten languages from the data, and the color mapping reveals geographic language clusters across continents.

Ssravya7136@gmail.com
64% match
Loading thumbnail…

Map with Legends !

This map visualizes the economic classification of countries using a color scale, with an interactive legend that displays unique values and their corresponding colors. Built with D3 v5 and rendered as SVG, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from TopoJSON data sourced from World Atlas. The color legend is created via a custom function that binds `d3.scaleOrdinal` with `d3.schemeSpectral`, while zooming is handled by `d3.zoom`.

BBrenda199708
63% match