feat: add Sprint 5 visualization components and Toronto dashboard
- Add figure factories: choropleth, time_series, summary_cards - Add shared components: map_controls, time_slider, metric_card - Create Toronto dashboard page with KPI cards, choropleth maps, and time series - Add dashboard callbacks for interactivity - Placeholder data for demonstration until QGIS boundaries are complete Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
12
portfolio_app/figures/__init__.py
Normal file
12
portfolio_app/figures/__init__.py
Normal file
@@ -0,0 +1,12 @@
|
||||
"""Plotly figure factories for data visualization."""
|
||||
|
||||
from .choropleth import create_choropleth_figure
|
||||
from .summary_cards import create_metric_card_figure
|
||||
from .time_series import create_price_time_series, create_volume_time_series
|
||||
|
||||
__all__ = [
|
||||
"create_choropleth_figure",
|
||||
"create_price_time_series",
|
||||
"create_volume_time_series",
|
||||
"create_metric_card_figure",
|
||||
]
|
||||
152
portfolio_app/figures/choropleth.py
Normal file
152
portfolio_app/figures/choropleth.py
Normal file
@@ -0,0 +1,152 @@
|
||||
"""Choropleth map figure factory for Toronto housing data."""
|
||||
|
||||
from typing import Any
|
||||
|
||||
import plotly.express as px
|
||||
import plotly.graph_objects as go
|
||||
|
||||
|
||||
def create_choropleth_figure(
|
||||
geojson: dict[str, Any] | None,
|
||||
data: list[dict[str, Any]],
|
||||
location_key: str,
|
||||
color_column: str,
|
||||
hover_data: list[str] | None = None,
|
||||
color_scale: str = "Blues",
|
||||
title: str | None = None,
|
||||
map_style: str = "carto-positron",
|
||||
center: dict[str, float] | None = None,
|
||||
zoom: float = 9.5,
|
||||
) -> go.Figure:
|
||||
"""Create a choropleth map figure.
|
||||
|
||||
Args:
|
||||
geojson: GeoJSON FeatureCollection for boundaries.
|
||||
data: List of data records with location keys and values.
|
||||
location_key: Column name for location identifier.
|
||||
color_column: Column name for color values.
|
||||
hover_data: Additional columns to show on hover.
|
||||
color_scale: Plotly color scale name.
|
||||
title: Optional chart title.
|
||||
map_style: Mapbox style (carto-positron, open-street-map, etc.).
|
||||
center: Map center coordinates {"lat": float, "lon": float}.
|
||||
zoom: Initial zoom level.
|
||||
|
||||
Returns:
|
||||
Plotly Figure object.
|
||||
"""
|
||||
# Default center to Toronto
|
||||
if center is None:
|
||||
center = {"lat": 43.7, "lon": -79.4}
|
||||
|
||||
# If no geojson provided, create a placeholder map
|
||||
if geojson is None or not data:
|
||||
fig = go.Figure(go.Scattermapbox())
|
||||
fig.update_layout(
|
||||
mapbox={
|
||||
"style": map_style,
|
||||
"center": center,
|
||||
"zoom": zoom,
|
||||
},
|
||||
margin={"l": 0, "r": 0, "t": 40, "b": 0},
|
||||
title=title or "Toronto Housing Map",
|
||||
height=500,
|
||||
)
|
||||
fig.add_annotation(
|
||||
text="No geometry data available. Complete QGIS digitization to enable map.",
|
||||
xref="paper",
|
||||
yref="paper",
|
||||
x=0.5,
|
||||
y=0.5,
|
||||
showarrow=False,
|
||||
font={"size": 14, "color": "gray"},
|
||||
)
|
||||
return fig
|
||||
|
||||
# Create choropleth with data
|
||||
import pandas as pd
|
||||
|
||||
df = pd.DataFrame(data)
|
||||
|
||||
fig = px.choropleth_mapbox(
|
||||
df,
|
||||
geojson=geojson,
|
||||
locations=location_key,
|
||||
featureidkey=f"properties.{location_key}",
|
||||
color=color_column,
|
||||
color_continuous_scale=color_scale,
|
||||
hover_data=hover_data,
|
||||
mapbox_style=map_style,
|
||||
center=center,
|
||||
zoom=zoom,
|
||||
opacity=0.7,
|
||||
)
|
||||
|
||||
fig.update_layout(
|
||||
margin={"l": 0, "r": 0, "t": 40, "b": 0},
|
||||
title=title,
|
||||
height=500,
|
||||
coloraxis_colorbar={
|
||||
"title": color_column.replace("_", " ").title(),
|
||||
"thickness": 15,
|
||||
"len": 0.7,
|
||||
},
|
||||
)
|
||||
|
||||
return fig
|
||||
|
||||
|
||||
def create_district_map(
|
||||
districts_geojson: dict[str, Any] | None,
|
||||
purchase_data: list[dict[str, Any]],
|
||||
metric: str = "avg_price",
|
||||
) -> go.Figure:
|
||||
"""Create choropleth map for TRREB districts.
|
||||
|
||||
Args:
|
||||
districts_geojson: GeoJSON for TRREB district boundaries.
|
||||
purchase_data: Purchase statistics by district.
|
||||
metric: Metric to display (avg_price, sales_count, etc.).
|
||||
|
||||
Returns:
|
||||
Plotly Figure object.
|
||||
"""
|
||||
hover_columns = ["district_name", "sales_count", "avg_price", "median_price"]
|
||||
|
||||
return create_choropleth_figure(
|
||||
geojson=districts_geojson,
|
||||
data=purchase_data,
|
||||
location_key="district_code",
|
||||
color_column=metric,
|
||||
hover_data=[c for c in hover_columns if c != metric],
|
||||
color_scale="Blues" if "price" in metric else "Greens",
|
||||
title="Toronto Purchase Market by District",
|
||||
)
|
||||
|
||||
|
||||
def create_zone_map(
|
||||
zones_geojson: dict[str, Any] | None,
|
||||
rental_data: list[dict[str, Any]],
|
||||
metric: str = "avg_rent",
|
||||
) -> go.Figure:
|
||||
"""Create choropleth map for CMHC zones.
|
||||
|
||||
Args:
|
||||
zones_geojson: GeoJSON for CMHC zone boundaries.
|
||||
rental_data: Rental statistics by zone.
|
||||
metric: Metric to display (avg_rent, vacancy_rate, etc.).
|
||||
|
||||
Returns:
|
||||
Plotly Figure object.
|
||||
"""
|
||||
hover_columns = ["zone_name", "avg_rent", "vacancy_rate", "rental_universe"]
|
||||
|
||||
return create_choropleth_figure(
|
||||
geojson=zones_geojson,
|
||||
data=rental_data,
|
||||
location_key="zone_code",
|
||||
color_column=metric,
|
||||
hover_data=[c for c in hover_columns if c != metric],
|
||||
color_scale="Oranges" if "rent" in metric else "Purples",
|
||||
title="Toronto Rental Market by Zone",
|
||||
)
|
||||
106
portfolio_app/figures/summary_cards.py
Normal file
106
portfolio_app/figures/summary_cards.py
Normal file
@@ -0,0 +1,106 @@
|
||||
"""Summary card figure factories for KPI display."""
|
||||
|
||||
from typing import Any
|
||||
|
||||
import plotly.graph_objects as go
|
||||
|
||||
|
||||
def create_metric_card_figure(
|
||||
value: float | int | str,
|
||||
title: str,
|
||||
delta: float | None = None,
|
||||
delta_suffix: str = "%",
|
||||
prefix: str = "",
|
||||
suffix: str = "",
|
||||
format_spec: str = ",.0f",
|
||||
positive_is_good: bool = True,
|
||||
) -> go.Figure:
|
||||
"""Create a KPI indicator figure.
|
||||
|
||||
Args:
|
||||
value: The main metric value.
|
||||
title: Card title.
|
||||
delta: Optional change value (for delta indicator).
|
||||
delta_suffix: Suffix for delta value (e.g., '%').
|
||||
prefix: Prefix for main value (e.g., '$').
|
||||
suffix: Suffix for main value.
|
||||
format_spec: Python format specification for the value.
|
||||
positive_is_good: Whether positive delta is good (green) or bad (red).
|
||||
|
||||
Returns:
|
||||
Plotly Figure object.
|
||||
"""
|
||||
# Determine numeric value for indicator
|
||||
if isinstance(value, int | float):
|
||||
number_value: float | None = float(value)
|
||||
else:
|
||||
number_value = None
|
||||
|
||||
fig = go.Figure()
|
||||
|
||||
# Add indicator trace
|
||||
indicator_config: dict[str, Any] = {
|
||||
"mode": "number",
|
||||
"value": number_value if number_value is not None else 0,
|
||||
"title": {"text": title, "font": {"size": 14}},
|
||||
"number": {
|
||||
"font": {"size": 32},
|
||||
"prefix": prefix,
|
||||
"suffix": suffix,
|
||||
"valueformat": format_spec,
|
||||
},
|
||||
}
|
||||
|
||||
# Add delta if provided
|
||||
if delta is not None:
|
||||
indicator_config["mode"] = "number+delta"
|
||||
indicator_config["delta"] = {
|
||||
"reference": number_value - delta if number_value else 0,
|
||||
"relative": False,
|
||||
"valueformat": ".1f",
|
||||
"suffix": delta_suffix,
|
||||
"increasing": {"color": "green" if positive_is_good else "red"},
|
||||
"decreasing": {"color": "red" if positive_is_good else "green"},
|
||||
}
|
||||
|
||||
fig.add_trace(go.Indicator(**indicator_config))
|
||||
|
||||
fig.update_layout(
|
||||
height=120,
|
||||
margin={"l": 20, "r": 20, "t": 40, "b": 20},
|
||||
paper_bgcolor="rgba(0,0,0,0)",
|
||||
font={"family": "Inter, sans-serif"},
|
||||
)
|
||||
|
||||
return fig
|
||||
|
||||
|
||||
def create_summary_metrics(
|
||||
metrics: dict[str, dict[str, Any]],
|
||||
) -> list[go.Figure]:
|
||||
"""Create multiple metric card figures.
|
||||
|
||||
Args:
|
||||
metrics: Dictionary of metric configurations.
|
||||
Key: metric name
|
||||
Value: dict with 'value', 'title', 'delta' (optional), etc.
|
||||
|
||||
Returns:
|
||||
List of Plotly Figure objects.
|
||||
"""
|
||||
figures = []
|
||||
|
||||
for metric_config in metrics.values():
|
||||
fig = create_metric_card_figure(
|
||||
value=metric_config.get("value", 0),
|
||||
title=metric_config.get("title", ""),
|
||||
delta=metric_config.get("delta"),
|
||||
delta_suffix=metric_config.get("delta_suffix", "%"),
|
||||
prefix=metric_config.get("prefix", ""),
|
||||
suffix=metric_config.get("suffix", ""),
|
||||
format_spec=metric_config.get("format_spec", ",.0f"),
|
||||
positive_is_good=metric_config.get("positive_is_good", True),
|
||||
)
|
||||
figures.append(fig)
|
||||
|
||||
return figures
|
||||
233
portfolio_app/figures/time_series.py
Normal file
233
portfolio_app/figures/time_series.py
Normal file
@@ -0,0 +1,233 @@
|
||||
"""Time series figure factories for Toronto housing data."""
|
||||
|
||||
from typing import Any
|
||||
|
||||
import plotly.express as px
|
||||
import plotly.graph_objects as go
|
||||
|
||||
|
||||
def create_price_time_series(
|
||||
data: list[dict[str, Any]],
|
||||
date_column: str = "full_date",
|
||||
price_column: str = "avg_price",
|
||||
group_column: str | None = None,
|
||||
title: str = "Average Price Over Time",
|
||||
show_yoy: bool = True,
|
||||
) -> go.Figure:
|
||||
"""Create a time series chart for price data.
|
||||
|
||||
Args:
|
||||
data: List of records with date and price columns.
|
||||
date_column: Column name for dates.
|
||||
price_column: Column name for price values.
|
||||
group_column: Optional column for grouping (e.g., district_code).
|
||||
title: Chart title.
|
||||
show_yoy: Whether to show year-over-year change annotations.
|
||||
|
||||
Returns:
|
||||
Plotly Figure object.
|
||||
"""
|
||||
import pandas as pd
|
||||
|
||||
if not data:
|
||||
fig = go.Figure()
|
||||
fig.add_annotation(
|
||||
text="No data available",
|
||||
xref="paper",
|
||||
yref="paper",
|
||||
x=0.5,
|
||||
y=0.5,
|
||||
showarrow=False,
|
||||
)
|
||||
fig.update_layout(title=title, height=350)
|
||||
return fig
|
||||
|
||||
df = pd.DataFrame(data)
|
||||
df[date_column] = pd.to_datetime(df[date_column])
|
||||
|
||||
if group_column and group_column in df.columns:
|
||||
fig = px.line(
|
||||
df,
|
||||
x=date_column,
|
||||
y=price_column,
|
||||
color=group_column,
|
||||
title=title,
|
||||
)
|
||||
else:
|
||||
fig = px.line(
|
||||
df,
|
||||
x=date_column,
|
||||
y=price_column,
|
||||
title=title,
|
||||
)
|
||||
|
||||
fig.update_layout(
|
||||
height=350,
|
||||
margin={"l": 40, "r": 20, "t": 50, "b": 40},
|
||||
xaxis_title="Date",
|
||||
yaxis_title=price_column.replace("_", " ").title(),
|
||||
yaxis_tickprefix="$",
|
||||
yaxis_tickformat=",",
|
||||
hovermode="x unified",
|
||||
)
|
||||
|
||||
return fig
|
||||
|
||||
|
||||
def create_volume_time_series(
|
||||
data: list[dict[str, Any]],
|
||||
date_column: str = "full_date",
|
||||
volume_column: str = "sales_count",
|
||||
group_column: str | None = None,
|
||||
title: str = "Sales Volume Over Time",
|
||||
chart_type: str = "bar",
|
||||
) -> go.Figure:
|
||||
"""Create a time series chart for volume/count data.
|
||||
|
||||
Args:
|
||||
data: List of records with date and volume columns.
|
||||
date_column: Column name for dates.
|
||||
volume_column: Column name for volume values.
|
||||
group_column: Optional column for grouping.
|
||||
title: Chart title.
|
||||
chart_type: 'bar' or 'line'.
|
||||
|
||||
Returns:
|
||||
Plotly Figure object.
|
||||
"""
|
||||
import pandas as pd
|
||||
|
||||
if not data:
|
||||
fig = go.Figure()
|
||||
fig.add_annotation(
|
||||
text="No data available",
|
||||
xref="paper",
|
||||
yref="paper",
|
||||
x=0.5,
|
||||
y=0.5,
|
||||
showarrow=False,
|
||||
)
|
||||
fig.update_layout(title=title, height=350)
|
||||
return fig
|
||||
|
||||
df = pd.DataFrame(data)
|
||||
df[date_column] = pd.to_datetime(df[date_column])
|
||||
|
||||
if chart_type == "bar":
|
||||
if group_column and group_column in df.columns:
|
||||
fig = px.bar(
|
||||
df,
|
||||
x=date_column,
|
||||
y=volume_column,
|
||||
color=group_column,
|
||||
title=title,
|
||||
)
|
||||
else:
|
||||
fig = px.bar(
|
||||
df,
|
||||
x=date_column,
|
||||
y=volume_column,
|
||||
title=title,
|
||||
)
|
||||
else:
|
||||
if group_column and group_column in df.columns:
|
||||
fig = px.line(
|
||||
df,
|
||||
x=date_column,
|
||||
y=volume_column,
|
||||
color=group_column,
|
||||
title=title,
|
||||
)
|
||||
else:
|
||||
fig = px.line(
|
||||
df,
|
||||
x=date_column,
|
||||
y=volume_column,
|
||||
title=title,
|
||||
)
|
||||
|
||||
fig.update_layout(
|
||||
height=350,
|
||||
margin={"l": 40, "r": 20, "t": 50, "b": 40},
|
||||
xaxis_title="Date",
|
||||
yaxis_title=volume_column.replace("_", " ").title(),
|
||||
yaxis_tickformat=",",
|
||||
hovermode="x unified",
|
||||
)
|
||||
|
||||
return fig
|
||||
|
||||
|
||||
def create_market_comparison_chart(
|
||||
data: list[dict[str, Any]],
|
||||
date_column: str = "full_date",
|
||||
metrics: list[str] | None = None,
|
||||
title: str = "Market Indicators",
|
||||
) -> go.Figure:
|
||||
"""Create a multi-metric comparison chart.
|
||||
|
||||
Args:
|
||||
data: List of records with date and metric columns.
|
||||
date_column: Column name for dates.
|
||||
metrics: List of metric columns to display.
|
||||
title: Chart title.
|
||||
|
||||
Returns:
|
||||
Plotly Figure object with secondary y-axis.
|
||||
"""
|
||||
import pandas as pd
|
||||
from plotly.subplots import make_subplots
|
||||
|
||||
if not data:
|
||||
fig = go.Figure()
|
||||
fig.add_annotation(
|
||||
text="No data available",
|
||||
xref="paper",
|
||||
yref="paper",
|
||||
x=0.5,
|
||||
y=0.5,
|
||||
showarrow=False,
|
||||
)
|
||||
fig.update_layout(title=title, height=400)
|
||||
return fig
|
||||
|
||||
if metrics is None:
|
||||
metrics = ["avg_price", "sales_count"]
|
||||
|
||||
df = pd.DataFrame(data)
|
||||
df[date_column] = pd.to_datetime(df[date_column])
|
||||
|
||||
fig = make_subplots(specs=[[{"secondary_y": True}]])
|
||||
|
||||
colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728"]
|
||||
|
||||
for i, metric in enumerate(metrics[:4]):
|
||||
if metric not in df.columns:
|
||||
continue
|
||||
|
||||
secondary = i > 0
|
||||
fig.add_trace(
|
||||
go.Scatter(
|
||||
x=df[date_column],
|
||||
y=df[metric],
|
||||
name=metric.replace("_", " ").title(),
|
||||
line={"color": colors[i % len(colors)]},
|
||||
),
|
||||
secondary_y=secondary,
|
||||
)
|
||||
|
||||
fig.update_layout(
|
||||
title=title,
|
||||
height=400,
|
||||
margin={"l": 40, "r": 40, "t": 50, "b": 40},
|
||||
hovermode="x unified",
|
||||
legend={
|
||||
"orientation": "h",
|
||||
"yanchor": "bottom",
|
||||
"y": 1.02,
|
||||
"xanchor": "right",
|
||||
"x": 1,
|
||||
},
|
||||
)
|
||||
|
||||
return fig
|
||||
Reference in New Issue
Block a user