??? ? ??? ?? ??? ?? ???? : ?, ??, ??, ??, ??? ?????. ?? ???? ?? ???????? ?????. ?? ?? ????? ?? ??? ????. ?? ??? ????? ? ????? ?? (??) ??????? Dreamt-Up ??? ??????.

??? ??? ?

?? ??? ???? ???? ??? ?? ?? ?????. ?? ???? ? ?? ??? ?? ?? ???? ?? ?? ??? ?? ??? ???? ?? (? : SVG ?? ?? HTML DIV)? ?? ????.

??? ?? ??? ???? ??? ???????. ? ??? ??? ????. ???? ?? ? ?? ?? ??? ? ?? ???? ???? ????? ????.

??? ???? ???? ???? ??? ???? ??? ?????? - ? ??? ?? ???

?? ???? ?? SVG? ?? ? ?? ??? ??? ?? ??? ????? ?? ? ????. ??? ??? ??????! ??? ? ??? ??? ?? ?????? ????? ? ????. ??? ??? ??? ??? ??? ?? ?? "? ??"??? ???? ????.

?? ??, ? ???? ?? ? ??? ??? ???? ??? ??? ????.

 <svg viewbox="0 320 320">
  <path d="M320 0H0V56H264V320H320V0Z" fill="#264653"></path>
</svg>

0H0V56? ???? ????? ??, ??? ?? ??? ??? ???“SVG Path Syntax : ?? ???”? ??????.

??? ?? ??

??? ?? ??? ??? ??????.

 type dataSetentry = {
  ??? : ???;
  ?? : ??;
};

type dataset = dataSetentry [];

const rawdataset : dataset = [
  {??? : 'bad', value : 1231},
  {??? : '??', ? : 6321},
  {??? : '??', ?? : 10028},
  {??? : '??', ?? : 12123},
  {??? : '??', ?? : 2120}
];

… ??? ??? ?? SVG? ??? ????.

 <svg viewbox="0 320 320">
  <rect width="320" height="320" y="0" fill="..."> </rect>
  <rect width="264" height="264" y="56" fill="..."> </rect>
  <rect width="167" height="167" y="153" fill="..."> </rect>
  <rect width="56" height="56" y="264" fill="..."> </rect>
  <rect width="32" height="32" y="288" fill="..."> </rect>
</svg>

?? ?? ?? ?????

??? ?? ?? ??? ??? ??? ???? ????. ??? math.max ()? ???? ?? ? ????. ??? ?? ??? ????? ???? ?? ?? ?? ?????.

 const dataSethestValue : number = math.max (
  ... RawDataset.map ((Entry : DataSetentry) => Entry.Value)
);

??? ?? ??? ??? ?? ??? 12123? ?? ???? ?? ? ????.

????? ??? ?????

???? ?? ?? ?? ? (12123)? ???? ???? ??? ?? ??? ?????.

??? SVG ??? ?? ??? 320? ??????. ???? ????? ??? ??? ?????. 12123? 320? ???? ??? ??? ?????? ? "???"?? ?????? 6321 ???? ??? ????

?? ????, ??? ? ?? ([0, 12123])?? ?? ?? ([0, 320])? ??? ??? ?????? ?? ? ?? ?? ??? ??? [a, b]? ???? ??? ??????

??? ??? ??, ??? ??? ?? ??? ??? ????.

 const remapvalue = (
  ?? : ??,
  Frommin : ??,
  Frommax : ??,
  Tomin : ??,
  Tomax : ??
) : ?? => {
  return ((value -frommin) / (Frommax -Frommin)) * (Tomax -Tomin) Tomin;
};

REMAPVALUE (1231, 0, 12123, 0, 320); // 32
REMAPVALUE (6321, 0, 12123, 0, 320); // 167
REMAPVALUE (12123, 0, 12123, 0, 320); // 320

??? ??? ??? ?? ????? ?? ? ?? ?? ???? ???? ?? ?? ??? ?? ? ????.

 const valueremapper = (
  Frommin : ??,
  Frommax : ??,
  Tomin : ??,
  Tomax : ??
) => {
  return (? : ??) : ?? => {
    ?? remapvalue (Min, Frommax, Tomin, Tomax);
  };
};

const remapdatasetvaluetosvgdimension = valueremapper (
  0,
  DataSethestValue,
  0,
  svgdimension
);

