Plot: using plot on svelte

Community Help
1

I’m trying to integrate plot into svelte. I’m currently rendering plot inside the . Is there a better way to integrate?

<script>
import * as d3 from "d3";
import * as Plot from "@observablehq/plot";

let start = new Date("2022-03-20")
let end = new Date("2022-05-28")
let today = d3.utcDay()

export function myplot(node) {
  console.log (innerWidth);

  node.appendChild(
    Plot.plot({
    width: 600,
    height: 400,
    label: null,
    x: {
      // axis: "top",
      domain: [start, end],
      axis: "top",
      round: true,
      ticks: {
        range(start, end) {
          return d3.utcWeek.range(start, end).map((d) => d3.utcHour.offset(d, 12));
        }
      },
      tickFormat: "%b %-d"
    },
    y: {
      grid: true
    },
    opacity: { type: "identity" },
    marks: [
      //Mark Weekend
      Plot.barX(d3.utcDay.range(start, end), {
        interval: d3.utcDay,
        fillOpacity: (d) => ((1 + d.getUTCDay()) % 7 < 2 ? 0.15 : 0.05)
      }),

      //Mark Today
      Plot.barX([today], {
        interval: d3.utcDay,
        fill: "yellow",
        fillOpacity: 0.5
      }),
    ]
  })
  )
}

</script>

<div use:myplot class="myplot"></div>
2

Solution here - Integrating Plot into Svelte - Stack Overflow

1 Like