Skip to main content
SimilarExport ZIP
100%

Proposed way to set label-sizes for datamapplot with pylabeladjust.

✓ Published0🌍 Public
MMNoichl
Last edited Apr 27, 2024
Created on Apr 27, 2024

This example shows a proposed method for scaling label text size and weight in a datamapplot visualization. It first wraps long labels using `textwrap.fill` for readability, then maps a count column to font sizes between 3 and 28 points using `MinMaxScaler` from scikit-learn, applying a 0.9 power rescaling to compress the range. Additionally, it sets labels to bold when their count exceeds the 80th percentile, using NumPy's `percentile`. The code relies on pandas for DataFrame manipulation and requires a pre-existing data frame with 'label' and 'count' columns.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Label Filtering Algorithm Prototype

This visualization demonstrates a label placement algorithm for maps and scatter plots, showing city names positioned without overlapping. It projects world cities using a Natural Earth projection and renders population density as colored contours. The code uses D3 methods like `geoNaturalEarth1`, `contourDensity`, and `scaleSequential` for the map, while collision detection relies on the RBush spatial index. Labels are filtered by population threshold and hidden when their bounding boxes intersect, with data from the visionscarto-world-atlas and worldcitiesReduced datasets.

GGuo Ci
54% match
Loading thumbnail…

Voronoi Labels

This example demonstrates a technique for labeling points on a map by positioning text labels in the empty spaces between them, using Voronoi diagrams. The visualization computes a Voronoi tessellation of the point locations and then places each label within its corresponding cell, avoiding overlaps. Built with D3.js, it uses `d3.Delaunay` for triangulation, `d3.Voronoi` for the diagram, and a force-directed layout algorithm (`d3.forceSimulation`) to refine label positions. The underlying data comes from a set of U.S. city coordinates, rendered as circles on a projected map.

Mmbostock
53% match
Loading thumbnail…

Label Filtering Algorithm Prototype

This interactive prototype demonstrates a label placement algorithm for maps, rendering a world map with city labels sized by population and color-coded population density contours. The visualization uses D3.js for map projection with `geoNaturalEarth1`, data loading, and zoom interactions, while `rbush` implements spatial indexing to detect overlapping labels. City data comes from a reduced world cities CSV file, and geographical boundaries are drawn from TopoJSON world atlas data. The prototype filters cities by a population threshold and iteratively adjusts label positions to minimize collisions against the computed bounding boxes from SVG text elements.

CCurran Kelleher
52% match
Loading thumbnail…

Label layout example

This example demonstrates how the d3fc-label-layout component places text labels on a scatterplot without overlap, using data from a CSV file that counts GitHub users and organizations per programming language. The code employs a greedy strategy combined with simulated annealing to remove overlapping labels, while each label is rendered as a text element with a circle marker at its data point. The visualization is built with d3 v4, d3fc, and React, and rendered as an SVG chart using d3fc’s Cartesian chart API.

CColinEberhardt
52% match
Loading thumbnail…

Axis Labels

This example demonstrates how to add descriptive labels to both the X and Y axes of a basic scatter plot-like visualization. It uses D3.js to render and position text elements alongside the axis ticks generated with `d3.axisBottom` and `d3.axisLeft`. The code builds a linear scale for each axis, draws a gray inner rectangle as the plotting area, and places the axis labels with configurable offsets using SVG text elements. The visualization accepts parameters for label text, offsets, and margins, making it a reusable template for labeling axes in larger projects.

CCurran Kelleher
51% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for mapping data to visual properties. The color legend uses a `scaleOrdinal` to map categorical names to colors, while the size legend uses a `scaleSqrt` to map numeric values to circle radii with tick marks. Both legends are implemented as reusable functions that append SVG `<g>` elements containing circles and text labels. The code uses D3 v5's selection and merge pattern to efficiently update the legend elements.

Ssteveaigbe
51% match
Loading thumbnail…

Alignment of text labels - 2

This example demonstrates how text labels and axis ticks can smoothly transition to new positions when the underlying scale is rescaled. The visualization shows a set of categories along a point scale, where random data values are generated and the labels animate to their new y-positions while respecting constraints: labels do not overlap vertically, remain within the frame, and shift left or right depending on available space. The code uses D3 v4 with SVG and transitions via `d3.transition()`, updating the axis with `d3.axisLeft` and repositioning label groups using `.attr("transform", ...)`. A toggle button triggers the transition between original and rescaled states.

EEE2dev
51% match
Loading thumbnail…

Overlapping labels - d3fc-label-layout

A scatterplot-style visualization places five Roman emperor labels inside a fixed rectangular bounds, using greedy layout from the d3fc-label-layout library to prevent overlapping labels. Each label measures its text bounding box via SVG `getBBox()` and positions points along a linear scale, with simulated annealing replaced by the greedy strategy for collision avoidance. The code renders SVG rectangles and text through d3 selections, combining d3.v4 scales with d3fc components such as `fc.layoutTextLabel`, `fc.layoutGreedy`, and `fc.layoutLabel` to arrange labels near their assigned y-values.

PPatrick Wojda
51% match