I want to build learning paths in a simple way and visualize them, the way Neo4j or D3.js do it. Example: I have a set of learning resources that can be connected depending on certain criteria. Thus, it would be possible for learners to start from various starting points and have learning paths depending on this starting point.\n\n

Following this, I need two things: first, a UI that lets me connect entries from a database so that a linear view, like a path, comes out. And second, a bird's eye view on the various paths like a force-directed graph that stems from the linear connections I made.","private":false,"viewCount":101274,"publishedAt":"2020-06-25T19:24:23Z","upvotesCount":6,"decisionType":"getAdvice","fromTools":[],"toTools":[],"subjectTools":[{"type":"id","generated":false,"id":"Tool:101231774052320080","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231774048876541","typename":"Tool"}],"services":[{"type":"id","generated":false,"id":"Tool:101231774052320080","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231774048876541","typename":"Tool"}],"topics":[],"__typename":"StackDecision"},"Tool:101231774048876541":{"id":"101231774048876541","name":"Neo4j","slug":"neo4j","title":"The world’s leading Graph Database","verified":true,"imageUrl":"https://img.stackshare.io/service/1482/FbkjM42a.png","canonicalUrl":"/neo4j","path":"/neo4j","votes":351,"fans":1770,"stacks":1210,"followingTool":false,"followContext":null,"__typename":"Tool","thumbUrl":"https://img.stackshare.io/service/1482/thumb_FbkjM42a.png"},"$Tool:101231774052320080.stackDecisions({\"first\":6}).edges.0":{"node":{"type":"id","generated":false,"id":"StackDecision:104406257758878125","typename":"StackDecision"},"__typename":"StackDecisionEdge"},"User:105101943718833355":{"id":"105101943718833355","username":"hala2030","title":null,"companyName":null,"imageUrl":"https://img.stackshare.io/user/775025/default_3695e30d3337f46123bb89af0d22b2c708720155.png","thumbUrl":"https://img.stackshare.io/user/775025/thumb_3695e30d3337f46123bb89af0d22b2c708720155.png","displayName":"hala2030","__typename":"User"},"StackDecision:105101995757656618":{"user":{"type":"id","generated":false,"id":"User:105101943718833355","typename":"User"},"company":null,"link":null,"publicId":"105101995757656618","id":"105101995757656618","htmlContent":"

I'm a student, and I have a project to build an application (Visual analytics tool) that takes a Microsoft Excel file, cleans the data, and visualizes it. Also, the app should allow the user to filter and interact with it.\n\n

1- should I make it desktop application or web application? : I'm leaning toward (desktop)\n\n

2- D3.js OR Python?\n\n

3- better excel or CSV?\n\n

I'm a beginner \nInspiration for interaction and look of the app: eventflow application.","private":false,"viewCount":379835,"publishedAt":"2020-10-26T16:19:43Z","upvotesCount":5,"decisionType":"getAdvice","fromTools":[],"toTools":[],"subjectTools":[{"type":"id","generated":false,"id":"Tool:101231774052320080","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231773837179153","typename":"Tool"}],"services":[{"type":"id","generated":false,"id":"Tool:101231773837179153","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231774052320080","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231776030042860","typename":"Tool"}],"topics":[],"__typename":"StackDecision"},"Tool:101231776030042860":{"name":"Microsoft Excel","path":"/microsoft-excel","id":"101231776030042860","imageUrl":"https://img.stackshare.io/service/5279/RZPZ1KYT_400x400.png","thumbUrl":"https://img.stackshare.io/service/5279/thumb_RZPZ1KYT_400x400.png","stacks":685,"fans":705,"votes":0,"followingTool":false,"__typename":"Tool"},"$Tool:101231774052320080.stackDecisions({\"first\":6}).edges.1":{"node":{"type":"id","generated":false,"id":"StackDecision:105101995757656618","typename":"StackDecision"},"__typename":"StackDecisionEdge"},"User:108486251794923855":{"id":"108486251794923855","username":"gargamit30","title":"Founder","companyName":"iDigizen","imageUrl":"https://img.stackshare.io/user/1287918/default_774714e21b6bd13bdf7a29e4d0ebf3d9cf295db5.png","thumbUrl":"https://img.stackshare.io/user/1287918/thumb_774714e21b6bd13bdf7a29e4d0ebf3d9cf295db5.png","displayName":"Amit Garg","__typename":"User"},"StackDecision:108486294552466574":{"user":{"type":"id","generated":false,"id":"User:108486251794923855","typename":"User"},"company":null,"link":null,"publicId":"108486294552466574","id":"108486294552466574","htmlContent":"

