Visualize a Heart Filling with Color using D3

This function renders a heart-shaped SVG graphic that fills from the bottom up based on the provided level. The appearance of the heart and the optional label can be fully customized. It uses the `r2d3` package to render the visualization with D3.js.

heart_fill(
  fill_level = 0.65,
  heartSize = 150,
  strokeColor = "#C00",
  strokeWidth = 4,
  fillColor = "red",
  renderFillLabel = TRUE,
  labelColor = "#333",
  labelFontSize = "16px",
  titleText = "Fill level",
  titleColor = "#333",
  titleFontSize = "14px",
  font = "Verdana, Geneva, Tahoma, sans-serif"
)

Arguments

fill_level: Value between 0 and 1 indicating how full the heart should appear (e.g., 0.65).
heartSize: Width/height scale of the heart in pixels.
strokeColor: Color of the heart outline.
strokeWidth: Width of the heart outline stroke.
fillColor: Color used to fill the heart based on the fill level.
renderFillLabel: Whether to display a percentage label above the heart.
labelColor: Color of the percentage label text.
labelFontSize: Font size of the percentage label text (e.g., "16px").
titleText: Optional title displayed below the heart.
titleColor: Color of the title text.
titleFontSize: Font size of the title text (e.g., "14px").
font: Font family used for text labels and title.

Value

An interactive D3 heart fill visualization rendered in the RStudio Viewer or web browser.

Examples

heart_fill(fill_level = 0.9)

heart_fill(
  fill_level = 0.4,
  fillColor = "pink",
  labelColor = "#C00",
  strokeColor = "#900"
)