NAME
HTML::D3 - A simple Perl module for generating charts using D3.js.
VERSION
Version 0.09
SYNOPSIS
use HTML::D3;
my $chart = HTML::D3->new(
width => 1024,
height => 768,
title => 'Sample Bar Chart'
);
my $data = [
['Category 1', 10],
['Category 2', 20],
['Category 3', 30]
];
my $html = $chart->render_bar_chart($data);
print $html;
$chart = HTML::D3->new(title => 'Sales Data');
$data = [
['Product A', 100],
['Product B', 150],
['Product C', 200]
];
$html = $chart->render_line_chart($data);
print $html;DESCRIPTION
HTML::D3 is a Perl module that provides functionality to create simple charts using D3.js. The module generates HTML and JavaScript code to render the chart in a web browser.
METHODS
new
my $chart = HTML::D3->new(%args);Creates a new HTML::D3 object. Accepts the following optional arguments:
width- The width of the chart (default: 800).height- The height of the chart (default: 600).title- The title of the chart (default: 'Chart').
render_bar_chart
my $html = $chart->render_bar_chart($data);Generates HTML and JavaScript code to render a bar chart. Accepts the following arguments:
$data- An array reference containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
render_line_chart
my $html = $chart->render_line_chart($data);Generates HTML and JavaScript code to render a line chart. Accepts the following arguments:
$data- An array reference containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
render_line_chart_with_tooltips
$html = $chart->render_line_chart_with_tooltips($data);Generates HTML and JavaScript code to render a line chart with mouseover tooltips. Accepts the following arguments:
$data- An array reference containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
render_line_chart_snippet
my $fragment = $chart->render_line_chart_snippet($data);
# $fragment->{svg_id} - the id attribute of the <svg> element
# $fragment->{html} - embeddable HTML fragment (style + svg + script)Generates an embeddable HTML fragment for a line chart with mouseover tooltips. Unlike render_line_chart_with_tooltips, this method returns a fragment with no <!DOCTYPE>, <html>, <head>, or <body> wrapper, suitable for splicing directly into a Mojolicious TT (or any other) layout.
The caller is responsible for loading D3 in the page <head>, e.g.:
<script src="https://d3js.org/d3.v7.min.js"></script>Accepts the following arguments:
$data- An array reference of data points. Each point is an array reference with two required elements - the label (string) and the value (numeric) - and an optional third element: a hash reference of extra key/value pairs to display in the tooltip after the label and value rows.[$x, $y] # basic point [$x, $y, \%row] # point with extra tooltip data
Returns a hash reference with:
svg_id- Theidattribute used on the<svg> element.html- The embeddable fragment string.
render_multi_series_line_chart_with_tooltips
$html = $chart->render_multi_series_line_chart_with_tooltips($data);Generates HTML and JavaScript code to render a chart of many lines with mouseover tooltips.
Accepts the following arguments:
$data- An reference to an array of hashes containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
render_multi_series_line_chart_with_animated_tooltips
$html = $chart->render_multi_series_line_chart_with_animated_tooltips($data);Generates HTML and JavaScript code to render a chart of many lines with animated mouseover tooltips.
Accepts the following arguments:
$data- An reference to an array of hashes containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
render_multi_series_line_chart_with_legends
$html = $chart->render_multi_series_line_chart_with_legends($data);Generates HTML and JavaScript code to render a chart of many lines with animated mouseover tooltips.
Accepts the following arguments:
$data- An reference to an array of hashes containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
render_multi_series_line_chart_with_interactive_legends
$html = $chart->render_multi_series_line_chart_with_interactive_legends($data);Generates HTML and JavaScript code to render a chart of many lines with interactive legends to filter, highlight or modify elements based on legend selections.
Accepts the following arguments:
$data- An reference to an array of hashes containing data points. Each data point should be an array reference with two elements: the label (string) and the value (numeric).
Returns a string containing the HTML and JavaScript code for the chart.
SUPPORT
This module is provided as-is without any warranty.
Please report any bugs or feature requests to bug-html-d3 at rt.cpan.org, or through the web interface at http://rt.cpan.org/NoAuth/ReportBug.html?Queue=HTML-D3. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.
You can find documentation for this module with the perldoc command.
perldoc HTML::D3You can also look for information at:
BUGS
It would help to have the render routine to return the head and body components separately.
SEE ALSO
AUTHOR
Nigel Horne <njh@nigelhorne.com>
LICENSE AND COPYRIGHT
Copyright 2025-2026 Nigel Horne.
Usage is subject to the GPL2 licence terms. If you use it, please let me know.