After successfully running a simulation, epanet-js offers tools to visualize your results on your map. This allows you to quickly identify trends, understand hydraulic behavior, and pinpoint areas of interest or concern. The Map Tab in the side panel is your control center for these visualizations.

Activating and selecting data for visualization

1. Open the Map Tab: Once your simulation results are ready, navigate to the Map Tab, located in the right-hand side panel of the application.
2. Choose Data to Display: Within the tab, you can select which property you want to visualize for different network elements:
   • For Nodes (Junctions, Reservoirs, Tanks): You can choose to display properties such as Elevation , Pressure, or Head.
   • For Links (Pipes, Pumps, Valves): You can display properties like Flow , Velocity, Unit Headloss, Diameter, or Roughness.
3. Map Update: As soon as you select a property, the map will automatically update. Your network elements (nodes or links, depending on your selection) will be color-coded based on the values of the chosen property. A default legend will also appear in the Map Tab, showing the initial color scheme and data ranges.

Customizing the map visualization

You can customize how your data looks on the map in many different ways to make it easier to see and understand what's important. To access these customization options, click on the Range field. This will open a pop-over that displays controls for adjusting the classification mode, number of classes, and specific break points for that visualization. You can also change the color ramp by clicking on the Ramp field.

Data classification: setting modes and classes

epanet-js organizes the visualization of your results by splitting it into groups and giving each group a different color. You can choose how these groups are created:

• Mode: This dropdown menu lets you select an automatic method for classifying your data:
  • Equal Intervals: This mode divides the full range of your data (from minimum to maximum) into segments of equal size. For example, if your pressures range from 0 to 50 psi and you choose 5 classes, each class would span 10 psi.
  • Equal Quantiles: This mode divides your data so that each class contains an approximately equal number of network elements. This is useful for distributing elements evenly across the color ramp, especially if your data is skewed.
  • Pretty Breaks: This algorithm attempts to create "round" or "pretty" break values that are easy for humans to read (e.g., 10, 20, 30 instead of 11.3, 22.6, 33.9), based on the minimum and maximum values in your data.
  • Natural Breaks: This method uses ckmeans (an improved version of Jenks Natural Breaks) to automatically group similar values together. It looks for big gaps in your data and creates breaks at those points. This makes it easier to see natural patterns in your data by putting similar numbers in the same group and keeping different numbers in separate groups.
  • Manual: If you manually change any break points, the mode will automatically switch to 'Manual', indicating that you have taken full control over the legend's appearance.
• Classes: Pick how many different colors you want to show on your map by using this dropdown menu. You can pick anywhere from 3 to 7 different colors.

Choosing color ramps

The colors you choose will make a big difference in how your map looks. The Ramp selector offers a wide variety of pre-defined color palettes:

• Continuous (sequential) Ramps: These are best suited for ordered data that progresses from low to high values (e.g., pressure, velocity, elevation). They typically use a gradient of a single hue or related hues, often moving from a lighter shade for low data values to a darker shade for high data values. This makes it easy to visually identify the magnitude and progression of the data.

• Diverging Ramps: These are useful when you want to emphasize a critical mid-range value (often represented by a light or neutral color) and highlight values that diverge above and below that point (represented by two contrasting hues that darken towards the extremes). This is effective for showing deviations from an average, a target value, or a zero point.

<aside> <img src="/icons/sync_blue.svg" alt="/icons/sync_blue.svg" width="40px" />

Reverse Colors

You can flip the color scheme by clicking the "Reverse Colors" button. This is helpful when you want to switch how colors represent values (for example, changing from light-to-dark to dark-to-light).

</aside>

Fine-tuning breaks and colors

Below the Mode and Classes you'll find an interactive legend editor that allows for precise control over each class: