From 34837e62b3081905895bf775dc4724d4d8af182f Mon Sep 17 00:00:00 2001
From: Amir Hachaichi <amir.hac@outlook.com>
Date: Wed, 2 Aug 2023 11:02:25 +0200
Subject: [PATCH] ready to publish
---
README.md | 34 ++++++++++++++++++--
index.js | 92 +++++++++++++++++++++++++++++++++++++++++++++++++------
2 files changed, 113 insertions(+), 13 deletions(-)
diff --git a/README.md b/README.md
index 4cf462d..e43bcb2 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,42 @@
# JSON to SVG
-Generate SVG from JSON
+Generates SVG from JSON
+Installation: 'npm i json-to-svg'
```javascript
+import svgen from 'json-to-svg';
+
import * as d3 from "d3";
-const { svgen } = require('json-to-svg')
+console.log(
+
+ svgen(d3,{"target":"histogram","color":"blue","barwidth":20,"intergap":5,"dataset":[25,67,45,19,89],"size":2,"animate":false})
+
+)
+
+```
+
+## HTTP server
+
+```javascript
+
+import svgen from 'json-to-svg'
+
+import * as d3 from "d3";
+
+import { webpage, getHtml } from 'htwrite'
+
+import http from 'http'
+
+let xml = svgen(d3,{"target":"histogram","color":"blue","barwidth":20,"intergap":5,"dataset":[25,67,45,19,89],"size":2,"animate":false})
+
+http.createServer(function (req, res) {
+ res.write(webpage("demo",'',xml));
+ res.end();
+ }).listen(8080);
-console.log( svgen(d3,{"target":"histogram","color":"blue","barwidth":20,"intergap":5,"dataset":[25,67,45,19,89],"size":2,"animate":true}) )
+console.log(`server started at http://localhost:8080`)
```
diff --git a/index.js b/index.js
index 53df5f9..5a879df 100644
--- a/index.js
+++ b/index.js
@@ -85,25 +85,97 @@ const svgen = (d3,jsondata={})=>{
}
else if( jsondata?.target === 'histogram'){
+ let size = ( jsondata.hasOwnProperty('size') ) ? parseFloat(jsondata.size) : 1;
+
const dmax = d3.max(jsondata?.dataset);
+ let animate = ( jsondata.hasOwnProperty('animate') ) ? jsondata.animate : false;
+
+ if(animate){
+
+ function enterAnim(enter){
+
+ enter.append('rect')
+ .attr('x', (d, i) => i * (jsondata?.intergap+jsondata?.barwidth) * size)
+ .attr('width', jsondata?.barwidth*size)
+ .attr("y", d =>(dmax - d)*size)
+ .attr("height", d => d*size)
+ .attr("class", 'bar')
+
+
+ .call( rect =>
+ rect.append('animate')
+ .attr('attributeName', "height")
+ .attr('values', (d)=> `0;1;${ d*size }` )
+ .attr('keyTimes', (d,i)=> `0;${Math.trunc(1000*(1-(1/(3*i+3))))/1000};1` ) // ="0; 0.25; 0.5; 0.75; 1"
+ .attr('dur', (d,i)=>`${i*2+2}s`)
+ .attr('repeatcount', 1)
+
+ )
+
+ .call( rect =>
+ rect.append('animate')
+ .attr('attributeName', "y")
+ .attr('values', (d)=> `${dmax*size};${dmax*size};${ (dmax - d)*size }` )
+ .attr('keyTimes', (d,i)=> `0;${Math.trunc(1000*(1-(1/(3*i+3))))/1000};1` )
+ .attr('dur', (d,i)=>`${i*2+2}s`)
+ .attr('repeatcount', 1)
+ )
+ }
+
+ svg.append('g')
+ .attr('fill', jsondata?.color)
+ .attr('transform', `translate(${200/size},${200/size})`)
+ .selectAll('rect')
+ .data(jsondata?.dataset)
+ .join(
+ enter=>enterAnim(enter)
+ )
+ /* .selectAll('animate')
+ .data([d => d], (h,i)=>{ return { "begin":i, "height":h} } ) //
+ .join(
+ enter=>enter.append('animate')
+ .attr('attributeName', "height")
+ .attr('values', (d)=> `0;${ d.height }` ) // `0;50` function(d){ return `0;${ d }` }
+ .attr('begin', d => `2s` ) // `${d.begin}s` () =>{ indx++; `${ indx }s`; }
+ .attr('dur', "1s")
+ .attr('repeatcount', 1)
+ ) */
+ }
+ else{
+
+ svg.append('g')
+ .attr('fill', jsondata?.color)
+ .attr('transform', `translate(${200/size},${200/size})`)
+ .selectAll('rect')
+ .data(jsondata?.dataset)
+ .join('rect')
+ .attr('x', (d, i) => i * (jsondata?.intergap+jsondata?.barwidth) * size)
+ .attr('width', jsondata?.barwidth*size)
+ .attr("y", d =>(dmax - d)*size)
+ .attr("height", d => d*size)
+ }
+
svg.append('g')
- .attr('fill', jsondata?.color)
- .attr('transform', `translate(200,200)`)
- .selectAll('rect')
- .data(jsondata?.dataset)
- .join('rect')
- .attr('x', (d, i) => i * (jsondata?.intergap+jsondata?.barwidth))
- .attr('width', jsondata?.barwidth)
- .attr("y", d =>(dmax - d))
- .attr("height", d => d)
+ .attr('fill', jsondata?.color)
+ .attr('transform', `translate(${200/size},${200/size})`)
+ .selectAll('text')
+ .data(jsondata?.dataset)
+ .join('text')
+ .attr('x', (d, i) => i * (jsondata?.intergap+jsondata?.barwidth) * size)
+ .attr("y", d =>(dmax - d)*size - 20)
+ .style("font-size", 10+size*2)
+ .style('font-family', 'sans-serif')
+ .text(d => d)
}
+
console.log(svg.node().outerHTML)
return svg.node().outerHTML;
}
-module.exports = { svgen }
+
+module.exports = svgen;
\ No newline at end of file