This is a project on Stencil using D3js library for creating an Interactive Network Graph with two different components; one graph based on SVG element and other based on Canvas.
Data is provided from private source (BuscoExtra) where the identifiers and sensitive data that may lead to individual identification has been removed or changed to randomized values.
Dataset is compounded of two different data structures:
- Nodes
{
"id": number,
"type": string,
"appearances": number
}- Links
{
"id": number,
"source": number,
"target": number,
"interactions": number
}Where appearances in Nodes represents how many times that node appears in Links. Also, interactions in Links is the number of times that relation between source and target has existed. You may find raw datasets here.
Clone this repository and move to root directory of the project and run
npm install
npm run start
And a new tab should be opened on the browser showing both componentes of the project.
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.