118 lines
2.5 KiB
CSS
118 lines
2.5 KiB
CSS
/*
|
|
visualization_styles.css - CSS file for styling visualizations of feature importance and model predictions.
|
|
|
|
This file provides the styling for visualizations generated by the model-explainability-tool plugin.
|
|
It includes styles for feature importance charts, prediction breakdowns, and other interpretability
|
|
visualizations.
|
|
|
|
Feel free to customize these styles to match your application's design.
|
|
|
|
Table of Contents:
|
|
1. General Styles
|
|
2. Feature Importance Chart Styles
|
|
3. Prediction Breakdown Styles
|
|
4. [Add more sections as needed]
|
|
*/
|
|
|
|
/* 1. General Styles */
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.visualization-container {
|
|
margin: 20px;
|
|
padding: 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.visualization-title {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.visualization-description {
|
|
font-size: 1em;
|
|
color: #555;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 2. Feature Importance Chart Styles */
|
|
|
|
.feature-importance-chart {
|
|
/* Styles for the chart container */
|
|
width: 100%;
|
|
height: 400px; /* Adjust as needed */
|
|
}
|
|
|
|
.feature-importance-bar {
|
|
/* Styles for individual bars in the chart */
|
|
background-color: #4CAF50; /* Green */
|
|
color: white;
|
|
padding: 5px;
|
|
margin-bottom: 2px;
|
|
text-align: right;
|
|
}
|
|
|
|
.feature-name {
|
|
/* Styles for feature names displayed in the chart */
|
|
float: left;
|
|
}
|
|
|
|
.feature-importance-value {
|
|
/* Styles for feature importance values */
|
|
float: right;
|
|
}
|
|
|
|
/* 3. Prediction Breakdown Styles */
|
|
|
|
.prediction-breakdown {
|
|
/* Styles for the overall prediction breakdown container */
|
|
}
|
|
|
|
.prediction-breakdown-item {
|
|
/* Styles for individual items in the breakdown */
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.prediction-breakdown-label {
|
|
/* Styles for labels in the breakdown */
|
|
font-weight: bold;
|
|
}
|
|
|
|
.prediction-breakdown-value {
|
|
/* Styles for values in the breakdown */
|
|
color: #007bff; /* Blue */
|
|
}
|
|
|
|
/* 4. [Add more sections as needed. Example: Styles for specific model types] */
|
|
/* Example: Styles for tree-based models */
|
|
|
|
.tree-node {
|
|
/* Styles for nodes in a decision tree visualization */
|
|
border: 1px solid #ddd;
|
|
padding: 5px;
|
|
margin: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Placeholders for future customization */
|
|
|
|
/* Example: Add styles for different color palettes */
|
|
/* .color-palette-1 { ... } */
|
|
|
|
/* Add responsive styles for different screen sizes */
|
|
@media (max-width: 768px) {
|
|
.visualization-container {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.feature-importance-chart {
|
|
height: 300px; /* Adjust height for smaller screens */
|
|
}
|
|
} |