Code cleanup

CHANGELOG.md

@@ -5,13 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2026-06-03
+### Added
+- New **Bubble chart** component
+- New **Scatter chart** component
+### Changed
+- Documentation updates
+- Website improvements
+
 ## [1.0.1] - 2023-05-04
 ### Changed
 - Updated the default color values.
 - Updated the default values of the height, width and responsive properties.
 - Updated the pointStyle behaviour without affecting the pointColor.
 ### Added
-- New props **pointInnerColor**, **dotRadius** addedd specific to "circle" and "circle-dot" point styles.
+- New props **pointInnerColor**, **dotRadius** added specific to "circle" and "circle-dot" point styles.
 
 ## [1.0.0] - 2023-04-08
 ### Added

README.md

@@ -1,5 +1,19 @@
 <p align="center">
-    <img src="/assets/logo.png" alt="" width="330" height="" />
+    <img src="./assets/logo.png" alt="" width="330" height="" />
+</p>
+<h2 align="center">
+    CSS Charts Built Using a Single DIV
+</h2>
+
+<p align="center">
+    A frontend engineering experiment that explores how far modern CSS can be pushed to render charts without SVG, Canvas, or image assets.
+</p>
+
+<p align="center">
+  <a href="https://singledivui.com">Website</a> •
+  <a href="https://singledivui.com/demos">Demos</a> •
+  <a href="https://singledivui.com/docs">Documentation</a> •
+  <a href="https://www.npmjs.com/package/singledivui">npm</a>
 </p>
 
 <p align="center">
@@ -11,142 +25,117 @@
   </a>
 </p>
 
-<p align="center">
-  <a href="https://singledivui.com"> https://singledivui.com </a> <br />
-</p>
+<!-- --- -->
 
-<p align="center">
-  A list of Chart components that made with a <b>single div</b> element.
-</p>
-
-<a href="https://singledivui.com">
-    <img src="/assets/showcase.png" alt="singledivui - Line chart, Bar chart, Area chart" />
-</a>
+![SingleDivUI Showcase](./assets/showcase-image.png)
 
 ---
 
-## Intro
-The SingleDivUI is a simple and smallest UI components library which includes Line chart, Bar chart, Area chart (and more coming on). Here the complete component was made up of with a single DIV element alone, with the CSS capabilities. There is no images, SVG or Canvas nothing used.
+## The Challenge
 
-<!-- toc -->
-## Table of contents
+> Some projects start with a requirement.
+>
+> This one started with a constraint.
 