??? ??? ?? ??? ? ????.

 remapdatasetvaluetosvgdimension (1231); // 32
remapdatasetvaluetosvgdimension (6321); // 167
remapdatasetvaluetosvgdimension (12123); // 320

DOM ??? ???? ?????

???? ?? DOM ??? ??? ????. ???

? ???? CreateElement ?? CreateElementns? ???? ????. ??? SVG? ???? ?? ?????. HTML ? SVG ??? ??? ???? ?? ?? ???? URI? ????. CreateElement? HTML ?? ????? ???? ???? ????! ??? SVG? ????? ????????.

 svgsvgelement?? document.createelementns ( 'http://www.w3.org/2000/svg', 'svg');

??? ?? ??? ??? ?? ? ????.

 constrestesvgnselement = (?? : ???) : svgelement => {
  return document.createElementns ( 'http://www.w3.org/2000/svg', ??);
};

??? ????? DOM? ?? ? ?, ??? ??? ?????? ???????. ??? ??? z-index? ?? ??? ???????. ? ?? ????? ?? ? ???????? ??? ???? ?? ??????. ?? ?? ???? ???? ?? ?? ????.

 const data = rawdataset.sort (
  (A : DataSetentry, B : DataSetentry) => B. value- a.Value
);

data.foreach ((d : dataSetentry, index : number) => {
  const rect : svgrecteLement = svgrectElement ( 'rect');
  const rectdimension : number = remapdatasetvaluetosvgdimension (d. value);

  rect.setattribute ( 'width',`$ {rectdimension}`);
  rect.setAttribute ( '??',`$ {rectdimension}`);
  rect.setAttribute ( 'y',`$ {svgdimension- rectdimension}`);

  svg.appendchild (rect);
});

???? ?? ???? ?????. ??? [0, 0]??? ????. ??? ?? ???? ???? ?? ????. ?? ??? ???? ??X ??? ???? 0?? ????? ??? ??? ????. y ??? ?? ??? ?????.

?? ???? ?? ???? ?? ?? ?? ???? ????? ??? ????? ???? ???? ??? ??? ??????. ???? ???? ???? ?? ??? ?. ??? ? ?? ??? ??? ?? ???? ?????. ??? ?? ??? ???, ??? ???? ????.

??? ?? CSS? ?? ??? ??? ????? ??? ??????.

? ?? ????

??? ???? ?? 7?? ??? ???? ???? ???????.

???“?? ? ??”? ?????, ??? ?? ??? ?? ????? ?? ??? ????? ? ??? ? ? ????.

??? ? ? ??? ??? ????. ??? ??? ??? L ???? ?? ?????.

??? 101

???? ??? ???? ??? ??? ???? ????. ????? ????

 <svg>
  <mask>
    
  ???>
</mask></svg>

?? ?? ?? ??? ????? ??? ????. ?? ??? ??? ??? ?????.

 <svg>
  <mask>
    
  ???>
  <rect mask="url (#mycleverlynamedmask)"> </rect>
</mask></svg>

???? ????? ???? ??? ??? ????? ???? ?? ??? ?????. ???? ???? ?? ??? ???? ?? ??? ??????.

??? ?? ???? ??? ???? ? ?? ??? ?? ??? ?????. ??? ?? ? ??? ??? ?? ???? ???? ????? ??? ????.

 <svg viewbox="0 320 320">
  <mask>
    <rect width="264" height="264" y="56" fill=""> </rect>
  ???>
  <rect width="320" height="320" y="0" fill="#264653" mask="url (#themask)"> </rect>
</mask></svg>

??? ??? ??? ?? ?? ?????. ?? ??? ??? ??? ??? ??? ? (?)? ?? ??? ?? ??? ? ? ????.

?? ???

???? ?? ?? ???? ??? ????.

?? ??? ? ???? ??? ???? ?? ?????. ??? ??? ?? ????.

?? ? ???

?? ?? ?? ???? ??? ????.

??? ???? ?? ????. ?? ??? ??? ?? ??? ?? ?????. ??? ??? ?? ? ???? ???? ???? ???? ?????. ??? ??? ?? ??? ??? ?????? ??? ??? ????.

?? ???

?? ??? ?? ? ??? ???? ??? ???.

??? ?????? ????? ????. ?????. ??? ?? ??? ??? ?? ? ??? ?? ?? ???? ? ???? ???? ?? ??? ???? ???“??? ??”? ?? ? ? ??? ?? ?? ????.

