# popd3graph

> D3 graph popper

Latest version **1.0.1** (published 2022-08-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install popd3graph
pnpm add popd3graph
yarn add popd3graph
bun add popd3graph
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-08-29 |
| First published | 2022-06-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Utkarsh Gupta |
| Maintainers | utkarsh13370 |

## Links

- npm: https://www.npmjs.com/package/popd3graph
- Repository: https://github.com/ug13370/popD3Graph
- Homepage: https://github.com/ug13370/popD3Graph#readme
- Issues: https://github.com/ug13370/popD3Graph/issues
- npm.io page: https://npm.io/package/popd3graph

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^6.0.0
- [d3-tip](https://npm.io/package/d3-tip.md) ^0.9.1
- [typescript](https://npm.io/package/typescript.md) ^4.7.3

## Recent versions

- 1.0.1 (latest) — 2022-08-29
- 1.0.0 — 2022-06-11

## README

# popd3graph

popd3graph is a typescript library to help developers to make various kinds of D3 graphs.
Current available graphs:-

1. Simple bar graph.

...many graphs are yet to come 😊.

## Installation

Use NPM package manager to install foobar.

```bash
npm install popd3graph
```

or

```bash
npm i popd3graph
```

## Usage

This library can be used in every JS supported frontends. For the sake of simplicity , I have shown it's use in AngularJS.

### 1) Simple Bar Chart

In HTML

```html
<div>
  <div #my_bar_chart></div>
</div>
```

In TS (Typescript)

```ts
import { barChart } from "popd3graph";

//Note:- I have made my bar graph in App component. Your's component can be diffrent.
export class AppComponent implements OnInit {
  //chartContainer is my selector here which selects the div written in HTML.
  @ViewChild("my_bar_chart") private chartContainer: ElementRef;

  ngOnInit(): void {

    // Use setTimeout so that the HTML renders first and then bar chart renders. If not done it might give errors.
    setTimeout(() => {
      // Call your barChart
      barChart(
        this.chartContainer,                                    // Selector
        { height: 200, width: 400 },                            // SVG Dimensions ( Format: {height: number , width: number} )
        { top: 10, right: 10, bottom: 40, left: 50 },           // Margins ( Format: {top: number, right: number, bottom: number, left: number} )
        [                                                       // Data ( Format: {key: string, val: number, color:string}[] )
          { key: "Apples", val: 10, color: "#000000" },
          { key: "Oranges", val: 20, color: "#000000" },
          { key: "Mangoes", val: 5, color: "#000000" },
          { key: "Peaches", val: 70, color: "#000000" },
        ],
        {          // X Axis Label (Format : {text: string, deltaX: number, deltaY: number, fontSize: number, fontWeight:number, textColor: string})
          text: "Fruits",                                      
          deltaX: 0,                                            // Variation of x value from the middle.
          deltaY: 25,                                           // Variation of y value from the xAxis.
          fontSize: 10,
          fontWeight: 0,
          textColor: "#000000",
        },
        { fontSize: 7, fontWeight: 0, textColor: "#000000" },  // X ticks configurations.
        {          // Y Axis Label (Format : {text: string, deltaX: number, deltaY: number, fontSize: number, fontWeight:number, textColor: string})
          text: "Fruits count",
          deltaX: -20,                                          
          deltaY: 0,                                            .
          fontSize: 10,
          fontWeight: 0,
          textColor: "#000000",
        },
        { fontSize: 7, fontWeight: 0, textColor: "#000000" },   // Y ticks configurations.
    {                                                           // Tooltip configurations.
          text: "${key} has value ${val}",
          color: "#FFFFFF",
          backgroundColor: "#000000",
        }
      );
    }, 0);
  }
}
```

Tip:- Copy the bar chart calling function mentioned in ts file and then do the tweaks you require.

---
_Source: https://npm.io/package/popd3graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._