d3-node / D3 Node
Server-side D3 for static chart/map generation ✨📊
Stars: ✭ 606
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to D3 Node
Semiotic
A data visualization framework combining React & D3
Stars: ✭ 2,207 (+264.19%)
Mutual labels: data-visualization, d3
Keen Dataviz.js
Data Visualization Charting Library
Stars: ✭ 215 (-64.52%)
Mutual labels: data-visualization, d3
Electricitymap Contrib
A real-time visualisation of the CO2 emissions of electricity consumption
Stars: ✭ 2,138 (+252.81%)
Mutual labels: data-visualization, d3
Victory Chart
Chart Component for Victory
Stars: ✭ 286 (-52.81%)
Mutual labels: data-visualization, d3
Victory Native
victory components for react native
Stars: ✭ 2,013 (+232.18%)
Mutual labels: data-visualization, d3
Historical Ranking Data Visualization Based On D3.js
这是一个数据可视化项目，能够将历史数据排名转化为动态柱状图图表
Stars: ✭ 4,649 (+667.16%)
Mutual labels: data-visualization, d3
Floweaver
View flow data as Sankey diagrams
Stars: ✭ 266 (-56.11%)
Mutual labels: data-visualization, d3
Plotly Graphing Library For Matlab
Plotly Graphing Library for MATLAB®
Stars: ✭ 234 (-61.39%)
Mutual labels: data-visualization, d3
Just Dashboard
📊 📋 Dashboards using YAML or JSON files
Stars: ✭ 1,511 (+149.34%)
Mutual labels: data-visualization, d3
Py d3
D3 block magic for Jupyter notebook.
Stars: ✭ 428 (-29.37%)
Mutual labels: data-visualization, d3
Logation
Analyse your NGINX access logs and create beautiful maps of the locations from which people access your service.
Stars: ✭ 99 (-83.66%)
Mutual labels: data-visualization, d3
Calendar Heatmap
A d3 heatmap for representing time series data similar to github's contribution chart
Stars: ✭ 1,985 (+227.56%)
Mutual labels: data-visualization, d3
C3
📊 A D3-based reusable chart library
Stars: ✭ 9,163 (+1412.05%)
Mutual labels: data-visualization, d3
Plotly.js
Open-source JavaScript charting library behind Plotly and Dash
Stars: ✭ 14,268 (+2254.46%)
Mutual labels: data-visualization, d3
Dex
Dex : The Data Explorer -- A data visualization tool written in Java/Groovy/JavaFX capable of powerful ETL and publishing web visualizations.
Stars: ✭ 1,238 (+104.29%)
Mutual labels: data-visualization, d3
Victory
A collection of composable React components for building interactive data visualizations
Stars: ✭ 9,248 (+1426.07%)
Mutual labels: data-visualization, d3
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 215 (-64.52%)
Mutual labels: data-visualization, d3
Britecharts
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
Stars: ✭ 3,688 (+508.58%)
Mutual labels: data-visualization, d3
D3-Node
Server-side D3 with ease
Supports Node 8+
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'));
See examples for more...
Run Tests:
$ npm test
TODOs:
- Add more examples: (remote data, world map)
- Create Gulp task
- Add option to inject css/js into html output
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].