d3-node / d3node-linechart Goto Github PK

View Code? Open in Web Editor NEW

22.0 22.0 22.0 497 KB

LineChart generator using D3-Node

License: MIT License

JavaScript 100.00%

d3 d3-node linechart visualization

d3node-linechart's Introduction

D3-Node

Server-side D3 with ease

Tested on Nodejs v10 & up

see examples >

Why?

Performance: pre-rendering allows offloading data processing, and network overhead
Take advantage of the entire ecosystem: npmjs.com
Static rendering of Data-Driven Documents (D3.js)
Portable SVG with embedded stylesheets
Easily adapt examples from bl.ocks.org

Basic usage:

Create a SVG

 const D3Node = require('d3-node')
 const d3n = new D3Node()      // initializes D3 with container element
 d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
 d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>

Advanced usage

Setting container & insertion point via selector

 const options = { selector: '#chart', container: '<div id="container"><div id="chart"></div></div>' }
 const d3n = new D3Node(options) // initializes D3 with container element
 const d3 = d3n.d3
 d3.select(d3n.document.querySelector('#chart')).append('span') // insert span tag into #chart
 d3n.html()   // output: <html><body><div id="container"><div id="chart"><span></span></div></div></body></html>
 d3n.chartHTML()   // output: <div id="chart"><span></span></div>

Inline SVG styles

 const d3n = new D3Node({styles:'.test {fill:#000;}'})
 d3n.createSVG().append('g')
 d3n.svgString()

Output

<svg xmlns="http://www.w3.org/2000/svg">
   <defs>
     <style type="text/css"><![CDATA[ .test{fill:#000;} ]]></style>
   </defs>
   <g></g>
<svg>

Create a canvas (for generating a png)

 const canvasModule = require('canvas'); // supports node-canvas v1 & v2.x
 const d3n = new D3Node({ canvasModule }); // pass it node-canvas
 const canvas = d3n.createCanvas(960, 500);
 const context = canvas.getContext('2d');
 // draw on your canvas, then output canvas to png
 canvas.pngStream().pipe(fs.createWriteStream('output.png'));

Run Tests:

$ npm test

TODOs:

Add more examples: (remote data, world map)
Create Gulp task
Add option to inject css/js into html output

d3node-linechart's People

Contributors

Stargazers

Watchers

d3node-linechart's Issues

Missing png/jpg files as output

Hi,
I'm not sure if something is missing on my side, but as output I receive only svg and html files:
output(./report_chart, d3nLine({data: someData, isCurve: false}), { width: 960, height: 550 });

I'm using: "d3node-linechart":"^0.1.2"

Support for 2-line charts

It is not actually an issue, I just want to know if this lib supports 2-line charts?

Example I have data in this format:

{
   data: [
         {
             Range: 'Jun 2018 - Jul 2018',
             ParentValue: 22,
             ChildValue: 32
         },
         //...
   ]
}

How can d3node-linechart generate a chart containing 2 lines corresponding to ParentValue and Child Value? (xAxis is the Range, of course).

Thanks.

make all variables to options

like https://github.com/geekplux/d3-trial-line/blob/master/index.js, but better

@geekplux
When trying to add a simple legend to my graph it throws the following error:
TypeError: Cannot read property 'apply' of undefined
From the following location: d3-selection/build/d3-selection.js:500:11


svg.append('g')
        .attr('class','legend')
        .attr('transform','translate(50,30)')
	.style('font-size','12px')
	.call(d3.legend)

Any ideas what's going on?

broken example?

im running this code

const data = _.map(dataset, (i) => {
    return {key: i, value: i}
})
output('./output', d3nLine({data: gen(20)}));

and the output is empty files,
what am i doing wrong?

date displayed in integers

How to display the date (x-axis) as date instead of integers? Even the example shows it in integers.

Multi lines

Does this have support for multiple lines in the graph?

x-axis to support toISOString?

Thanks for publishing a simple d3 example, as I have been doing a project that can benefit from server side chart rendering.

I was looking at the library source, and as I am new to d3 it seemed one had to setup the d3.timeParse to get proper date support on the x-axis.

While I can generate string labels instead, in seems to lib only accepts numeric key types.
I wanted to add labels with:
moment(myUTCTime).toISOString()

Would you recommend I use this method instead?
https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218

Cheers,
J

I saw your advice to others:
#4 (comment)

And was able to rotate the labels, but it is unclear how d3 needs to be setup to parse date+Times.

That patched area of index.js I made was in:

const lineChart = d3.line()
.x(d => xScale(d.key)) //I assumed your advice to patch is here, but it was unclear how it renders the labels
.y(d => yScale(d.value));

if (_isCurve) lineChart.curve(d3.curveBasis);

// g.append('g')
// .attr('transform', translate(0, ${height}))
// .call(xAxis);

//add the x Axis with a -65deg rotation to reduce marker label overlap
svg.append("g")
.attr("class", "x axis")
.attr('transform', translate(0,${height}))
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");

g.append('g').call(yAxis);

g.append('g')
.attr('fill', 'none')
.attr('stroke-width', _lineWidth)
.selectAll('path')
.data(allKeys ? data : [data])
.enter().append("path")
.attr('stroke', (d, i) => i < _lineColors.length ? _lineColors[i] : _lineColor)
.attr('d', lineChart);