https://github.com/lilanga/handwritten-graph
Handwritten style line graph library powered by d3
https://github.com/lilanga/handwritten-graph
d3 handwritten javascript line-graph multi-series-chart
Last synced: about 2 months ago
JSON representation
Handwritten style line graph library powered by d3
- Host: GitHub
- URL: https://github.com/lilanga/handwritten-graph
- Owner: Lilanga
- License: mit
- Created: 2025-03-18T10:56:10.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-04-03T13:20:09.000Z (2 months ago)
- Last Synced: 2025-04-13T03:17:46.527Z (about 2 months ago)
- Topics: d3, handwritten, javascript, line-graph, multi-series-chart
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/handwritten-linegraph
- Size: 235 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Handwritten Graph Library
## Overview
A simple JavaScript library to create hand-drawn style charts inspired by comics and sketches. Built with D3.js, this library provides an easy-to-use API to generate fun, informal-looking graphs with customizable colors, labels, and data points.
### Example
Here’s some example of a graph generated with this library:
#### Line charts
#### Pie charts
## Features
- Hand-drawn/sketched visual style
- Line graphs with multi-series support
- Pie charts with interactive segments
- Donut chart option
- Directional scribble and oil paint texture fill patterns
- Tooltips with hover effects
- Legend customization
- Configurable hand-drawn effect
## Installation
Install via npm:
```bash
npm install handwritten-graphs
```
Alternatively, you can use the library via CDN.
```html
```
## Usage
### Line Graph
```javascript
// Data format for line graphs
const lineData = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "Revenue",
data: [65, 59, 80, 81, 56, 55, 40],
lineColor: "rgb(75, 192, 192)"
},
{
label: "Expenses",
data: [30, 45, 51, 60, 48, 40, 35],
lineColor: "rgb(255, 99, 132)"
}
]
};
// Create a line graph
HandwrittenGraph.createGraph("#graph-container", lineData, {
width: 800,
height: 400,
handDrawnEffect: true
});
```
### Pie Chart
```javascript
// Data format for pie charts
const pieData = [
{ label: "Marketing", value: 30, color: "#FF6384" },
{ label: "Development", value: 45, color: "#36A2EB" },
{ label: "Research", value: 15, color: "#FFCE56" },
{ label: "Administration", value: 10, color: "#4BC0C0" }
];
// Create a pie chart
HandwrittenGraph.createPieChart("#pie-chart-container", pieData);
// Create a donut chart
HandwrittenGraph.createPieChart("#donut-chart-container", pieData, {
innerRadius: 80 // Setting innerRadius > 0 creates a donut chart
});
// Create a pie chart with directional scribble fills
HandwrittenGraph.createPieChart("#scribble-pie-chart", pieData, {
useScribbleFill: true,
fillStyle: 'directional' // Use directional scribble lines
});
// Create a pie chart with oil paint texture fills (no scribble lines)
HandwrittenGraph.createPieChart("#oilpaint-pie-chart", pieData, {
useScribbleFill: true,
fillStyle: 'oilpaint' // Use rich layered paint texture effect
});
```
## Configuration Options
### Line Graph Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| width | Number | 960 | Chart width in pixels |
| height | Number | 500 | Chart height in pixels |
| margin | Object | { top: 10, right: 10, bottom: 40, left: 50 } | Chart margins |
| jitter | Number | 1.9 | Amount of jitter for hand-drawn effect |
| lineColor | String | 'steelblue' | Default line color (can be overridden in dataset) |
| pointRadius | Number | 4 | Radius of data points |
| fontFamily | String | 'xkcd' | Font family for text elements |
| handDrawnEffect | Boolean | true | Enable/disable hand-drawn styling |
| legendBorder | Boolean | false | Show border around legend |
| Jitter | Number | 2 | Amount of jitter for hand-drawn effect |
| valueFormat | Function | d3.format('.1f') | Format function for values in tooltip |
## Browser Support
This library works in all modern browsers that support SVG and ES6.
## Development
### Setup
To install dependencies:
```sh
npm install
```
### Building the Project
To build the project:
```sh
npm run build
```
## License
MIT