infographic-creation

infographic list-row-horizontal-icon-arrow
data
  title Title
  desc Description
  items
    - label Label
      value 12.5
      desc Explanation
      icon mdi/rocket-launch
theme
  palette #3b82f6 #8b5cf6 #f97316

interface Data {
  title?: string;
  desc?: string;
  items: ItemDatum[];
  [key: string]: any;
}

interface ItemDatum {
  icon?: string;
  label?: string;
  desc?: string;
  value?: number;
  illus?: string;
  children?: ItemDatum[];
  [key: string]: any;
}

infographic list-row-horizontal-icon-arrow
data
  title Internet Technology Evolution
  desc From Web 1.0 to AI era, key milestones
  items
    - time 1991
      label Web 1.0
      desc Tim Berners-Lee published the first website, opening the Internet era
      icon mdi/web
    - time 2004
      label Web 2.0
      desc Social media and user-generated content become mainstream
      icon mdi/account-multiple
    - time 2007
      label Mobile
      desc iPhone released, smartphone changes the world
      icon mdi/cellphone
    - time 2015
      label Cloud Native
      desc Containerization and microservices architecture are widely used
      icon mdi/cloud
    - time 2020
      label Low Code
      desc Visual development lowers the technology threshold
      icon mdi/application-brackets
    - time 2023
      label AI Large Model
      desc ChatGPT ignites the generative AI revolution
      icon mdi/brain

infographic sequence-horizontal-zigzag-simple-illus
data
  title Product Development Phases
  desc Key stages in our development process
  items
    - label Research
      desc Understanding user needs
      illus user-research
    - label Design
      desc Creating user experience
      illus design-thinking
    - label Development
      desc Building the product
      illus coding
    - label Launch
      desc Going to market
      illus launch-day

<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
// Resource Loader Script
// Use the following resource loader script to handle icon and illustration loading:
const svgTextCache = new Map();
const pendingRequests = new Map();

AntVInfographic.registerResourceLoader(async (config) => {
    const { data, scene } = config;

    try {
        const key = `${scene}::${data}`;
        let svgText;

        // 1. Check cache
        if (svgTextCache.has(key)) {
            svgText = svgTextCache.get(key);
        }
        // 2. Check if request is already in progress
        else if (pendingRequests.has(key)) {
            svgText = await pendingRequests.get(key);
        }
        // 3. Make new request
        else {
            const fetchPromise = (async () => {
                try {
                    let url;

                    if (scene === 'icon') {
                        url = `https://api.iconify.design/${data}.svg`;
                    } else if (scene === 'illus') {
                        url = `https://raw.githubusercontent.com/balazser/undraw-svg-collection/refs/heads/main/svgs/${data}.svg`;
                    } else return null;

                    if (!url) return null;

                    const response = await fetch(url, { referrerPolicy: 'no-referrer' });

                    if (!response.ok) {
                        console.error(`HTTP ${response.status}: Failed to load ${url}`);
                        return null;
                    }

                    const text = await response.text();

                    if (!text || !text.trim().startsWith('<svg')) {
                        console.error(`Invalid SVG content from ${url}`);
                        return null;
                    }

                    svgTextCache.set(key, text);
                    return text;
                } catch (fetchError) {
                    console.error(`Failed to fetch resource ${key}:`, fetchError);
                    return null;
                }
            })();

            pendingRequests.set(key, fetchPromise);

            try {
                svgText = await fetchPromise;
            } catch (error) {
                pendingRequests.delete(key);
                console.error(`Error loading resource ${key}:`, error);
                return null;
            } finally {
                pendingRequests.delete(key);
            }
        }

        if (!svgText) {
            return null;
        }

        const resource = AntVInfographic.loadSVGResource(svgText);

        if (!resource) {
            console.error(`loadSVGResource returned null for ${key}`);
            svgTextCache.delete(key);
            return null;
        }

        return resource;
    } catch (error) {
        console.error('Unexpected error in resource loader:', error);
        return null;
    }
});
</script>
<script>
 const infographic = new AntVInfographic.Infographic({
    container: '#container',
    width: '100%',
    height: '100%',
  });
  infographic.render(`{syntax}`);
</script>