So it was a bit tricky (so now we have a ticket on our backlog to make embedding easier 😆 ) 1. There are some example testing projects in the viz repo - and I adapted them 2. I've included the javascript below, I needed to hide the sidebar and minimap as they were annoying when embedding in the medium window 3. Medium doesn't let you use any old

iframe

so glitch lets you host any SPA for free, so

npm build

and deploy via github!

javascript
import KedroViz from "@quantumblack/kedro-viz";
import * as sourceDomainModel from "./data/source_domain_model.json";
import * as representativePipeline from "./data/complete_demo_pipeline.json";

export const dataSources = {
  sourceDomainModel: () => sourceDomainModel.default,
  representativePipeline: () => representativePipeline.default,
};

const App = ({ initialData }) => {
  const visibleSetting = { sidebar: false, miniMap: false };
  return (
    <div style={{ height: "100vh" }}>
      <KedroViz
        data={dataSources.representativePipeline()}
        visible={visibleSetting}
      />
    </div>
  );
};

App.defaultProps = {
  initialData: "layers",
};

export default App;