Skip to content

Plots Improvements - A continuation of #966 #1245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Jun 18, 2025

Conversation

somiaj
Copy link
Contributor

@somiaj somiaj commented Jun 12, 2025

This is the new branch of improvements to the new Plots library after my accidental merge of #966.

@somiaj
Copy link
Contributor Author

somiaj commented Jun 12, 2025

Working on the colors, I think the issue @drgrice1 pointed out was due to contrast, and I do agree that the green doesn't look as good. I took the colors from the W3school color wheel and wanted something that wasn't as stark as just #00ff00. https://www.w3schools.com/colors/colors_wheels.asp

I liked the looks of the RYB color wheel, so I went with that, but I didn't pay close enough attention and noticed that the wheel they draw and the color codes they give do not match, and agree that green is the worst looking. Maybe I'll just grab the colors from the wheel directly. Here is a test problem.

DOCUMENT();
loadMacros('PGstandard.pl', 'PGML.pl', 'plots.pl',);

$plot = Plot(xvisible => 0, yvisible => 0);
$plot->add_dataset(
    [ -4, 1 ], [ -2, 1 ], [ -2, 3 ], [ -4, 3 ], [ -4, 1 ],
    width      => 5,
    color      => 'red',
    fill       => 'self',
    fill_color => 'red',
);
$plot->add_dataset(
    [ -1, 1 ], [ 1, 1 ], [ 1, 3 ], [ -1, 3 ], [ -1, 1 ],
    width      => 5,
    color      => 'yellow',
    fill       => 'self',
    fill_color => 'yellow',
);
$plot->add_dataset(
    [ 2, 1 ], [ 4, 1 ], [ 4, 3 ], [ 2, 3 ], [ 2, 1 ],
    width      => 5,
    color      => 'blue',
    fill       => 'self',
    fill_color => 'blue',
);
$plot->add_dataset(
    [ -4, -1 ], [ -2, -1 ], [ -2, -3 ], [ -4, -3 ], [ -4, -1 ],
    width      => 5,
    color      => 'orange',
    fill       => 'self',
    fill_color => 'orange',
);
$plot->add_dataset(
    [ -1, -1 ], [ 1, -1 ], [ 1, -3 ], [ -1, -3 ], [ -1, -1 ],
    width      => 5,
    color      => 'green',
    fill       => 'self',
    fill_color => 'green',
);
$plot->add_dataset(
    [ 2, -1 ], [ 4, -1 ], [ 4, -3 ], [ 2, -3 ], [ 2, -1 ],
    width      => 5,
    color      => 'purple',
    fill       => 'self',
    fill_color => 'purple',
);

for ('Tikz', 'JSXGraph') {
    $plot->image_type($_);
    $image{$_} = image($plot);
}

BEGIN_PGML
**Tikz Image:**

[$image{Tikz}]*

**JSXGraph Image:**

[$image{JSXGraph}]*

END_PGML
ENDDOCUMENT();

The green by itself without contrasting with blue doesn't look as bad, but I'll update to the colors shown in the wheel vs the color codes given (unless someone knows some decent color codes for a base pallet, I just thought the RGB codes were a bit much which was why I wanted to change them).

myscrot

And here is what the colors look like if I grab the color codes from the color wheel W3 has vs use the codes they provide.

myscrot

To me I like the red/blue/purple from the first, and the yellow/green/orange from the second image.

@somiaj
Copy link
Contributor Author

somiaj commented Jun 12, 2025

I think I tracked down my initial dislike, seems svg defines #00ff00 as lime green, and that didn't look green to me, just updating green to be #008000 made a lot of difference to me. So here is the primary and secondary colors as defined by svg.

colors

@somiaj somiaj force-pushed the plots-improvements branch 3 times, most recently from 42fd949 to 5465185 Compare June 12, 2025 17:14
@somiaj
Copy link
Contributor Author

somiaj commented Jun 12, 2025

Here are the colors I went with, let me know if you would prefer any changes.

colors

@somiaj
Copy link
Contributor Author

somiaj commented Jun 12, 2025

I have updated the examples for those who want to testing things, I have removed GD from all my test examples, as it has falling behind, and the focus now is JSXGraph for HTML and Tikz for hardcopy.

Plots_examples.tar.gz

@drgrice1
Copy link
Member

Those colors look better.

@somiaj
Copy link
Contributor Author

somiaj commented Jun 13, 2025

Here is a problem to see/test the line style changes.

DOCUMENT();
loadMacros('PGstandard.pl', 'PGML.pl', 'plots.pl',);

$plot = Plot(xvisible => 0, yvisible => 0);