Hi,\n\n

I am looking at integrating a charting library in my React frontend that allows me to create appealing and interactive charts. I have basic familiarity with ApexCharts with React but have also read about D3.js charts and it seems a much more involved integration. Can someone please share their experience across the two libraries on the following dimensions:\n\n

    \n
  1. Amount of work needed for integration\n
  2. Amount of work or ease for creating new charts in either of the libraries.\n\n\n

    Regards\n\n

    Amit","private":false,"viewCount":531755,"publishedAt":"2022-06-16T08:51:24Z","upvotesCount":6,"decisionType":"getAdvice","fromTools":[],"toTools":[],"subjectTools":[{"type":"id","generated":false,"id":"Tool:101610709567073406","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231776008918906","typename":"Tool"}],"services":[{"type":"id","generated":false,"id":"Tool:101231774052320080","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101610709567073406","typename":"Tool"},{"type":"id","generated":false,"id":"Tool:101231773849098825","typename":"Tool"}],"topics":[],"__typename":"StackDecision"},"Tool:101610709567073406":{"id":"101610709567073406","name":"ApexCharts","slug":"apexcharts","title":"📊 Interactive SVG Charts for React and Vue.js","verified":false,"imageUrl":"https://img.stackshare.io/service/10369/fYzCQZ9X_400x400.jpg","canonicalUrl":"/apexcharts","path":"/apexcharts","votes":16,"fans":279,"stacks":105,"followingTool":false,"followContext":null,"__typename":"Tool","thumbUrl":"https://img.stackshare.io/service/10369/thumb_fYzCQZ9X_400x400.jpg"},"Tool:101231776008918906":{"id":"101231776008918906","name":"React D3 Library","slug":"react-d3-library","title":"The easiest way to use D3.js in React","verified":false,"imageUrl":"https://img.stackshare.io/service/5234/react-d3-library.png","canonicalUrl":"/react-d3-library","path":"/react-d3-library","votes":0,"fans":121,"stacks":28,"followingTool":false,"followContext":null,"__typename":"Tool"},"$Tool:101231774052320080.stackDecisions({\"first\":6}).edges.2":{"node":{"type":"id","generated":false,"id":"StackDecision:108486294552466574","typename":"StackDecision"},"__typename":"StackDecisionEdge"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9})":{"count":17,"pageInfo":{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).pageInfo","typename":"PageInfo"},"edges":[{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.0","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.1","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.2","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.3","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.4","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.5","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.6","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.7","typename":"ToolEdge"},{"type":"id","generated":true,"id":"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.8","typename":"ToolEdge"}],"__typename":"ToolConnection"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).pageInfo":{"hasNextPage":true,"endCursor":"OQ","__typename":"PageInfo"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.0":{"node":{"type":"id","generated":false,"id":"Tool:101231773939333405","typename":"Tool"},"__typename":"ToolEdge"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.1":{"node":{"type":"id","generated":false,"id":"Tool:101231773849098825","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231773848354670":{"imageUrl":"https://img.stackshare.io/service/1019/square.png","thumbUrl":"https://img.stackshare.io/service/1019/thumb_square.png","thumbRetinaUrl":"https://img.stackshare.io/service/1019/thumb_retina_square.png","name":"AngularJS","id":"101231773848354670","slug":"angularjs","path":"/angularjs","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.2":{"node":{"type":"id","generated":false,"id":"Tool:101231773848354670","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231773885548898":{"imageUrl":"https://img.stackshare.io/service/1101/C9QJ7V3X.png","thumbUrl":"https://img.stackshare.io/service/1101/thumb_C9QJ7V3X.png","thumbRetinaUrl":"https://img.stackshare.io/service/1101/thumb_retina_C9QJ7V3X.png","name":"Bootstrap","id":"101231773885548898","slug":"bootstrap","path":"/bootstrap","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.3":{"node":{"type":"id","generated":false,"id":"Tool:101231773885548898","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231774544144572":{"imageUrl":"https://img.stackshare.io/service/2699/KoK6gHzp.jpg","thumbUrl":"https://img.stackshare.io/service/2699/thumb_KoK6gHzp.jpg","thumbRetinaUrl":"https://img.stackshare.io/service/2699/thumb_retina_KoK6gHzp.jpg","name":"React Native","id":"101231774544144572","slug":"react-native","path":"/react-native","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.4":{"node":{"type":"id","generated":false,"id":"Tool:101231774544144572","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231774052754045":{"imageUrl":"https://img.stackshare.io/no-img-open-source.png","thumbUrl":"https://img.stackshare.io/service/1492/thumb_no-img-open-source.png","thumbRetinaUrl":"https://img.stackshare.io/service/1492/thumb_retina_no-img-open-source.png","name":"C3.js","id":"101231774052754045","slug":"c3","path":"/c3","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.5":{"node":{"type":"id","generated":false,"id":"Tool:101231774052754045","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231776222466629":{"imageUrl":"https://img.stackshare.io/service/5608/13690587.png","thumbUrl":"https://img.stackshare.io/service/5608/thumb_13690587.png","thumbRetinaUrl":"https://img.stackshare.io/service/5608/thumb_retina_13690587.png","name":"Recharts","id":"101231776222466629","slug":"recharts","path":"/recharts","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.6":{"node":{"type":"id","generated":false,"id":"Tool:101231776222466629","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231774203143840":{"imageUrl":"https://img.stackshare.io/service/1877/default_7001650e02adf4d45db397e21b2d7d2495d82416.jpg","thumbUrl":"https://img.stackshare.io/service/1877/thumb_7001650e02adf4d45db397e21b2d7d2495d82416.jpg","thumbRetinaUrl":"https://img.stackshare.io/service/1877/thumb_retina_7001650e02adf4d45db397e21b2d7d2495d82416.jpg","name":"Sencha Ext JS","id":"101231774203143840","slug":"sencha-ext-js","path":"/sencha-ext-js","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.7":{"node":{"type":"id","generated":false,"id":"Tool:101231774203143840","typename":"Tool"},"__typename":"ToolEdge"},"Tool:101231775513173513":{"imageUrl":"https://img.stackshare.io/service/4367/no-img-open-source.png","thumbUrl":"https://img.stackshare.io/service/4367/thumb_no-img-open-source.png","thumbRetinaUrl":"https://img.stackshare.io/service/4367/thumb_retina_no-img-open-source.png","name":"NVD3","id":"101231775513173513","slug":"nvd3","path":"/nvd3","__typename":"Tool"},"$Tool:101231774052320080.allToolIntegrations({\"first\":9}).edges.8":{"node":{"type":"id","generated":false,"id":"Tool:101231775513173513","typename":"Tool"},"__typename":"ToolEdge"}}

    Home
    Application and Data
    Libraries
    Charting Libraries
    D3.js logo

    D3.js

    A JavaScript visualization library for HTML and SVG
    d3js_org
    d3js.org
    1.9K
    1.7K
    + 1
    653

    What is D3.js?

    It is a JavaScript library for manipulating documents based on data. Emphasises on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.
    D3.js is a tool in the Charting Libraries category of a tech stack.
    D3.js is an open source tool with 109.1K GitHub stars and 22.9K GitHub forks. Here’s a link to D3.js's open source repository on GitHub

    Who uses D3.js?

    Companies
    699 companies reportedly use D3.js in their tech stacks, including Accenture, Coinbase, and Coursera.

    Developers
    1066 developers on StackShare have stated that they use D3.js.

    D3.js Integrations

    JavaScript, React, AngularJS, Bootstrap, and React Native are some of the popular tools that integrate with D3.js. Here's a list of all 17 tools that integrate with D3.js.
    Pros of D3.js
    195
    Beautiful visualizations
    103
    Svg
    92
    Data-driven
    81
    Large set of examples
    61
    Data-driven documents
    24
    Visualization components
    20
    Transitions
    18
    Dynamic properties
    16
    Plugins
    11
    Transformation
    7
    Makes data interactive
    4
    Open Source
    4
    Enter and Exit
    4
    Components
    3
    Exhaustive
    3
    Backed by the new york times
    2
    Easy and beautiful
    1
    Highly customizable
    1
    Awesome Community Support
    1
    Simple elegance
    1
    Templates, force template
    1
    Angular 4
    Decisions about D3.js

    Here are some stack decisions, common use cases and reviews by companies and developers who chose D3.js in their tech stack.

    Axel Dürkop
    at Hamburg University of Technology · | 6 upvotes · 101.3K views
    Needs advice
    on
    D3.jsD3.js
    and
    Neo4jNeo4j

    I want to build learning paths in a simple way and visualize them, the way Neo4j or D3.js do it. Example: I have a set of learning resources that can be connected depending on certain criteria. Thus, it would be possible for learners to start from various starting points and have learning paths depending on this starting point.

    Following this, I need two things: first, a UI that lets me connect entries from a database so that a linear view, like a path, comes out. And second, a bird's eye view on the various paths like a force-directed graph that stems from the linear connections I made.

    See more
    hala2030
    | 5 upvotes · 379.8K views
    Needs advice
    on
    D3.jsD3.js
    and
    PythonPython

    I'm a student, and I have a project to build an application (Visual analytics tool) that takes a Microsoft Excel file, cleans the data, and visualizes it. Also, the app should allow the user to filter and interact with it.

    1- should I make it desktop application or web application? : I'm leaning toward (desktop)

    2- D3.js OR Python?

    3- better excel or CSV?

    I'm a beginner Inspiration for interaction and look of the app: eventflow application.

    See more
    Amit Garg
    Founder at iDigizen · | 6 upvotes · 531.8K views
    Needs advice
    on
    ApexChartsApexCharts
    and
    React D3 LibraryReact D3 Library

    Hi,

    I am looking at integrating a charting library in my React frontend that allows me to create appealing and interactive charts. I have basic familiarity with ApexCharts with React but have also read about D3.js charts and it seems a much more involved integration. Can someone please share their experience across the two libraries on the following dimensions:

    1. Amount of work needed for integration
    2. Amount of work or ease for creating new charts in either of the libraries.

    Regards

    Amit

    See more
    See all decisions

    Blog Posts

    The Evolution of Eventbrite's Front-End Stack
    Sep 8 2017 at 2:54PM

    Eventbrite-0

    JavaScriptNode.jsReact+7
    6
    9845

    D3.js's Features

    • Declarative Approach for Individual Nodes Manipulation
    • Functions Factory
    • Web Standards
    • Built-in ELement Inspector to Debug
    • Uses SVG, Canvas, and HTML
    • Data-driven approach to DOM Manipulation
    • Voronoi Diagrams
    • Maps and topo.

    D3.js Alternatives & Comparisons

    What are some alternatives to D3.js?
    three.js
    It is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser.
    Plotly.js
    It is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems (referred to as Plotly.py and Plotly.R). It can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.
    Highcharts
    Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
    Python
    Python is a general purpose programming language created by Guido Van Rossum. Python is most praised for its elegant syntax and readable code, if you are just beginning your programming career python suits you best.
    Tableau
    Tableau can help anyone see and understand their data. Connect to almost any database, drag and drop to create visualizations, and share with a click.
    See all alternatives
    Related Comparisons
    D3.js
    D3.js
    VS
    three.js
    three.js
    D3.js
    D3.js
    VS
    Plotly.js
    Plotly.js
    D3.js
    D3.js
    VS
    Highcharts
    Highcharts
    Python
    Python
    VS
    D3.js
    D3.js
    D3.js
    D3.js
    VS
    Tableau
    Tableau
    D3.js
    D3.js
    VS
    Bokeh
    Bokeh

    D3.js's Followers
    1741 developers follow D3.js to keep up with related blogs and decisions.

    Similar Tools

    three.jsPlotly.jsHighchartsPythonTableau

    New Tools

    PretzelReact Strict DOMtkcho/commerce-clf-kr-sku-brand-a818ed29130ee71e236ee79b47144d88EleutherAI/llemma_34blorahub/flan_t5_large-sciq_Multiple_Choice_Question_First

    Trending Comparisons

    C3.js vs D3.js vs HighchartsD3.js vs MetricsGraphics.js vs amChartsAnyChart vs D3.js vs HighchartsC3.js vs D3.jsD3.js vs Highcharts vs amCharts

    Related Jobs

    three.js JobsPlotly.js JobsHighcharts JobsPython JobsTableau Jobs