Add Content and Data category with 10 projects (081-090)

Author: mmrahmanbappi

11-content-data/081-data-table/README.md

@@ -0,0 +1,69 @@
+# Data Table in JavaScript (Free Project)
+
+![Data Table JavaScript project preview](preview.png)
+
+**Live demo:** https://mmrahmanbappi.github.io/vanilla-javascript-projects/11-content-data/081-data-table/demo.html
+**Details and code:** https://mmrahmanbappi.github.io/vanilla-javascript-projects/11-content-data/081-data-table/
+
+Free data table in plain JavaScript. Click headers to sort, search every column, filter by department, choose page size, select rows and export the results to a CSV file.
+
+## What is the Data Table?
+
+A table of 64 team members. Click any header to sort up or down, search across every column with matches highlighted, and filter by department.
+
+Choose how many rows per page, move between pages, tick rows or a whole page and export either the selection or all filtered rows as a CSV file.
+
+## What it does
+
+- Sortable headers with aria-sort
+- Search across all columns with highlights
+- Department filter and page size
+- Pagination with smart page numbers
+- Row selection and CSV export
+
+## How it works
+
+1. **Filter, sort, slice.** Every change runs the same pipeline: filter by search and department, sort by the chosen column, then take one page.
+2. **Sort like a human.** Intl.Collator with numeric set compares names in the right language order and sorts Item 2 before Item 10.
+3. **Export what you see.** CSV is built from the filtered rows, or only the ticked ones, then downloaded through a Blob link. A BOM makes Excel read accents correctly.
+
+## The key JavaScript
+
+```js
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+const view = data
+  .filter((r) => Object.values(r).join(" ").toLowerCase().includes(query))
+  .sort((a, b) => collator.compare(a[key], b[key]) * dir)
+  .slice((page - 1) * size, page * size);
+
+const csv = [headers, ...rows.map((r) => keys.map((k) => r[k]))].map((r) => r.join(",")).join("\n");
+link.href = URL.createObjectURL(new Blob(["\ufeff" + csv], { type: "text/csv" }));
+```
+
+## Browser support
+
+Works in all modern browsers.
+
+## How to use
+
+1. Download `demo.html` from this folder.
+2. Serve the folder with `npx serve .` or `python -m http.server`, then open it in your browser.
+3. Change the text and colors, and upload it anywhere. One file, no build step.
+
+## Questions
+
+**How many rows can it handle?**
+
+A few thousand rows sort and search instantly. For more, load pages from your server with the same sort and search values.
+
+**Why add a BOM to the CSV?**
+
+Excel needs it to read accented letters like ü correctly. Other apps ignore it.
+
+**Is the sticky header accessible?**
+
+Yes. The headers are real buttons inside th elements, and aria-sort tells screen readers the sort direction.
+
+## License
+
+MIT. Free for personal and commercial use.

11-content-data/081-data-table/demo.html

@@ -0,0 +1,69 @@
+# SVG Charts Kit in JavaScript (Free Project)
+
+![SVG Charts Kit JavaScript project preview](preview.png)
+
+**Live demo:** https://mmrahmanbappi.github.io/vanilla-javascript-projects/11-content-data/082-svg-charts-kit/demo.html
+**Details and code:** https://mmrahmanbappi.github.io/vanilla-javascript-projects/11-content-data/082-svg-charts-kit/
+
+Free SVG charts in plain JavaScript. Line, bar and donut charts that scale to any width, with tooltips, keyboard focus, series toggles, animation and an accessible data table.
+
+## What is the SVG Charts Kit?
+
+A small dashboard with three hand-made SVG charts: monthly revenue as a line chart with two series, orders by weekday as bars, and sales by channel as a donut.
+
+Hover or tab to any point for a tooltip, switch series on and off, shuffle the data to see the charts redraw with animation, and open the data as a plain table.
+
+## What it does
+
+- Line chart with area fill and two series
+- Bar chart with the best day highlighted
+- Donut chart with a total in the middle
+- Tooltips on hover and keyboard focus
+- Legend toggles, animation and data table
+
+## How it works
+
+1. **Scale data to pixels.** Each chart maps values to a viewBox with two tiny functions, x(i) and y(v). The viewBox makes the chart scale to any width.
+2. **Draw with paths.** The line is one path of M and L commands. Bars are rects. The donut uses circles with stroke-dasharray slices.
+3. **Tooltips for mouse and keyboard.** Every point is a focusable group with a label. Hover or focus shows the same tooltip, and screen readers read the label.
+
+## The key JavaScript
+
+```js
+const x = (i) => pad + i * (width - pad * 2) / (values.length - 1);
+const y = (v) => height - pad - (v / max) * (height - pad * 2);
+const d = values.map((v, i) => (i ? "L" : "M") + x(i) + " " + y(v)).join(" ");
+svg.innerHTML = `<path d="${d}" fill="none" stroke="#7C3AED" stroke-width="3"/>`;
+
+// donut slice
+const len = (value / total) * 2 * Math.PI * r;
+circle.setAttribute("stroke-dasharray", `${len} ${circumference - len}`);
+```
+
+## Browser support
+
+Works in all modern browsers.
+
+## How to use
+
+1. Download `demo.html` from this folder.
+2. Serve the folder with `npx serve .` or `python -m http.server`, then open it in your browser.
+3. Change the text and colors, and upload it anywhere. One file, no build step.
+
+## Questions
+
+**When should I use a chart library instead?**
+
+For zooming, huge datasets or many chart types. For a few simple charts, plain SVG is lighter and easier to style.
+
+**Are SVG charts accessible?**
+
+They can be. Here every point has a label, points are focusable and the data is also available as a table.
+
+**How do I use my own data?**
+
+Replace the generated arrays with numbers from your API and call the draw functions again.
+
+## License
+
+MIT. Free for personal and commercial use.