@linestyles = (
    'solid',        'dashed',
    'short dashes', 'long dashes',
    'dotted',       'long medium dashes',
    'bad line style',
);
for my $i (0 .. 6) {
    $plot->add_dataset(
        [ -4, $i - 3 ], [ 4, $i - 3 ],
        linestyle  => $linestyles[$i],
        start_mark => 'arrow',
        end_mark   => 'arrow',
    );
}

for ('Tikz', 'JSXGraph') {
    $plot->image_type($_);
    $image{$_} = image($plot);
}

BEGIN_PGML
**Tikz Image:**

[$image{Tikz}]*

**JSXGraph Image:**

[$image{JSXGraph}]*
END_PGML
ENDDOCUMENT();

@somiaj somiaj force-pushed the plots-improvements branch from 63f7eee to 607145a Compare June 13, 2025 00:19
@somiaj
Copy link
Contributor Author

somiaj commented Jun 13, 2025

Updated examples:

Plots_examples.tar.gz

@somiaj somiaj force-pushed the plots-improvements branch 3 times, most recently from e298619 to ce29e60 Compare June 13, 2025 05:29
@dlglin dlglin changed the title Plots Improvements - A continutation of #966 Plots Improvements - A continuation of #966 Jun 17, 2025
@somiaj somiaj force-pushed the plots-improvements branch 2 times, most recently from 2c18d4f to 2bb1f39 Compare June 18, 2025 15:41
@@ -106,6 +106,13 @@ =head2 PLOT FUNCTIONS
# Add a parametric circle of radius 5 to the plot.
$plot->add_function(['5cos(t)', '5sin(t)'], 't', 0, 2*pi);

Polar functions can be graphed using the C<< polar => 1 >> option with a single variable
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Up on line 31, you have an example with title, which I think the functionality has been removed.

drgrice1 and others added 12 commits June 18, 2025 15:09
There were two connected problems.  First, I was not checking the
correct container div size in the "drawPromise" for the dialog version
of the graph. I was always checking the div for the main JSXGraph image
in the page.  Although, that doesn't entirely matter since the real
problem was that the imageview JSXGraph div did not have its size set on
initialization (which I do in all of the other places where I do this
sort of thing with JSXGraph).
The W3 RYB colors didn't look right, reverting but changing
green to be the SVG/HTML definition `#008000` which looks better
to me than `#00ff00`, which SVG calls lime green. Also adding
the secondary RGB colors `cyan` and `magenta`, but keeping the
RYB secondary colors orange and purple. Add `grey` as an alternative
spelling for `gray` as well.
* Only show minor grid lines if major grid lines are shown.
* Fix issue with Tikz not hiding tick marks correctly with
  show_ticks set to zero for the appropriate axes.
* Make it so axes will adjust their size to the current view
  when `jsx_navigation` is enabled.
* Fixed a bug with JSXGraph not changing the min/max bounds
  of a function to a number from a string, such '2pi'.
Update the line style options and adjust how the line style is
applied to make the Tikz lines look like the line styles defined
by JSXGraph. The line styles are now 'solid', 'dashed', 'dotted',
'short dashes', 'long dashes', 'long medium dashes', or 'none'.

Also fixed an issue where functions must generate data points
for JSXGraph if the markers are to be drawn.
A new method to add arcs defined by three points.

    $plot->add_arc([$x1, $y1], [$x2, $y2], [$x3, $y3], %options);

In the process reduce some code duplication, by creating a single
get_options method for JSXGraph options as the code for that had
been duplicated a few times, also try to minimize having to test
and fall back to default values when a data style is not defined.
This matches the setting used in Tikz and JSXGraph and gives more
control over the rotation of the label.
This adds an option add_multipath to Plots that allows defining
a single curve by using multiple parametric pieces. The primary use
of this is to be able to create a closed region so it can be filled
by defining all the boundaries parametrically.
somiaj added 8 commits June 18, 2025 15:09
* Remove the grid_style option.
* Make JSXGraph honor the grid_color/grid_alpha settings.
Also move ariaDescription to the Plots::Axes object to be
consistent with where the ariaLabel is stored.
Height is undefined, and will be set equal to the width when
the image is drawn unless the 'aspect_ratio' axes style is set.
If this style is set, the height is computed to the desired
aspect ratio based on the axes bounding box.

If the height is manually set, use that instead of computing it.
@somiaj somiaj force-pushed the plots-improvements branch 2 times, most recently from 7a541cc to cfba117 Compare June 18, 2025 21:32
@pstaabp pstaabp merged commit b35f650 into openwebwork:PG-2.20 Jun 18, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants