Skip to main content
SimilarExport ZIP
100%

Displaying a Title, Subtitle and Legend on an SVG Visualisation

✓ Published0🌍 Public
GGavin Sykes
Last edited Mar 22, 2021
Created on Apr 1, 2020
Forked from HTML Starter

This example demonstrates how to display a title, subtitle, and legend within an SVG visualization built with the `svgchrt` library and React. It uses a bar-chart-style layout to show the number of speakers (in millions) for various world languages, with data sourced from Vistawide. The code filters the dataset to a subset of languages, sorts them, and configures the legend with custom icons and positioning. It also includes a night-mode toggle that adjusts the color scheme based on the time of day.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Data for the number of speakers of each language taken from Vistawide

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG fundamental

This example demonstrates fundamental SVG rendering in React, showing a bar chart with green rectangles of varying heights and a detailed axis with tick marks. The visualization uses raw SVG elements including `rect` for the bars and repeated `line` elements for the axis ticks, all defined directly in JSX within the HTML structure. The chart displays four data bars arranged horizontally on a white background within a 1280x832 viewBox, with the tallest bar on the right and progressively shorter bars moving left. The rendering relies entirely on static SVG markup without any JavaScript libraries or data processing.

Rrwata97
74% match
Loading thumbnail…

svg2

This example demonstrates a static bar chart rendered as inline SVG within an HTML page, using React conventions but no external libraries. It shows six rounded bars in descending height, with CSS classes controlling fill color, opacity, and paint-order, while inline styles override class rules for the background rectangle. The chart includes labeled categories A through F using SVG text elements. The page also displays two HTML divs with text, and loads the Atkinson Hyperlegible font from Google Fonts, with CSS controlling layout and typography throughout.

Ppoppy
74% match
Loading thumbnail…

Sample SVG

This example demonstrates basic data visualization concepts in React using SVG and D3.js. It shows a simple bar chart with gray rectangles representing categorical data, accompanied by a handwritten-style label reading "Something vs Something." The code includes several JavaScript lessons, such as creating arrays of objects with x and y coordinates, using scale.linear() for data-to-pixel mapping, and logging values to the console. The visualization itself is static, constructed directly with SVG elements rather than generated dynamically from data. The page also references a local data.csv file but does not render its contents.

Llouislomax
73% match
Loading thumbnail…

Untitled

This example demonstrates how to build a legend for bubble charts using SVG circles, dashed connector lines, and text labels. It shows three reference sizes (10, 50, and 100) positioned on a static canvas, with each label displaying placeholder text. The code uses d3.scaleSqrt() to map data values to pixel radii, then appends the legend elements via d3.selectAll().enter().append() in d3.v4. All rendering is done in a React-compatible HTML page, with the SVG object placed directly in the DOM.

SStefan Apostol
72% match
Loading thumbnail…

Colour and size legends

This example demonstrates two custom SVG legends built with D3 v5 and React, rendered on a single 960x500 pixel canvas. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to encode numeric tick values as proportional circle radii. Both legends are generated through reusable functions that manipulate SVG groups, circles, and text elements, with spacing controlled via `transform` translations and dynamic text offsets. The visualization illustrates how to compose and position independent legend components side by side within a single SVG container.

Eevapavlinek
72% match
Loading thumbnail…

Making Bar Chart with SVG!

This example demonstrates a minimal HTML page that renders a static bar chart using SVG, displaying a simple "Hello HTML!" message as the chart title. The code relies on plain CSS for text styling and JavaScript for the initial setup, though no actual data or dynamic visualization logic is implemented yet. It serves as a starting point for building interactive charts with React and D3, referencing a separate React Starter template. The rendering approach uses basic HTML elements within a styled `<div>` rather than SVG tags, with the title styled at a large font size for emphasis.

AAndrew-Kiwa
72% match
Loading thumbnail…

Untitled

This example presents an interactive bar chart visualization built with D3 v2 and React, rendering as an SVG with animated transitions. It displays categorical data along the x-axis with corresponding numeric values on the y-axis, using a drop-shadow filter effect on the bars. The chart dynamically rescales its ordinal and linear scales based on the input data, with axis tick labels drawn from a caption mapping. The code leverages jQuery for DOM manipulation, D3’s `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` APIs, and applies a custom SVG filter for visual styling.

Ssitaramchallapalli
71% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and text elements as a static bar chart-like visualization. The code uses the raw SVG API with `circle`, `rect`, and `text` tags to render four labeled rectangles of decreasing widths. The JavaScript-free page relies on hardcoded pixel coordinates and fill colors with no data binding or interaction. It serves as a minimal introduction to SVG’s coordinate system and shape primitives within a React-free HTML context.

KKaan
71% match