Skip to content

Commit

Permalink
Improvements to chart node in depth doc (#14057)
Browse files Browse the repository at this point in the history
  • Loading branch information
hwahlstrom authored Jun 6, 2023
1 parent 7d3c6f5 commit af4c57c
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,42 @@
## In Depth

Bar Chart creates a chart with vertically oriented bars. You have the option to create a single category or multiple categories by entering a list of string values in the labels input. Each string in the list creates a new category, with its corresponding label.
Bar Chart creates a chart with vertically oriented bars. Bars can be organized under multiple groups and labeled with color coding. You have the option to create a single group by entering a single double value, or multiple groups by entering multiple double values per sublist in the values input. To define categories, insert a list of string values in the labels input. Each value creates a new color-coded category.

To assign a value (height) to each bar, enter a list of lists containing double values in the values input. Each list will determine the number of bars, and which category they belong to, in the same order as the labels input. If you have a single list, only one category will be created.
To assign a value (height) to each bar, enter a list of lists containing double values in the values input. Each sublist will determine the number of bars, and which category they belong to, in the same order as the labels input. If you have a single list of double values, only one category will be created. The number of string values in the labels input must match the number of sublists in the values input.

To assign a color for each category, insert a list of colors in the colors input. When assigning custom colors, the number of colors must match the number of string values in the labels input. If no colors are assigned, random colors will be used.

## Example: Single group

Imagine you want to represent average user ratings for an item over the first three months of the year. To visualize this, you need a list of three string values, labeled January, February, and March.
So, for the labels input, we’ll provide the following list in a Code Block:

[“January”, “February”, “March”];

You can also use String nodes connected to the List Create node to create your list.

Next, in the values input, we’ll enter the average user rating for each of the three months as a list of lists:

[[3.5], [5], [4]];

Note that since we have three labels, we need three sublists.

Now when the graph is run, the bar chart will be created, with each colored bar representing the average customer rating for the month. You can continue using the default colors, or plug in a list of custom colors in the colors input.

## Example: Multiple groups

You can leverage the Bar Chart node’s grouping functionality by entering more values in each sublist in the values input. In this example, let’s create a chart visualizing the number of doors in three variations of three models, Model A, Model B, and Model C.

To do this, we’ll first provide the labels:

[“Model A”, “Model B”, “Model C”];

Next, we’ll provide values, once again making sure that the number of sublists matches the number of labels:

[[17, 9, 13],[12,11,15],[15,8,17]];

Now when you click Run, the Bar Chart node will create a chart with three groups of bars, marked Index 0, 1, and 2, respectively. In this example, consider each index (i.e., group) a design variation. The values in the first group (Index 0) are pulled from the first item in each list in the values input, so the first group contains 17 for Model A, 12 for Model B, and 15 for Model C. The second group (Index 1) uses the second value in each group, and so on.

Categories can be color-coded by entering a list of color values in the colors input. A random color will be assigned to each category if color values are not supplied. The random color will change each time you make a change to the bar chart inputs.
___
## Example File

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
## In Depth

Heat Series Plot creates a chart where data points are represented as rectangles in different colors along a color range. Assign labels for each row and column by entering a list of string labels into the x-labels and y-labels inputs, respectively.
Heat Series Plot creates a chart where data points are represented as rectangles in different colors along a color range.

Determine the number of rectangles in the chart with the values input. In the list of lists containing double values, each list assigns the given number of rectangles column by column, starting from the left, and bottom to top in each column. For example, 4 lists will create 4 columns, and if each list has 5 values, the columns will have 5 rectangles each.
Assign labels for each column and row by entering a list of string labels into the x-labels and y-labels inputs, respectively. The number of x-labels and y-labels doesn't have to match.

Define a value for each rectangle with the values input. The number of sublists must match the number of string values in the x-labels input, as it represents the number of columns. The values inside each sublist represent the number of rectangles in each column. For example, 4 sublists correspond with 4 columns, and if each sublist has 5 values, the columns have 5 rectangles each.

As another example, to create a grid with 5 rows and 5 columns, provide 5 string values in the x-labels input as well as the y-labels input. The x-label values will appear below the chart along the x-axis, and the y-label values will appear to the left of the chart along the y-axis.

In the values input, enter a list of lists, each sublist containing 5 values. Values are plotted column by column from left to right and bottom to top, so the first value in the first sublist is the bottom rectangle in the left column, the second value is the rectangle above that, and so on. Each sublist represents a column in the plot.

You can assign a color range to differentiate the data points by entering a list of color values in the colors input. The lowest value in the chart will be equal to the first color, and the highest value will be equal to the last color, with other values in between along the gradient. If no color range is assigned, the data points will be given a random color from lightest to darkest shade.

For best results, use one or two colors. The example file provides a classic example of two colors, blue and red. When they are used as color inputs, the Heat Series Plot will automatically create a gradient between these colors, with low values represented in shades of blue and high values in shades of red.

You can assign a color range to differentiate the data points by entering a list of color values in the colors input. The lowest value in the chart will be equal to the first color, and the highest value will be equal to the last color, with other values in between along the gradient. If no color range is assigned, the data points will be colored randomly from lightest to darkest shade.
___
## Example File

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@

Pie Chart creates a circular graph divided into segments. You can label, color, and assign values for each segment.

Label the segments by entering a list of string values in the labels input. By default, these labels are Item1, Item2, and Item3.
Label the segments by entering a list of string values in the labels input. By default, these labels are Item1, Item2, and Item3. Labels are shown below the pie chart.

Define values for each segment by inserting a list of double values in the values input. Note that the number of values must be equal to the number of labels set in the labels input. These values can be greater than 100.
Define values for each segment by inserting a list of double values in the values input. Note that the number of values must be equal to the number of labels defined in the labels input. These values can each be greater than 100.

To assign a color for each group, insert a list of colors in the colors input. When assigning custom colors, the number of colors must match the number of string values in the labels input. If no colors are assigned, random colors will be used.

Each segment will have a default color unless you define new colors by inserting a list of colors in the colors input. If no colors are defined, the random colors will change each time you make a change to the pie chart.
___
## Example File

Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
## In Depth

Scatter plot creates a chart with points plotted by their x- and y-values. You can set up labeled and color-coded groups for these points; otherwise, all points will be the same color and have a shared label.
Scatter plot creates a chart with points plotted by their x- and y-values and color-coded based on group.
Label your groups or change the number of groups by inserting a list of string values into the labels input. Each label creates a corresponding color-coded group. If you input only one string value, all points will be the same color and have a shared label.

Rename the default groups or change the number of groups by inserting a list of strings into the labels input.
To determine the placement of each point, use a list of lists containing double values for the x- and y-values inputs. There must be an equal number of values in the x-values and y-values inputs. The number of sublists must also align with the number of string values in the labels input.

To determine the placement of each point, use a list of lists containing double values for the x- and y-values inputs.
To assign a color for each group, insert a list of colors in the colors input. When assigning custom colors, the number of colors must match the number of string values in the labels input. If no colors are assigned, random colors will be used.

To assign a color for each group, insert a list of colors in the colors input. If no colors are assigned, random colors will be used. The random colors will change each time you make a change to the scatter plot.
___
## Example File

Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
## In Depth

XY Line Plot creates a chart with one or more lines plotted by their x- and y-values.
Rename the default lines, or change the number of lines, by entering a list of string labels for each line in the labels input.
XY Line Plot creates a chart with one or more lines plotted by their x- and y-values. Label your lines or change the number of lines by entering a list of string labels in the labels input. Each label creates a new color-coded line. If you input only one string value, only one line will be created.

To determine the placement of each point along each line, use a list of lists containing double values for the x- and y-values inputs.
To determine the placement of each point along each line, use a list of lists containing double values for the x- and y-values inputs. There must be an equal number of values in the x-values and y-values inputs. The number of sublists must also match the number of string values in the labels input.
For example, if you want to create 3 lines, each with 5 points, provide a list with 3 string values in the labels input to name each line, and provide 3 sublists with 5 double values in each for both the x- and y-values.

To assign a color for each line, insert a list of colors in the colors input. When assigning custom colors, the number of colors must match the number of string values in the labels input. If no colors are assigned, random colors will be used.

Each line is colored by default. To assign different colors, insert a list of color values in the colors input.
___
## Example File

Expand Down

0 comments on commit af4c57c

Please sign in to comment.