Public
Edited
Apr 18
1 fork
React = await import("https://esm.sh/react@18.2.0")
ReactDOM = await import("https://esm.sh/react-dom@18.2.0")
htm = await import("https://esm.sh/htm/react")
Recharts = await import("https://esm.sh/recharts@2.12.0")
{
const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } = Recharts;
const data = [
{ name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
{ name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
{ name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
{ name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
{ name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
{ name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
{ name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
];
// Create chart using React.createElement instead of JSX
const chart = React.createElement(
AreaChart,
{
width: 730,
height: 250,
data: data,
margin: { top: 10, right: 30, left: 0, bottom: 0 }
},
React.createElement(
"defs",
null,
React.createElement(
"linearGradient",
{ id: "colorUv", x1: "0", y1: "0", x2: "0", y2: "1" },
React.createElement("stop", {
offset: "5%",
stopColor: "#8884d8",
stopOpacity: 0.8
}),
React.createElement("stop", {
offset: "95%",
stopColor: "#8884d8",
stopOpacity: 0
})
),
React.createElement(
"linearGradient",
{ id: "colorPv", x1: "0", y1: "0", x2: "0", y2: "1" },
React.createElement("stop", {
offset: "5%",
stopColor: "#82ca9d",
stopOpacity: 0.8
}),
React.createElement("stop", {
offset: "95%",
stopColor: "#82ca9d",
stopOpacity: 0
})
)
),
React.createElement(XAxis, { dataKey: "name" }),
React.createElement(YAxis),
React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
React.createElement(Tooltip),
React.createElement(Area, {
type: "monotone",
dataKey: "uv",
stroke: "#8884d8",
fillOpacity: 1,
fill: "url(#colorUv)"
}),
React.createElement(Area, {
type: "monotone",
dataKey: "pv",
stroke: "#82ca9d",
fillOpacity: 1,
fill: "url(#colorPv)"
})
);
// Render the chart
const container = document.createElement("div");
// Render into the container
ReactDOM.render(chart, container);
// Return the container element
return container;
}
{
const { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } = Recharts;
const data = [
{ name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
{ name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
{ name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
{ name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
{ name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
{ name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
{ name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
];
// Bind HTM's html function to React.createElement
const jsx = htm.html;
// Create chart using HTM's jsx syntax
const chart = jsx`
<${AreaChart}
width=${730}
height=${250}
data=${data}
margin=${{ top: 10, right: 30, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#8884d8" stopOpacity=${0.8} />
<stop offset="95%" stopColor="#8884d8" stopOpacity=${0} />
</linearGradient>
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#82ca9d" stopOpacity=${0.8} />
<stop offset="95%" stopColor="#82ca9d" stopOpacity=${0} />
</linearGradient>
</defs>
<${XAxis} dataKey="name" />
<${YAxis} />
<${CartesianGrid} strokeDasharray="3 3" />
<${Tooltip} />
<${Area}
type="monotone"
dataKey="uv"
stroke="#8884d8"
fillOpacity=${1}
fill="url(#colorUv)"
/>
<${Area}
type="monotone"
dataKey="pv"
stroke="#82ca9d"
fillOpacity=${1}
fill="url(#colorPv)"
/>
<//>
`;
// Create a container element
const container = document.createElement("div");
// Render the chart into the container
ReactDOM.render(chart, container);
// Return the container element
return container;
}
{
// Bind HTM to React's createElement
var jsx = htm.html;
// Define your React component
const App = () => jsx`
<div>
<h1>Hello, World!</h1>
<p>This is JSX-like syntax with HTM and React.</p>
</div>
`;
// Render the React component
const container = document.createElement("div");
ReactDOM.render(jsx`<${App} />`, container);
return container;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
