Custom Ordinal Palette

100%

Custom Ordinal Palette

✓ Published0🌍 Public

Last edited Feb 4, 2016

Created on Feb 4, 2016

This pie chart uses a custom ordinal palette from the HPCC Systems visualization library to assign specific colors to categories. The example creates a palette named “RBI” with four colors, then explicitly maps each country to a color by calling the palette function in order. The Pie chart widget, configured with a paletteID, renders data for England, Wales, Scotland, and Ireland using these defined colors. The code relies on HPCC’s `Pie` and `Palette` APIs for chart creation and color assignment.

AI-generated description

HPCC Palettes

Similar vizzes

Loading thumbnail…

Pie Chart

This example demonstrates a basic pie chart visualization using the `@hpcc-js/chart` library, specifically the `Pie` widget. It displays subject results across five categories—English, Irish, Math, Geography, and Science—with the chart rendering the data as proportional slices. The code instantiates the `Pie` widget, targets the `placeholder` div, and supplies data through the `columns` and `data` methods, which define the spreadsheet-like structure. The visualization is rendered entirely in the browser via `render()`, with styling handled by the included CSS.

GGordonSmith

72% match

Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Ssathishkanna11

69% match

Loading thumbnail…

Pie chart RDW

This example displays a pie chart of yearly values using D3.js, rendering four labeled slices with a categorical color scheme. The visualization is built with the `d3.pie` layout function and `d3.arc` for paths and labels, rendered as SVG. It uses `d3.scaleOrdinal` for colors and `d3.schemeCategory10` for the palette, with data hardcoded in the script. The chart is centered using an SVG group transform, and each slice’s year is placed via the label centroid.

SSergio Eijben

67% match

Loading thumbnail…

Fork of pie chart

This example shows a categorical distribution as a pie chart with a legend. It visualizes five categories with varying values, each slice labeled directly and represented by a distinct color in a separate legend. The chart is built using D3 v6, leveraging `d3.pie` and `d3.arc` generators to compute slice geometry, while `d3.scaleOrdinal` assigns the categorical color scheme. The SVG output is generated from hardcoded data, with the pie centered within a 500-pixel square and a custom-styled HTML legend positioned beside it.

Ssathvik0311@gmail.com

67% match

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the top 10 countries by medal count, with each slice and corresponding legend colored by a manually specified scaleOrdinal range. The code loads CSV data from a GitHub gist via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns colors and the legend is built with appended SVG rectangles and text elements. The total sum of medals is computed but not displayed in the chart itself.

Nnagamaheswar

66% match

Loading thumbnail…

PieChart-D3JS

This pie chart visualizes the proportional distribution of six named categories (A–F) using their corresponding numeric values, with each slice labeled and a color-coded legend displayed below the chart. The visualization is rendered as SVG using D3.js v7, leveraging `d3.pie()` to compute arc angles, `d3.arc()` for path generation, and a `d3.scaleOrdinal` with the `schemeCategory10` color palette. The direct dataset is hardcoded, and slices are drawn via an enter selection appended to a centered group element.

Kkotagirivarshith2411@gmail.com

66% match

Loading thumbnail…

piechart

This pie chart visualizes categorical data loaded from a CSV file, displaying each category as a colored slice with a label and a legend. The code uses D3 v6 API functions including `d3.pie` to compute arc data, `d3.arc` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. It renders as an SVG with a centered group, positioning arc paths and text labels via the `arc.centroid` method, while the legend is built with appended rectangles and text elements.

Rrajeswariamruthabommaraju@my.unt.edu

66% match

Loading thumbnail…

Pie based on color palette

This visualization appears to be a pie chart generated from a CSV of named colors, which it loads asynchronously and parses using D3’s `csv` function. The React app maps each color row to a small square div, using the row’s hexadecimal color value as the background, though the chart layout itself is not yet implemented. The page renders via SVG, though the current code returns only a loading message before mapping data to unstyled divs. The example demonstrates a D3-v7 and React integration, pulling data from a Gist-hosted CSV.

HHgeginat

66% match