This data dashboard application provides dynamic and interactive visualization of various datasets. It utilizes technologies such as D3.js, Crossfilter.js, and DC.js to generate configurable charts that adapt to different types of data.

With this application you can visualize your data in a simple way, just by editing a configuration yml:

{
  "data": "data/iris.csv",
  "charts": [
      {
          "title": "Species",
          "type": "categorical",
          "fields": "species"
      },
      {
          "title": "Sepal length",
          "type": "numerical",
          "fields": "sepal_length"
      },
      {
          "title": "Petal length",
          "type": "numerical",
          "fields": "petal_length"
      },
      {
          "title": "Petal width",
          "type": "numerical",
          "fields": "petal_width"
      },
      { 
          "title": "Relation between sepal width, sepal length and petal length",
          "type": "bubble",
          "fields": ["sepal_width", "sepal_length", "petal_length"],
          "maxBubbleSize": 1
      },
      { 
          "title": "Relation between width and length",
          "type": "scatter",
          "fields": ["sepal_width", "sepal_length"],
      }    
  ]
}

Previous configuration generates this dashboard, where you can interact with the data. If you click on a bar, the other charts will be filtered by the selected value. If you click on the reset button, the filters will be removed.

• Dynamic Configuration: Charts are dynamically generated based on a JSON configuration, allowing great flexibility.
• Multiple Chart Types: Supports various types of charts including bar charts, pie charts, and line charts.
• Interactivity: Includes features like filters and the ability to reset each chart individually.
• Responsive Design: Charts are organized in a responsive grid layout, adapting to different screen sizes.

• D3.js
• Crossfilter.js
• DC.js
• Bulma CSS

node server.js

And open this url in your browser:

http://localhost:3000