Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
SStefan Apostol
Last edited Jan 14, 2023
Created on Jan 14, 2023
Forked from Upload data

This example shows a hand-coded categorical legend made of colored circles and text labels arranged in columns. It lists product categories like Widgets, Hosting, and Analytics, alongside technology categories and generic variable names. The visualization is built with D3.js v4, using basic SVG selection and append methods to manually position each legend item. A second version includes a JavaScript button that serializes the SVG to XML and triggers a download of the rendered chart as an SVG file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

<!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js"></script> <!-- Create a div where the graph will take place --> <div> <svg id="my_dataviz" height=350 width=550></svg> </div> <script>

// select the svg area var svg = d3.select("#my_dataviz")

// Handmade legend svg.append("circle").attr("cx",200).attr("cy",130).attr("r", 6).style("fill", "#6e7aca") svg.append("circle").attr("cx",200).attr("cy",150).attr("r", 6).style("fill", "#5bc344") svg.append("circle").attr("cx",200).attr("cy",170).attr("r", 6).style("fill", "#d64e2b") svg.append("circle").attr("cx",200).attr("cy",190).attr("r", 6).style("fill", "#7a001a") svg.append("circle").attr("cx",200).attr("cy",210).attr("r", 6).style("fill", "#c78a1c") svg.append("circle").attr("cx",200).attr("cy",230).attr("r", 6).style("fill", "#c465d6")

svg.append("text").attr("x", 220).attr("y", 130).text("Widgets").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 150).text("Hosting").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 170).text("Analytics").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 190).text("CMS").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 210).text("Advertising").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 230).text("Shop").style("font-size", "15px").attr("alignment-baseline","middle")

svg.append("circle").attr("cx",320).attr("cy",130).attr("r", 6).style("fill", "#cdd782") svg.append("circle").attr("cx",320).attr("cy",150).attr("r", 6).style("fill", "#ffe93f") svg.append("circle").attr("cx",320).attr("cy",170).attr("r", 6).style("fill", "#00aaab") svg.append("circle").attr("cx",320).attr("cy",190).attr("r", 6).style("fill", "#004c15") svg.append("circle").attr("cx",320).attr("cy",210).attr("r", 6).style("fill", "#9792be") svg.append("circle").attr("cx",320).attr("cy",230).attr("r", 6).style("fill", "#f29e51")

svg.append("text").attr("x", 340).attr("y", 130).text("Javascript").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 150).text("Mx").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 170).text("Media").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 190).text("Payment").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x",340).attr("y", 210).text("Encoding").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 230).text("Shipping").style("font-size", "15px").attr("alignment-baseline","middle")

// 3rd column svg.append("circle").attr("cx",440).attr("cy",130).attr("r", 6).style("fill", "#69b3a2") svg.append("circle").attr("cx",440).attr("cy",150).attr("r", 6).style("fill", "#404080") svg.append("circle").attr("cx",440).attr("cy",170).attr("r", 6).style("fill", "#69b3a2") svg.append("circle").attr("cx",440).attr("cy",190).attr("r", 6).style("fill", "#404080") svg.append("circle").attr("cx",440).attr("cy",210).attr("r", 6).style("fill", "#69b3a2") svg.append("circle").attr("cx",440).attr("cy",230).attr("r", 6).style("fill", "#404080")

svg.append("text").attr("x", 460).attr("y", 130).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 150).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 170).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 190).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x",460).attr("y", 210).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 230).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle")

</script>

MIT Licensed

Similar vizzes

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
80% match
Loading thumbnail…

Untitled

This interactive stacked area chart displays the changing values of multiple categories over time, using the D3.js library (version 2) with SVG rendering and animations. The chart employs a silhouette offset layout to visualize data from a CSV file, with color-coded layers representing different groups. Hovering over a layer highlights it and shows a tooltip with the category name and its specific value, while mouse movement on the chart also triggers a vertical guideline.

LLAOKE1997
79% 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
79% match
Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar
78% match
Loading thumbnail…

Untitled

A static legend template renders five color-coded grade categories—A, B, C, D, and F—as labeled rectangles inside a bordered box. Built with d3.v4, the code appends SVG rectangles and text elements using chained `attr` calls, with fixed coordinates and fill colors (green, steelblue, dark blue, light blue, and red). The example includes two buttons that reference undefined update functions, indicating an intended but unimplemented interactivity; currently, the visualization displays only the legend without any data-driven elements.

KKrishnaVamsi09
78% match
Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

AAndrea Mignone
77% match
Loading thumbnail…

Untitled

A stacked bar chart visualizes the percentage of technology adoption across categories, with each bar color-coded through an ordinal scale and labeled with its exact value. The chart uses d3.csv to load data, then d3.scaleBand and d3.scaleLinear to position and size the rectangles, while d3.scaleOrdinal assigns colors. Labels are added via SVG text elements, all rendered within a fixed-width SVG container.

Hhireign
77% match
Loading thumbnail…

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

SShane Carey
77% match