"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[3978],{544:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"integration-D3js","title":"D3.js Integration","description":"Explore how to import D3.js with your  application.","source":"@site/Integration/002.integration-D3js.md","sourceDirName":".","slug":"/integration-D3js","permalink":"/guides/integration/integration-D3js","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"sidebar","previous":{"title":"Three.js Integration","permalink":"/guides/integration/integration-threejs"},"next":{"title":"Highcharts Integration","permalink":"/guides/integration/integration-Highcharts"}}');var s=n(4848),r=n(8453),o=n(8175);const a={sidebar_position:2},l="D3.js Integration",d={},c=[{value:"What is D3.js ?",id:"what-is-d3js-",level:2},{value:"How to Build a Website Using D3.js in EZsite",id:"how-to-build-a-website-using-d3js-in-ezsite",level:2}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"d3js-integration",children:"D3.js Integration"})}),"\n",(0,s.jsxs)(t.p,{children:["Explore how to import D3.js with your ",(0,s.jsx)(o.A,{})," application."]}),"\n",(0,s.jsx)(t.h2,{id:"what-is-d3js-",children:"What is D3.js ?"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"https://d3js.org/",children:"D3.js"}),", or Data-Driven Documents, is a powerful JavaScript library for producing dynamic, interactive data visualizations in web browsers. It leverages the full capabilities of modern web standards such as SVG, HTML5, and CSS."]}),"\n",(0,s.jsx)(t.h2,{id:"how-to-build-a-website-using-d3js-in-ezsite",children:"How to Build a Website Using D3.js in EZsite"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["Open ",(0,s.jsx)(t.a,{href:"https://ezsite.ai",children:(0,s.jsx)(o.A,{})}),"."]}),"\n",(0,s.jsx)(t.li,{children:'Click the "Create new project" button.'}),"\n",(0,s.jsx)(t.li,{children:"Enter your dream idea in the text box"}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"For example:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{children:"Create a sample website using D3.js\n"})}),"\n",(0,s.jsxs)(t.ol,{start:"4",children:["\n",(0,s.jsx)(t.li,{children:'Click "Generate your website".'}),"\n"]})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},8175:(e,t,n)=>{n.d(t,{A:()=>s});n(6540);var i=n(4848);function s(){return(0,i.jsx)("code",{children:"EZsite"})}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var i=n(6540);const s={},r=i.createContext(s);function o(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]);