d2bAxis Configured Demos

# Multi Chart

Here is a live interactive demo of multiple default axis charts without any extra configurations. Simply add another generators object with the desired graph types and respective data to create a new chart. The charts created are displayed in a stack-like manner. For example, the area chart is created first, then the bar/line, and then the bubble pack. This puts the area chart on the first/lower layer, then the bar/line chart is stacked on top, and lastly the bubble pack is stacked of the previous one, making it the last/top layer.

# Annotation

Here is a live interactive demo of the default area axis chart with annotations without any extra configurations. You can annotate different points within the graph by creating an annotation object and setting it to a point object within the values array.

# Axis Config

Here is a live interactive demo of the default area axis chart with basic property configurations. Some of these configurations include axis labels, label orientations, label padding, tick mark sizes, and scaling.

# Area Curve

Here is a live interactive demo of the curved area axis chart without any extra configurations.

# Groups

Here is a live interactive demo of the default area axis and line chart combo with group property configurations. You can assign multiple graphs into one group. Each group will share a color per graph, that way it is easier to see which graphs belong to which group. Additionally, multiple graph types can be included in a chart.

# Horizontal Bar

Here is a live interactive demo of the horizontal bar axis chart. It is similar in concept to the regular bar chart with a change to the orient property from vertical to horizontal.

# Legend

Here is a live interactive demo of the area axis chart combo with legend property configurations. Some of these configurations include legend icon clickability, orientation, and icon symbols.

# Padding

Here is a live interactive demo of the default area axis chart with padding configurations. Some of these configurations include chart padding, plane padding, and margins. These properties makes the charts and graphs easier to look at if the graphs start to look clustered within the chart.

# Scale

Here is a live interactive demo of the default area axis chart with axis scaling configurations. The scaling object is within the x-axis and/or the y-axis object. The type of axis declared will allow for different properties to be used. Certain properties are not interchangeable with all types. Like in the example below, a type:"log" axis is set and this allows the base property to be used. If type:"log" is set and a property from another type is used, for example the exponent property from type:"pow", the graph will not render properly.

# Scatter Varying Sizes

Here is a live interactive demo of the default scatter axis chart with varying point size configurations. The size property inside the generators array is a multiplier for the size of all the points in the graph.

# Stacked Bar Chart

Here is a live interactive demo of the stacked bar chart without any extra configurations.

# Transition

Here is a live interactive demo of the axis chart with a transition configuration. If the button "Change Data!" is clicked, the axis chart will toggle between different data to demonstrate the transition animations. .transition() is used on the chart and chained with the desired .duration(2000) of microseconds.

# Typescript

Here is a live interactive demo of the default area axis chart without any extra configurations using typescript. Typescript ensures proper types and properties are used when creating objects, arrays, etc.

results matching ""

    No results matching ""