Danfo.js
  • Danfo.js Documentation
  • Getting Started
  • API reference
    • General Functions
      • danfo.tensorflow
      • danfo. convertFunctionTotransformer
      • danfo.streamCsvTransformer
      • danfo.streamJSON
      • danfo.streamCSV
      • danfo.Utils
      • danfo.Str
      • danfo.Dt
      • danfo.dateRange
      • danfo.OneHotEncoder
      • danfo.StandardScaler
      • danfo.MinMaxScaler
      • danfo.LabelEncoder
      • danfo.toDateTime
      • danfo.getDummies
      • danfo.concat
      • danfo.merge
    • Input/Output
      • danfo.readExcel
      • danfo.toExcel
      • danfo.readJSON
      • danfo.toJSON
      • danfo.readCSV
      • danfo.toCSV
    • Series
      • Creating a Series
      • Series.append
      • Series.cumSum
      • Series.cumMax
      • Series.cumProd
      • Series.cumMin
      • Series.str.split
      • Series.str.len
      • Series.str.join
      • Series.str.trim
      • Series.str.substring
      • Series.str.substr
      • Series.str.slice
      • Series.str.search
      • Series.str.repeat
      • Series.str.replace
      • Series.str.lastIndexOf
      • Series.str.indexOf
      • Series.str.includes
      • Series.str.endsWith
      • Series.str.startsWith
      • Series.str.concat
      • Series.str.charAt
      • Series.str.toUpperCase
      • Series.str.toLowerCase
      • Series.str.capitalize
      • Series.dt.seconds
      • Series.dt.minutes
      • Series.dt.dayOfMonth
      • Series.dt.monthName
      • Series.dt.hours
      • Series.dt.dayOfWeek
      • Series.dt.dayOfWeek
      • Series.dt.month
      • Series.dt.year
      • Series.argMax
      • Series.argMin
      • Series.argSort
      • Series.replace
      • Series.isNa
      • Series.fillNa
      • Series.dropNa
      • Series.dropDuplicates
      • Series.valueCounts
      • Series.nUnique
      • Series.unique
      • Series.abs
      • Series.ne
      • Series.eq
      • Series.ge
      • Series.le
      • Series.gt
      • Series.lt
      • Series.iloc
      • Series.loc
      • Series.at
      • Series.iat
      • Series.ndim
      • Series.shape
      • Series.dtype
      • Series.values
      • Series.tensor
      • Series.index
      • Series.apply
      • Series.map
      • Series.setIndex
      • Series.resetIndex
      • Series.describe
      • Series.copy
      • Series.sortValues
      • Series.var
      • Series.std
      • Series.round
      • Series.minimum
      • Series.maximum
      • Series.count
      • Series.sum
      • Series.max
      • Series.min
      • Series.mode
      • Series.median
      • Series.mean
      • Series.mod
      • Series.pow
      • Series.div
      • Series.mul
      • Series.sub
      • Series.add
      • Series.sample
      • Series.tail
      • Series.head
      • Series.and
      • Series.or
    • Dataframe
      • Creating a DataFrame
      • DataFrame.sortIndex
      • DataFrame.append
      • DataFrame.nUnique
      • DataFrame.tensor
      • DataFrame.print
      • DataFrame.toCSV
      • DataFrame.toJSON
      • DataFrame.toExcel
      • DataFrame.sortValues
      • DataFrame.setIndex
      • DataFrame.resetIndex
      • DataFrame.rename
      • DataFrame.drop
      • DataFrame.asType
      • DataFrame.shape
      • DataFrame.axis
      • DataFrame.ndim
      • DataFrame.values
      • DataFrame.selectDtypes
      • DataFrame.ctypes
      • DataFrame.index
      • DataFrame.loc
      • DataFrame.iloc
      • DataFrame.at
      • DataFrame.iat
      • DataFrame.head
      • DataFrame.tail
      • DataFrame.sample
      • DataFrame.add
      • DataFrame.sub
      • DataFrame.mul
      • DataFrame.div
      • DataFrame.pow
      • DataFrame.mod
      • DataFrame.mean
      • DataFrame.median
      • DataFrame.min
      • DataFrame.max
      • DataFrame.std
      • DataFrame.var
      • DataFrame.count
      • DataFrame.round
      • DataFrame.cumSum
      • DataFrame.cumMin
      • DataFrame.cumMax
      • DataFrame.cumProd
      • DataFrame.copy
      • DataFrame.describe
      • DataFrame.sum
      • DataFrame.abs
      • DataFrame.query
      • DataFrame.addColumn
      • DataFrame.groupby
      • DataFrame.column
      • DataFrame.fillNa
      • DataFrame.isNa
      • DataFrame.dropNa
      • DataFrame.apply
      • DataFrame.applyMap
      • DataFrame.It
      • DataFrame.gt
      • DataFrame.le
      • DataFrame.ge
      • DataFrame.ne
      • DataFrame.eq
      • DataFrame.replace
    • Configuration Options
    • Plotting
      • Timeseries Plots
      • Violin Plots
      • Box Plots
      • Tables
      • Pie Charts
      • Histograms
      • Scatter Plots
      • Bar Charts
      • Line Charts
      • Customizing your plots
    • Groupby
      • Groupby.getGroups
      • Groupby.col
      • Groupby.max
      • Groupby.min
      • Groupby.sum
      • Groupby.mean
      • Groupby.std
      • Groupby.var
      • Groupby.count
      • Groupby.cumSum
      • Groupby.cumMax
      • Groupby.cumMin
      • Groupby.cumProd
      • Groupby.agg
  • User Guides
    • Migrating to the stable version of Danfo.js
    • Using Danfojs in React
    • Titanic Survival Prediction using Danfo.js and Tensorflow.js
  • Building Data Driven Applications with Danfo.js - Book
  • Contributing Guide
  • Release Notes
Powered by GitBook
On this page

Was this helpful?

  1. User Guides

Using Danfojs in React

PreviousMigrating to the stable version of Danfo.jsNextTitanic Survival Prediction using Danfo.js and Tensorflow.js

Last updated 3 years ago

Was this helpful?

TL:DR See Example react application using danfojs

Danfojs works for both browser and NodeJs environment, and as such is available to frontend frameworks like React and Vue.

In order to use Danfojs in a library like React, you must install the from npm.

npm install danfojs

or 

yarn add danfojs

Follow the steps here to bootstrap a React app, and in your App.js or any file where you want to use danfojs, you can import it as follow:

import "./App.css";
import * as dfd from "danfojs";

Now you have access to all features under the dfd namespace. Below is a sample App.js file using danfojs:

import "./App.css";
import * as dfd from "danfojs";

function App() {

  const df = new dfd.DataFrame(
    { pig: [20, 18, 489, 675, 1776], horse: [4, 25, 281, 600, 1900] },
    { index: [1990, 1997, 2003, 2009, 2014] }
  );
  df.head().print()


  return (
    <div className="App">
      <header className="App-header">
        <a
          className="App-link"
          href="https://danfo.jsdata.org/getting-started"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Danfojs 
        </a>
      </header>
    </div>
  );
}

export default App;

On running the app, we get the following output in the console:

Note that you can also import specific modules. For instance, in the code below we import only the DataFrame module:

import { DataFrame } from "danfojs";

Following these steps, you can use danfojs in any client-side library.

here
browser side version