-- [Getting started](#getting-started)
-- [Quickstart](#quickstart)
-- [APIs](#apis)
-- [Demos](#demos)
-- [Screenshots](#screenshots)
-- [Facts](#facts)
-- [License](#license)
+SingleDivUI explores a simple but unconventional idea: building charts using only a single HTML element and modern CSS.
 
-<!-- tocstop -->
----
+The goal was never to replace existing chart libraries. Rather, it was an opportunity to understand browser rendering capabilities at a deeper level, push CSS beyond its conventional use cases, and uncover new possibilities in UI engineering.
+
+The result is a collection of chart components rendered entirely through CSS and a single root DIV element.
+
+## Design Constraints
+
+To make the challenge meaningful, the project was built around a set of deliberate constraints:
+
+- A single root DIV element serves as the foundation for every chart.
+- No SVG, Canvas, or image-based rendering is used.
+- Charts remain responsive across different viewport sizes.
+- Visual customization is supported through configuration options, similar to traditional charting solutions.
+- Rendering is designed to remain visually consistent across supported browsers.
+
+These constraints transformed a simple charting exercise into a study of creative problem-solving, unconventional rendering techniques, and the practical capabilities of modern CSS.
 
-## Getting started
+## Techniques Explored
 
-Refer the [Getting started](https://singledivui.com/docs/getting-started) documentation for the detailed information.
+Building charts with a single HTML element required combining several CSS techniques in unconventional ways:
 
-## Quickstart
+- CSS Variables
+- Linear, Radial, and Conic Gradients
+- Multiple Background Layers
+- Pseudo Elements
+- CSS Calculations
+- Transforms
 
-The simple and easiest way to try and start using **SingleDivUI's** Chart component is using the editable samples from **CodePen** or **StackBlitz**. Try the below basic chart,
-* demo based on **npm**
-    * <a href="https://stackblitz.com/edit/singledivui-v1"> StackBlitz Demo </a>
-* demo based on CDN
-    * <a href="https://codepen.io/soundar24/pen/zYmGPaz"> CodePen Demo </a>
+Many of these techniques are commonly used for styling interfaces. In SingleDivUI, they are repurposed as building blocks for rendering chart elements, data points, grid lines, labels, and visual effects.
 
+## The Result
 
-Just fork the above samples and try to edit yourself for more customization. Also refer the [API Reference](/docs/api-reference) document to know about the available options.
+The outcome is more than a collection of charts.
 
-## APIs
+SingleDivUI demonstrates how a set of deliberate constraints, combined with modern CSS capabilities, can produce a flexible charting system.
 
-Here are the complete list of APIs from the Chart component.
+The project currently supports:
 
-Please note that these are the all available API's with their default values. So to create a basic Chart you don't need to include all of these, for the customization only these needed.
+- Line Charts
+- Bar Charts
+- Area Charts
+- Bubble Charts
+- Scatter Charts
 
-Refer the [Usage](https://singledivui.com/docs/getting-started#usage) section for the basic Chart creation, also refer the [API Reference](https://singledivui.com/docs/api-reference) for the detailed information of these APIs.
+Each visualization is built upon the same underlying philosophy: using CSS not only as a styling tool, but as a rendering medium.
+
+## Interactive Demos
+
+The best way to understand SingleDivUI is to see it in action.
+
+The demo collection showcases different chart types, rendering techniques, and customization possibilities through a series of interactive examples.
+
+Whether you're evaluating the library or simply curious about the implementation techniques, the demos provide a practical way to explore the project.
+
+Explore the demos: https://singledivui.com/demos
+
+## Quick Start
+
+Creating a chart requires only a few lines of code.
+
+### Installation
+
+```bash
+npm install singledivui
+```
+
+### Basic Example
+
+```javascript
+import { Chart } from 'singledivui';
+import 'singledivui/dist/singledivui.min.css';
+
+new Chart('#chart', {
+    type: 'line',
 
-```JavaScript
-new Chart('#chart',  {
-    // type should be 'line', 'bar' or 'area'
-    type: null,
     data: {
-        labels: [],
-
+        labels: ['Jan', 'Feb', 'Mar'],
         series: {
-            points: [],
-
-            // ------ for line-chart related customizations ------
-            lineColor: null,
-            lineSize: null,
-            pointRadius: null,
-            pointColor: null,
-            pointBorderWidth: null,
-            pointBorderColor: null,
-            pointStyle: null,
-            pointInnerColor: null,
-            dotRadius: null,
-
-            // ------ for bar-chart related customizations ------
-            barSize: null,
-            barColor: null,
-
-            // ------ for area-chart related customizations ------
-            areaColor: null
-        },
-    },
-
-    graphSettings: {
-        labelFontSize: '11px',
-        labelFontFamily: 'Verdana, Arial, sans-serif',
-        gridLineColor: null,
-        gridLineSize: null,
-        axisLineColor: null,
-        axisLineSize: null,
-        labelColor: null,
-        labelDistance: null,
-
-        xAxis: {
-            verticalLabel: false,
-            padding: [0, 0],
-            labelFormatter: null
-        },
-        yAxis: {
-            maxTicks: 10,
-            startFromZero: false,
-            labelFormatter: null,
-
-            customScale: {
-                min: null,
-                max: null,
-                interval: null
-            }
+            points: [10, 20, 15]
         }
-    },
-
-    height: 260,
-    width: '100%',
-    responsive: true,
-    stylesAppendTo: 'head'
+    }
 });
 ```
 
-## Demos
-
-Refer the [Demos](https://singledivui.com/demos/line-chart/basic) section to check out multiple demo samples and customizations.
+Despite the rendering constraints described earlier, the API is intentionally designed to remain simple and familiar to developers who have worked with traditional charting libraries.
 
-## Screenshots
+For additional examples, customization options, and API documentation, visit the resources below.
 
-![singledivui - line chart, bar chart, area chart - colourful appearances](/assets/Screenshot-1.png)
+## Learn More
 
-![singledivui - line chart, bar chart, area chart - customization](/assets/Screenshot-2.png)
-
-## Facts
-- The complete rendering was done by CSS, and inside a single div alone
-- The size of the library is very small with no dependencies
-- No built-in interactions, based on the requirement it can be added in the near future
-- No animation, but still CSS transition will works on dynamic data update
-- Inspired by Lynn Fisher's CSS drawing with a <a href="https://singlediv.com/">single div</a>
+- [Interactive Demos](https://singledivui.com/demos)
+- [Documentation](https://singledivui.com/docs)
+- [API Reference](https://singledivui.com/docs/api-reference)
+- [StackBlitz Example](https://stackblitz.com/edit/singledivui-v1)
+- [CodePen Example](https://codepen.io/soundar24/pen/zYmGPaz)
 
 ## License
 
-[MIT](https://github.com/soundar24/SingleDivUI/blob/main/LICENSE)
+SingleDivUI is released under the MIT License.
+
+See the [LICENSE](./LICENSE) file for details.