@semcore/d3-chart 2.2.4 → 2.3.0-1

package/lib/es6/a11y/datasets/charts-a11y.js

@@ -0,0 +1,590 @@
+// import React from 'react';
+// import {
+//   Line,
+//   XAxis,
+//   Plot,
+//   YAxis,
+//   minMax,
+//   Tooltip,
+//   Bubble,
+//   Donut,
+//   colors,
+//   Bar,
+//   HorizontalBar,
+//   GroupBar,
+//   HoverRect,
+//   RadialTree,
+//   Plot,
+//   ScatterPlot,
+//   XAxis,
+//   YAxis,
+//   minMax,
+//   Tooltip,
+//   StackBar,
+//   Plot,
+//   XAxis,
+//   YAxis,
+//   minMax,
+//   colors,
+//   StackedArea,
+//   HoverLine,
+//   Tooltip,
+//   Venn,
+// } from '@semcore/d3-chart';
+// import { Flex, Box, Flex, Box } from '@semcore/flex-box';
+// import { Text, Text, Text } from '@semcore/typography';
+// import LikeM from '@semcore/icon/Like/m';
+// import resolveColor from '@semcore/utils/src/color';
+// import { scaleLinear, scaleBand, scaleLinear, scaleLinear } from 'd3-scale';
+// import goldData from '../../../semcore/d3-chart/src/a11y/datasets/gold.json';
+// import imbdmData from '../../../semcore/d3-chart/src/a11y/datasets/imdb.json';
+// import titanicData from '../../../semcore/d3-chart/src/a11y/datasets/titanic.json';
+// const Stonks = () => {
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const data = goldData
+//     .map((row) => {
+//       const [d, m, y] = row.Date.split('-');
+//       return {
+//         ...row,
+//         Date: new Date(`${m}-${d}-${y}`),
+//       };
+//     })
+//     .filter((_, index) => index % 10 === 0);
+//   const xScale = scaleLinear()
+//     .range([MARGIN, width - MARGIN])
+//     .domain(minMax(data, 'Date'));
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain(minMax(data, 'United States(USD)'));
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//         <YAxis.Title>Price</YAxis.Title>
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Title>Year</XAxis.Title>
+//         <XAxis.Ticks ticks={xScale.ticks(6)}>
+//           {({ value }) => ({
+//             children: formatDate(value, {
+//               month: 'short',
+//               day: 'numeric',
+//               year: 'numeric',
+//             }),
+//           })}
+//         </XAxis.Ticks>
+//       </XAxis>
+//       <Line x="Date" y="United States(USD)">
+//         <Line.Dots display />
+//       </Line>
+//       <Line x="Date" y="Europe(EUR)">
+//         <Line.Dots display />
+//       </Line>
+//       <Line x="Date" y="Australia(AUD)">
+//         <Line.Dots display />
+//       </Line>
+//     </Plot>
+//   );
+// };
+// const FilmBubbles = () => {
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const data = imbdmData
+//     .map((row) => ({ ...row, label: row.Title }))
+//     .filter((_, index) => index % 70 === 0);
+//   const xScale = scaleLinear()
+//     .range([MARGIN, width - MARGIN])
+//     .domain([1950, 2020]);
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain([0, 10]);
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Ticks />
+//       </XAxis>
+//       <Bubble x="ReleaseYear" y="IMDb-Rating" value="IMDb-Rating" />
+//     </Plot>
+//   );
+// };
+// const SurvivedTitanicClassesPie = () => {
+//   const data: Record<string, number> = {};
+//   for (const row of titanicData) {
+//     const className = String(row.Pclass);
+//     data[className] = data[className] ? data[className] + 1 : 1;
+//   }
+//   return (
+//     <Plot width={300} height={300} data={data}>
+//       <Donut innerRadius={100}>
+//         <Donut.Pie dataKey="1" name="Class 1" />
+//         <Donut.Pie dataKey="2" color={colors['green-02']} name="Class 2" />
+//         <Donut.Pie dataKey="3" color={colors['violet-04']} name="Class 3" />
+//         <Donut.Label>Survived classes</Donut.Label>
+//       </Donut>
+//       <Tooltip>
+//         {({ dataKey, name }) => {
+//           return {
+//             children: (
+//               <>
+//                 <Tooltip.Title>{name}</Tooltip.Title>
+//                 <Flex justifyContent="space-between">
+//                   <Text bold>{data[dataKey]}</Text>
+//                 </Flex>
+//               </>
+//             ),
+//           };
+//         }}
+//       </Tooltip>
+//     </Plot>
+//   );
+// };
+// const SurvivedTitanicClassesBars = () => {
+//   const pieData: Record<string, number> = {};
+//   for (const row of titanicData) {
+//     const className = String(row.Pclass);
+//     pieData[className] = pieData[className] ? pieData[className] + 1 : 1;
+//   }
+//   const data = Object.entries(pieData).map(([className, survived]) => ({
+//     className: `Class ${className}`,
+//     survived,
+//   }));
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const xScale = scaleBand()
+//     .range([MARGIN, width - MARGIN])
+//     .domain(data.map((d) => d.className))
+//     .paddingInner(0.4)
+//     .paddingOuter(0.2);
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain([0, 260]);
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Ticks />
+//         <XAxis.Title>Survived passengers</XAxis.Title>
+//       </XAxis>
+//       <Bar x="className" y="survived" />
+//     </Plot>
+//   );
+// };
+// const HorizaontalBars = () => {
+//   const data = [...Array(5).keys()].map((d, i) => ({
+//     category: `Category ${i}`,
+//     bar: i + (Math.random() * 10).toFixed('2'),
+//   }));
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const xScale = scaleLinear()
+//     .range([MARGIN * 2, width - MARGIN * 2])
+//     .domain([0, Math.max(...data.map((d) => d.bar))]);
+//   const yScale = scaleBand()
+//     .range([height - MARGIN, MARGIN])
+//     .domain(data.map((d) => d.category))
+//     .paddingInner(0.4)
+//     .paddingOuter(0.2);
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//       </YAxis>
+//       <HorizontalBar x="bar" y="category">
+//         {({ value, x, y, width, height }) => {
+//           return {
+//             children: (
+//               <text
+//                 x={x + width + 16}
+//                 y={y + height / 2}
+//                 textAnchor="start"
+//                 alignmentBaseline="middle"
+//                 fill={resolveColor('gray60')}
+//               >
+//                 $ {value.bar}
+//               </text>
+//             ),
+//           };
+//         }}
+//       </HorizontalBar>
+//     </Plot>
+//   );
+// };
+// const GroupBars = () => {
+//   const data = [...Array(5).keys()].map((d, i) => ({
+//     category: `Category ${i}`,
+//     bar1: Math.random() * 10,
+//     bar2: Math.random() * 10,
+//   }));
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const xScale = scaleLinear()
+//     .range([MARGIN * 2, width - MARGIN])
+//     .domain([0, 10]);
+//   const yScale = scaleBand()
+//     .range([height - MARGIN, MARGIN])
+//     .domain(data.map((d) => d.category))
+//     .paddingInner(0.4)
+//     .paddingOuter(0.2);
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis hide={false}>
+//         <YAxis.Ticks />
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Ticks />
+//         <XAxis.Grid />
+//       </XAxis>
+//       <Tooltip tag={HoverRect} y="category" wMin={100}>
+//         {({ yIndex }) => {
+//           return {
+//             children: (
+//               <>
+//                 <Tooltip.Title>{data[yIndex].category}</Tooltip.Title>
+//                 <Flex justifyContent="space-between">
+//                   <Tooltip.Dot mr={4}>Bar 1</Tooltip.Dot>
+//                   <Text bold>{data[yIndex].bar1}</Text>
+//                 </Flex>
+//                 <Flex mt={2} justifyContent="space-between">
+//                   <Tooltip.Dot mr={4} color={colors['green-02']}>
+//                     Bar 2
+//                   </Tooltip.Dot>
+//                   <Text bold>{data[yIndex].bar2}</Text>
+//                 </Flex>
+//               </>
+//             ),
+//           };
+//         }}
+//       </Tooltip>
+//       <GroupBar y="category">
+//         <GroupBar.HorizontalBar x="bar1" />
+//         <GroupBar.HorizontalBar x="bar2" color={colors['green-02']} />
+//       </GroupBar>
+//     </Plot>
+//   );
+// };
+// const RadialTreeExample = () => {
+//   const width = 500;
+//   const height = 500;
+//   const data = Array(12)
+//     .fill({})
+//     .map((_, i) => ({
+//       label: `Sheep ${i + 1}`,
+//       icon: LikeM,
+//     }));
+//   return (
+//     <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
+//       <RadialTree color="#AB6CFE">
+//         <RadialTree.Radian>
+//           <RadialTree.Radian.Label />
+//           <RadialTree.Radian.Line />
+//           <RadialTree.Radian.Cap />
+//           <RadialTree.Radian.Icon />
+//         </RadialTree.Radian>
+//         <RadialTree.Title>Sleeping</RadialTree.Title>
+//       </RadialTree>
+//     </Plot>
+//   );
+// };
+// const ScatterPlotChart = () => {
+//   const data = Array(20)
+//     .fill({})
+//     .map((d, i) => ({
+//       x: i,
+//       y: Math.random() * 10,
+//     }));
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const xScale = scaleLinear()
+//     .range([MARGIN, width - MARGIN])
+//     .domain(minMax(data, 'x'));
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain([0, 10]);
+//   return (
+//     <Plot scale={[xScale, yScale]} width={width} height={height} data={data}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Ticks />
+//       </XAxis>
+//       <ScatterPlot x="x" y="y" />
+//       <Tooltip>
+//         {({ xIndex }) => {
+//           return {
+//             children: (
+//               <>
+//                 <Tooltip.Title>Data</Tooltip.Title>
+//                 <Text tag="div">X axis {data[xIndex].x}</Text>
+//                 <Text tag="div">Y axis {data[xIndex].y}</Text>
+//               </>
+//             ),
+//           };
+//         }}
+//       </Tooltip>
+//     </Plot>
+//   );
+// };
+// const StackedBarChart = () => {
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const data = [...Array(5).keys()].map((d, i) => ({
+//     category: `Category ${i}`,
+//     stack1: Math.random() * 10,
+//     stack2: Math.random() * 10,
+//   }));
+//   const xScale = scaleBand()
+//     .range([MARGIN, width - MARGIN])
+//     .domain(data.map((d) => d.category))
+//     .paddingInner(0.4)
+//     .paddingOuter(0.2);
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain([0, 20]);
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Ticks />
+//       </XAxis>
+//       <Tooltip tag={HoverRect} x="category" wMin={100}>
+//         {({ xIndex }) => {
+//           return {
+//             children: (
+//               <>
+//                 <Tooltip.Title>{data[xIndex].category}</Tooltip.Title>
+//                 <Flex justifyContent="space-between">
+//                   <Tooltip.Dot mr={4}>Stack 1</Tooltip.Dot>
+//                   <Text bold>{data[xIndex].stack1}</Text>
+//                 </Flex>
+//                 <Flex mt={2} justifyContent="space-between">
+//                   <Tooltip.Dot mr={4} color={colors['blue-02']}>
+//                     Stack 2
+//                   </Tooltip.Dot>
+//                   <Text bold>{data[xIndex].stack2}</Text>
+//                 </Flex>
+//                 <Flex mt={2} justifyContent="space-between">
+//                   <Box mr={4}>Total</Box>
+//                   <Text bold>{data[xIndex].stack1 + data[xIndex].stack2}</Text>
+//                 </Flex>
+//               </>
+//             ),
+//           };
+//         }}
+//       </Tooltip>
+//       <StackBar x="category">
+//         <StackBar.Bar y="stack1" />
+//         <StackBar.Bar y="stack2" color={colors['blue-02']} />
+//       </StackBar>
+//     </Plot>
+//   );
+// };
+// import { curveCardinal } from 'd3-shape';
+// function formatDate(value, options) {
+//   return new Intl.DateTimeFormat('en', options).format(value);
+// }
+// const StackedAreaChart = () => {
+//   const date = new Date();
+//   const data = [...Array(5).keys()].map((d, i) => ({
+//     time: new Date(date.setDate(date.getDate() + 5)),
+//     stack1: Math.random() * 5,
+//     stack2: Math.random() * 5,
+//     stack3: Math.random() * 5,
+//   }));
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const xScale = scaleLinear()
+//     .range([MARGIN, width - MARGIN])
+//     .domain(minMax(data, 'time'));
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain([0, 15]);
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Ticks ticks={data.map((d) => +d.time)}>
+//           {({ value }) => ({
+//             children: formatDate(value, {
+//               month: 'short',
+//               day: 'numeric',
+//             }),
+//           })}
+//         </XAxis.Ticks>
+//       </XAxis>
+//       <Tooltip tag={HoverLine} x="time" wMin={100}>
+//         {({ xIndex }) => {
+//           return {
+//             children: (
+//               <>
+//                 <Tooltip.Title>
+//                   {formatDate(data[xIndex].time, {
+//                     year: 'numeric',
+//                     month: 'long',
+//                     day: 'numeric',
+//                   })}
+//                 </Tooltip.Title>
+//                 <Flex justifyContent="space-between">
+//                   <Tooltip.Dot mr={4}>Stack 1</Tooltip.Dot>
+//                   <Text bold>{data[xIndex].stack1}</Text>
+//                 </Flex>
+//                 <Flex mt={2} justifyContent="space-between">
+//                   <Tooltip.Dot mr={4} color={colors['green-02']}>
+//                     Stack 2
+//                   </Tooltip.Dot>
+//                   <Text bold>{data[xIndex].stack2}</Text>
+//                 </Flex>
+//                 <Flex mt={2} justifyContent="space-between">
+//                   <Tooltip.Dot mr={4} color={colors['orange-04']}>
+//                     Stack 3
+//                   </Tooltip.Dot>
+//                   <Text bold>{data[xIndex].stack3}</Text>
+//                 </Flex>
+//                 <Flex mt={2} justifyContent="space-between">
+//                   <Box mr={4}>Total</Box>
+//                   <Text bold>
+//                     {data[xIndex].stack1 + data[xIndex].stack2 + data[xIndex].stack3}
+//                   </Text>
+//                 </Flex>
+//               </>
+//             ),
+//           };
+//         }}
+//       </Tooltip>
+//       <StackedArea x="time">
+//         <StackedArea.Area y="stack1" curve={curveCardinal}>
+//           <StackedArea.Area.Dots />
+//         </StackedArea.Area>
+//         <StackedArea.Area y="stack2" fill="#59DDAA50" color="#59DDAA" curve={curveCardinal}>
+//           <StackedArea.Area.Dots />
+//         </StackedArea.Area>
+//         <StackedArea.Area y="stack3" fill="#FF622D50" color="#FF622D" curve={curveCardinal}>
+//           <StackedArea.Area.Dots />
+//         </StackedArea.Area>
+//       </StackedArea>
+//     </Plot>
+//   );
+// };
+// const VennChart = () => {
+//   const data = {
+//     G: 200,
+//     F: 200,
+//     C: 500,
+//     U: 1,
+//     'G/F': 100,
+//     'G/C': 100,
+//     'F/C': 100,
+//     'G/F/C': 100,
+//   };
+//   return (
+//     <Plot height={300} width={400} data={data}>
+//       <Venn>
+//         <Venn.Circle dataKey="G" name="Good" />
+//         <Venn.Circle dataKey="F" name="Fast" color={colors['blue-03']} />
+//         <Venn.Circle dataKey="C" name="Cheap" color={colors['orange-04']} />
+//         <Venn.Circle dataKey="U" name="Unknown" color={colors['pink-03']} />
+//         <Venn.Intersection dataKey="G/F" name="Good & Fast" />
+//         <Venn.Intersection dataKey="G/C" name="Good & Cheap" />
+//         <Venn.Intersection dataKey="F/C" name="Fast & Cheap" />
+//         <Venn.Intersection dataKey="G/F/C" name="Good & Fast & Cheap" />
+//       </Venn>
+//       <Tooltip>
+//         {({ name, dataKey }) => {
+//           return {
+//             children: (
+//               <>
+//                 <Tooltip.Title>{name}</Tooltip.Title>
+//                 <Text bold>{data[dataKey]}</Text>
+//               </>
+//             ),
+//           };
+//         }}
+//       </Tooltip>
+//     </Plot>
+//   );
+// };
+// const MixedChart = () => {
+//   const MARGIN = 40;
+//   const width = 500;
+//   const height = 300;
+//   const data = goldData
+//     .map((row) => {
+//       const [d, m, y] = row.Date.split('-');
+//       return {
+//         ...row,
+//         Date: new Date(`${m}-${d}-${y}`),
+//       };
+//     })
+//     .filter((_, index) => index % 10 === 0);
+//   const xScale = scaleLinear()
+//     .range([MARGIN, width - MARGIN])
+//     .domain(minMax(data, 'Date'));
+//   const yScale = scaleLinear()
+//     .range([height - MARGIN, MARGIN])
+//     .domain(minMax(data, 'United States(USD)'));
+//   return (
+//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
+//       <YAxis>
+//         <YAxis.Ticks />
+//         <YAxis.Grid />
+//         <YAxis.Title>Price</YAxis.Title>
+//       </YAxis>
+//       <XAxis>
+//         <XAxis.Title>Year</XAxis.Title>
+//         <XAxis.Ticks />
+//       </XAxis>
+//       <Line x="Date" y="United States(USD)">
+//         <Line.Dots display />
+//       </Line>
+//       <Line x="Date" y="Europe(EUR)">
+//         <Line.Dots display />
+//       </Line>
+//       <Line x="Date" y="Australia(AUD)">
+//         <Line.Dots display />
+//       </Line>
+//     </Plot>
+//   );
+// };
+// export default () => {
+//   return (
+//     <div>
+//       <Stonks /> <br />
+//       <FilmBubbles /> <br />
+//       <SurvivedTitanicClassesPie /> <br />
+//       <SurvivedTitanicClassesBars /> <br />
+//       <HorizaontalBars /> <br />
+//       <GroupBars /> <br />
+//       <RadialTreeExample /> <br />
+//       <ScatterPlotChart /> <br />
+//       <StackedBarChart /> <br />
+//       <StackedAreaChart /> <br />
+//       <VennChart /> <br />
+//       <MixedChart /> <br />
+//     </div>
+//   );
+// };
+//# sourceMappingURL=charts-a11y.js.map

package/lib/es6/a11y/datasets/charts-a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts-a11y.js","names":[],"sources":["../../../../src/a11y/datasets/charts-a11y.tsx"],"sourcesContent":["// import React from 'react';\n// import {\n//   Line,\n//   XAxis,\n//   Plot,\n//   YAxis,\n//   minMax,\n//   Tooltip,\n//   Bubble,\n//   Donut,\n//   colors,\n//   Bar,\n//   HorizontalBar,\n//   GroupBar,\n//   HoverRect,\n//   RadialTree,\n//   Plot,\n//   ScatterPlot,\n//   XAxis,\n//   YAxis,\n//   minMax,\n//   Tooltip,\n//   StackBar,\n//   Plot,\n//   XAxis,\n//   YAxis,\n//   minMax,\n//   colors,\n//   StackedArea,\n//   HoverLine,\n//   Tooltip,\n//   Venn,\n// } from '@semcore/d3-chart';\n// import { Flex, Box, Flex, Box } from '@semcore/flex-box';\n// import { Text, Text, Text } from '@semcore/typography';\n// import LikeM from '@semcore/icon/Like/m';\n// import resolveColor from '@semcore/utils/src/color';\n// import { scaleLinear, scaleBand, scaleLinear, scaleLinear } from 'd3-scale';\n// import goldData from '../../../semcore/d3-chart/src/a11y/datasets/gold.json';\n// import imbdmData from '../../../semcore/d3-chart/src/a11y/datasets/imdb.json';\n// import titanicData from '../../../semcore/d3-chart/src/a11y/datasets/titanic.json';\n// const Stonks = () => {\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const data = goldData\n//     .map((row) => {\n//       const [d, m, y] = row.Date.split('-');\n//       return {\n//         ...row,\n//         Date: new Date(`${m}-${d}-${y}`),\n//       };\n//     })\n//     .filter((_, index) => index % 10 === 0);\n//   const xScale = scaleLinear()\n//     .range([MARGIN, width - MARGIN])\n//     .domain(minMax(data, 'Date'));\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain(minMax(data, 'United States(USD)'));\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//         <YAxis.Title>Price</YAxis.Title>\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Title>Year</XAxis.Title>\n//         <XAxis.Ticks ticks={xScale.ticks(6)}>\n//           {({ value }) => ({\n//             children: formatDate(value, {\n//               month: 'short',\n//               day: 'numeric',\n//               year: 'numeric',\n//             }),\n//           })}\n//         </XAxis.Ticks>\n//       </XAxis>\n//       <Line x=\"Date\" y=\"United States(USD)\">\n//         <Line.Dots display />\n//       </Line>\n//       <Line x=\"Date\" y=\"Europe(EUR)\">\n//         <Line.Dots display />\n//       </Line>\n//       <Line x=\"Date\" y=\"Australia(AUD)\">\n//         <Line.Dots display />\n//       </Line>\n//     </Plot>\n//   );\n// };\n\n// const FilmBubbles = () => {\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const data = imbdmData\n//     .map((row) => ({ ...row, label: row.Title }))\n//     .filter((_, index) => index % 70 === 0);\n//   const xScale = scaleLinear()\n//     .range([MARGIN, width - MARGIN])\n//     .domain([1950, 2020]);\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain([0, 10]);\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Ticks />\n//       </XAxis>\n//       <Bubble x=\"ReleaseYear\" y=\"IMDb-Rating\" value=\"IMDb-Rating\" />\n//     </Plot>\n//   );\n// };\n\n// const SurvivedTitanicClassesPie = () => {\n//   const data: Record<string, number> = {};\n//   for (const row of titanicData) {\n//     const className = String(row.Pclass);\n//     data[className] = data[className] ? data[className] + 1 : 1;\n//   }\n//   return (\n//     <Plot width={300} height={300} data={data}>\n//       <Donut innerRadius={100}>\n//         <Donut.Pie dataKey=\"1\" name=\"Class 1\" />\n//         <Donut.Pie dataKey=\"2\" color={colors['green-02']} name=\"Class 2\" />\n//         <Donut.Pie dataKey=\"3\" color={colors['violet-04']} name=\"Class 3\" />\n//         <Donut.Label>Survived classes</Donut.Label>\n//       </Donut>\n//       <Tooltip>\n//         {({ dataKey, name }) => {\n//           return {\n//             children: (\n//               <>\n//                 <Tooltip.Title>{name}</Tooltip.Title>\n//                 <Flex justifyContent=\"space-between\">\n//                   <Text bold>{data[dataKey]}</Text>\n//                 </Flex>\n//               </>\n//             ),\n//           };\n//         }}\n//       </Tooltip>\n//     </Plot>\n//   );\n// };\n\n// const SurvivedTitanicClassesBars = () => {\n//   const pieData: Record<string, number> = {};\n//   for (const row of titanicData) {\n//     const className = String(row.Pclass);\n//     pieData[className] = pieData[className] ? pieData[className] + 1 : 1;\n//   }\n//   const data = Object.entries(pieData).map(([className, survived]) => ({\n//     className: `Class ${className}`,\n//     survived,\n//   }));\n\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const xScale = scaleBand()\n//     .range([MARGIN, width - MARGIN])\n//     .domain(data.map((d) => d.className))\n//     .paddingInner(0.4)\n//     .paddingOuter(0.2);\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain([0, 260]);\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Ticks />\n//         <XAxis.Title>Survived passengers</XAxis.Title>\n//       </XAxis>\n//       <Bar x=\"className\" y=\"survived\" />\n//     </Plot>\n//   );\n// };\n\n// const HorizaontalBars = () => {\n//   const data = [...Array(5).keys()].map((d, i) => ({\n//     category: `Category ${i}`,\n//     bar: i + (Math.random() * 10).toFixed('2'),\n//   }));\n\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const xScale = scaleLinear()\n//     .range([MARGIN * 2, width - MARGIN * 2])\n//     .domain([0, Math.max(...data.map((d) => d.bar))]);\n//   const yScale = scaleBand()\n//     .range([height - MARGIN, MARGIN])\n//     .domain(data.map((d) => d.category))\n//     .paddingInner(0.4)\n//     .paddingOuter(0.2);\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//       </YAxis>\n//       <HorizontalBar x=\"bar\" y=\"category\">\n//         {({ value, x, y, width, height }) => {\n//           return {\n//             children: (\n//               <text\n//                 x={x + width + 16}\n//                 y={y + height / 2}\n//                 textAnchor=\"start\"\n//                 alignmentBaseline=\"middle\"\n//                 fill={resolveColor('gray60')}\n//               >\n//                 $ {value.bar}\n//               </text>\n//             ),\n//           };\n//         }}\n//       </HorizontalBar>\n//     </Plot>\n//   );\n// };\n\n// const GroupBars = () => {\n//   const data = [...Array(5).keys()].map((d, i) => ({\n//     category: `Category ${i}`,\n//     bar1: Math.random() * 10,\n//     bar2: Math.random() * 10,\n//   }));\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const xScale = scaleLinear()\n//     .range([MARGIN * 2, width - MARGIN])\n//     .domain([0, 10]);\n//   const yScale = scaleBand()\n//     .range([height - MARGIN, MARGIN])\n//     .domain(data.map((d) => d.category))\n//     .paddingInner(0.4)\n//     .paddingOuter(0.2);\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis hide={false}>\n//         <YAxis.Ticks />\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Ticks />\n//         <XAxis.Grid />\n//       </XAxis>\n//       <Tooltip tag={HoverRect} y=\"category\" wMin={100}>\n//         {({ yIndex }) => {\n//           return {\n//             children: (\n//               <>\n//                 <Tooltip.Title>{data[yIndex].category}</Tooltip.Title>\n//                 <Flex justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4}>Bar 1</Tooltip.Dot>\n//                   <Text bold>{data[yIndex].bar1}</Text>\n//                 </Flex>\n//                 <Flex mt={2} justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4} color={colors['green-02']}>\n//                     Bar 2\n//                   </Tooltip.Dot>\n//                   <Text bold>{data[yIndex].bar2}</Text>\n//                 </Flex>\n//               </>\n//             ),\n//           };\n//         }}\n//       </Tooltip>\n//       <GroupBar y=\"category\">\n//         <GroupBar.HorizontalBar x=\"bar1\" />\n//         <GroupBar.HorizontalBar x=\"bar2\" color={colors['green-02']} />\n//       </GroupBar>\n//     </Plot>\n//   );\n// };\n\n// const RadialTreeExample = () => {\n//   const width = 500;\n//   const height = 500;\n//   const data = Array(12)\n//     .fill({})\n//     .map((_, i) => ({\n//       label: `Sheep ${i + 1}`,\n//       icon: LikeM,\n//     }));\n//   return (\n//     <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>\n//       <RadialTree color=\"#AB6CFE\">\n//         <RadialTree.Radian>\n//           <RadialTree.Radian.Label />\n//           <RadialTree.Radian.Line />\n//           <RadialTree.Radian.Cap />\n//           <RadialTree.Radian.Icon />\n//         </RadialTree.Radian>\n//         <RadialTree.Title>Sleeping</RadialTree.Title>\n//       </RadialTree>\n//     </Plot>\n//   );\n// };\n\n// const ScatterPlotChart = () => {\n//   const data = Array(20)\n//     .fill({})\n//     .map((d, i) => ({\n//       x: i,\n//       y: Math.random() * 10,\n//     }));\n\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n\n//   const xScale = scaleLinear()\n//     .range([MARGIN, width - MARGIN])\n//     .domain(minMax(data, 'x'));\n\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain([0, 10]);\n\n//   return (\n//     <Plot scale={[xScale, yScale]} width={width} height={height} data={data}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Ticks />\n//       </XAxis>\n//       <ScatterPlot x=\"x\" y=\"y\" />\n//       <Tooltip>\n//         {({ xIndex }) => {\n//           return {\n//             children: (\n//               <>\n//                 <Tooltip.Title>Data</Tooltip.Title>\n//                 <Text tag=\"div\">X axis {data[xIndex].x}</Text>\n//                 <Text tag=\"div\">Y axis {data[xIndex].y}</Text>\n//               </>\n//             ),\n//           };\n//         }}\n//       </Tooltip>\n//     </Plot>\n//   );\n// };\n\n// const StackedBarChart = () => {\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const data = [...Array(5).keys()].map((d, i) => ({\n//     category: `Category ${i}`,\n//     stack1: Math.random() * 10,\n//     stack2: Math.random() * 10,\n//   }));\n//   const xScale = scaleBand()\n//     .range([MARGIN, width - MARGIN])\n//     .domain(data.map((d) => d.category))\n//     .paddingInner(0.4)\n//     .paddingOuter(0.2);\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain([0, 20]);\n\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Ticks />\n//       </XAxis>\n//       <Tooltip tag={HoverRect} x=\"category\" wMin={100}>\n//         {({ xIndex }) => {\n//           return {\n//             children: (\n//               <>\n//                 <Tooltip.Title>{data[xIndex].category}</Tooltip.Title>\n//                 <Flex justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4}>Stack 1</Tooltip.Dot>\n//                   <Text bold>{data[xIndex].stack1}</Text>\n//                 </Flex>\n//                 <Flex mt={2} justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4} color={colors['blue-02']}>\n//                     Stack 2\n//                   </Tooltip.Dot>\n//                   <Text bold>{data[xIndex].stack2}</Text>\n//                 </Flex>\n//                 <Flex mt={2} justifyContent=\"space-between\">\n//                   <Box mr={4}>Total</Box>\n//                   <Text bold>{data[xIndex].stack1 + data[xIndex].stack2}</Text>\n//                 </Flex>\n//               </>\n//             ),\n//           };\n//         }}\n//       </Tooltip>\n//       <StackBar x=\"category\">\n//         <StackBar.Bar y=\"stack1\" />\n//         <StackBar.Bar y=\"stack2\" color={colors['blue-02']} />\n//       </StackBar>\n//     </Plot>\n//   );\n// };\n\n// import { curveCardinal } from 'd3-shape';\n\n// function formatDate(value, options) {\n//   return new Intl.DateTimeFormat('en', options).format(value);\n// }\n\n// const StackedAreaChart = () => {\n//   const date = new Date();\n//   const data = [...Array(5).keys()].map((d, i) => ({\n//     time: new Date(date.setDate(date.getDate() + 5)),\n//     stack1: Math.random() * 5,\n//     stack2: Math.random() * 5,\n//     stack3: Math.random() * 5,\n//   }));\n\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n\n//   const xScale = scaleLinear()\n//     .range([MARGIN, width - MARGIN])\n//     .domain(minMax(data, 'time'));\n\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain([0, 15]);\n\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Ticks ticks={data.map((d) => +d.time)}>\n//           {({ value }) => ({\n//             children: formatDate(value, {\n//               month: 'short',\n//               day: 'numeric',\n//             }),\n//           })}\n//         </XAxis.Ticks>\n//       </XAxis>\n//       <Tooltip tag={HoverLine} x=\"time\" wMin={100}>\n//         {({ xIndex }) => {\n//           return {\n//             children: (\n//               <>\n//                 <Tooltip.Title>\n//                   {formatDate(data[xIndex].time, {\n//                     year: 'numeric',\n//                     month: 'long',\n//                     day: 'numeric',\n//                   })}\n//                 </Tooltip.Title>\n//                 <Flex justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4}>Stack 1</Tooltip.Dot>\n//                   <Text bold>{data[xIndex].stack1}</Text>\n//                 </Flex>\n//                 <Flex mt={2} justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4} color={colors['green-02']}>\n//                     Stack 2\n//                   </Tooltip.Dot>\n//                   <Text bold>{data[xIndex].stack2}</Text>\n//                 </Flex>\n//                 <Flex mt={2} justifyContent=\"space-between\">\n//                   <Tooltip.Dot mr={4} color={colors['orange-04']}>\n//                     Stack 3\n//                   </Tooltip.Dot>\n//                   <Text bold>{data[xIndex].stack3}</Text>\n//                 </Flex>\n//                 <Flex mt={2} justifyContent=\"space-between\">\n//                   <Box mr={4}>Total</Box>\n//                   <Text bold>\n//                     {data[xIndex].stack1 + data[xIndex].stack2 + data[xIndex].stack3}\n//                   </Text>\n//                 </Flex>\n//               </>\n//             ),\n//           };\n//         }}\n//       </Tooltip>\n//       <StackedArea x=\"time\">\n//         <StackedArea.Area y=\"stack1\" curve={curveCardinal}>\n//           <StackedArea.Area.Dots />\n//         </StackedArea.Area>\n//         <StackedArea.Area y=\"stack2\" fill=\"#59DDAA50\" color=\"#59DDAA\" curve={curveCardinal}>\n//           <StackedArea.Area.Dots />\n//         </StackedArea.Area>\n//         <StackedArea.Area y=\"stack3\" fill=\"#FF622D50\" color=\"#FF622D\" curve={curveCardinal}>\n//           <StackedArea.Area.Dots />\n//         </StackedArea.Area>\n//       </StackedArea>\n//     </Plot>\n//   );\n// };\n\n// const VennChart = () => {\n//   const data = {\n//     G: 200,\n//     F: 200,\n//     C: 500,\n//     U: 1,\n//     'G/F': 100,\n//     'G/C': 100,\n//     'F/C': 100,\n//     'G/F/C': 100,\n//   };\n\n//   return (\n//     <Plot height={300} width={400} data={data}>\n//       <Venn>\n//         <Venn.Circle dataKey=\"G\" name=\"Good\" />\n//         <Venn.Circle dataKey=\"F\" name=\"Fast\" color={colors['blue-03']} />\n//         <Venn.Circle dataKey=\"C\" name=\"Cheap\" color={colors['orange-04']} />\n//         <Venn.Circle dataKey=\"U\" name=\"Unknown\" color={colors['pink-03']} />\n//         <Venn.Intersection dataKey=\"G/F\" name=\"Good & Fast\" />\n//         <Venn.Intersection dataKey=\"G/C\" name=\"Good & Cheap\" />\n//         <Venn.Intersection dataKey=\"F/C\" name=\"Fast & Cheap\" />\n//         <Venn.Intersection dataKey=\"G/F/C\" name=\"Good & Fast & Cheap\" />\n//       </Venn>\n//       <Tooltip>\n//         {({ name, dataKey }) => {\n//           return {\n//             children: (\n//               <>\n//                 <Tooltip.Title>{name}</Tooltip.Title>\n//                 <Text bold>{data[dataKey]}</Text>\n//               </>\n//             ),\n//           };\n//         }}\n//       </Tooltip>\n//     </Plot>\n//   );\n// };\n\n// const MixedChart = () => {\n//   const MARGIN = 40;\n//   const width = 500;\n//   const height = 300;\n//   const data = goldData\n//     .map((row) => {\n//       const [d, m, y] = row.Date.split('-');\n//       return {\n//         ...row,\n//         Date: new Date(`${m}-${d}-${y}`),\n//       };\n//     })\n//     .filter((_, index) => index % 10 === 0);\n//   const xScale = scaleLinear()\n//     .range([MARGIN, width - MARGIN])\n//     .domain(minMax(data, 'Date'));\n//   const yScale = scaleLinear()\n//     .range([height - MARGIN, MARGIN])\n//     .domain(minMax(data, 'United States(USD)'));\n//   return (\n//     <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>\n//       <YAxis>\n//         <YAxis.Ticks />\n//         <YAxis.Grid />\n//         <YAxis.Title>Price</YAxis.Title>\n//       </YAxis>\n//       <XAxis>\n//         <XAxis.Title>Year</XAxis.Title>\n//         <XAxis.Ticks />\n//       </XAxis>\n//       <Line x=\"Date\" y=\"United States(USD)\">\n//         <Line.Dots display />\n//       </Line>\n//       <Line x=\"Date\" y=\"Europe(EUR)\">\n//         <Line.Dots display />\n//       </Line>\n//       <Line x=\"Date\" y=\"Australia(AUD)\">\n//         <Line.Dots display />\n//       </Line>\n//     </Plot>\n//   );\n// };\n\n// export default () => {\n//   return (\n//     <div>\n//       <Stonks /> <br />\n//       <FilmBubbles /> <br />\n//       <SurvivedTitanicClassesPie /> <br />\n//       <SurvivedTitanicClassesBars /> <br />\n//       <HorizaontalBars /> <br />\n//       <GroupBars /> <br />\n//       <RadialTreeExample /> <br />\n//       <ScatterPlotChart /> <br />\n//       <StackedBarChart /> <br />\n//       <StackedAreaChart /> <br />\n//       <VennChart /> <br />\n//       <MixedChart /> <br />\n//     </div>\n//   );\n// };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}