??? ??

???? ???? ?? ??? ??? ?? ??? ??? ????.

• ??? ??? ??? ??? ??? ?????.
• ??? ????? ??? ??? ?????? ??? ??? ???? ?? ? ????.

??? ???? ??? ?? ? ????? ?? HTML ??? ????? ????? ?? ??? ??? ??? ?? ? ????. ???, ??? ??? ?? ?????? ???? ? ?? svg

 <svg viewbox="0 320 320">
  <mask>
    <rect width="320" height="320" y="0" fill="???"> </rect>
    <rect width="264" height="264" y="56" fill="???"> </rect>
  ???>
  <rect width="320" height="320" y="0" fill="#264653" mask="url (#maskw320)"> </rect>
</mask></svg>

??? ??? ???? ? ??? ???? ?? ? ????. ?? ??? ?? ??? ?? ? ????. ??? ?? ???? ???? ??? ?????.

 <mask>
  <rect width="320" height="320" y="0" fill="black"> </rect>
  <rect width="264" height="264" y="56" fill="White"> </rect>
???></mask>

? ?? ? ??? ???? ?? ? ??? ?? ??? ?????. ??? ? ??? ?? ?? ??? ??? ?? ?????. ??? ?? ??? ??? ?? ?? ????.

?? ?? ???? ???? ?? ??? ???.

 <mask>
  <rect width="320" height="320" y="0" fill="White"> </rect>
  <rect width="264" height="264" y="56" fill="black"> </rect>
???></mask>

??? ??? ??? ????!

?? ? ???? ??? ???? ??? ?? ?? ???? ?? ?? ???? ? ?? ??? (z ??? ??? ? ?????) ? ??? ??????.

??? ??

?? ????? ? ?? ????? ????? ?? ???? ?? ? ????. ??? ??? ??? ?? ????? ???? ??? ?????. ??? ???? ? ?? ??? ??? ?? ??? ????.

???? REST? SVG? ?? ???? ?? ???? ?????.

 data.foreach ((d : dataSetentry, index : number) => {
  const mask : svgmaskelement = svgmaskelement = svgmaskelement ( 'mask');

  const rectdimension : number = remapdatasetvaluetosvgdimension (d. value);
  const rect : svgrecteLement = svgrectElement ( 'rect');

  rect.setattribute ( 'width',`$ {rectdimension}`);
  // ... ??? ?? ?? ...

  mask.setattribute ( 'id',`maskw $ {rectdimension.tofixed ()}`);

  ???. AppendChild (rect);

  // ... ?? ???? ??? ??? ?? ...

  svg.appendchild (???);
});

data.foreach ((d : dataSetentry, index : number) => {
    // ... ??? ???? ???? ?? ...
});

??? ???? ???? ID? ??? ? ??? ??? ??? ? ?? ?? ???? ????.

 mask.setattribute ( 'id',`maskw $ {rectdimension.tofixed ()}`); // maskw320, masw240, ...

???? ? ?? ???? ?? ? ?, ??? ??? ??? ?? ?? ?? ??? ?? ?? ??? ?? ?? ???? ??? ??? ?? ?? ??? ? ? ????. ?, ??? ?? ??? ?? ?????, ??? ?? ???? ?????. ??? ??? ? ??? ??? ? ? ????.

 // ... ??? ???? ???? ?? ?? ?? ...

Const SmallErrectIndex = ?? 1;

// ??? ?? ?? ????? ? ??? ????.
if (data [smallerRectIndex]! == ???? ??) {
  const smallerrectdimension : number = remapdatasetvaluetosvgdimension (
    ??? [smallerRectIndex] .Value
  );
  Const SmallErrect : svgrecteLement = createSvGnSelement (
    'rect'
  ) SVGRECTELEMENT??;

  // ... ??? ?? ?? ...

  ???. AppendChild (SmallErrect);
}

svg.appendchild (???);

?? ?? ?? ??? ?? ???? ??? ??? ???? ????. ??? ??? ???????.

 rect.setattribute ( 'mask',`url (#maskw $ {rectdimension.tofixed ()}); // maskw320, maskw240, ...

?? ??

??? ??? ?????! ??? ?? ????? ?? ??? ????? ??????. ??? ????? ?????. ??? ??? ???? ? ????? ? ?? ??? ??? SVG????.

? ??? ???? ???? ?? ???? ????? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!