About NFT

What is AN NFT? What does NFT Stand For?

NFT stands for Non-Fungible Token. To explain it, it is probably easier if I just give an example. Okay, let's say you own a really nice Patek Philippe watch. As we all know, as older it gets, the price increases because it is classified as vintage. Now, there are hundreds of replicas in the market, how do you determine whether or not it is authentic or fake? Well, that is what NFTs are for. We can use NFTs as a digital certificate to pair along with the watch to prove that it is authentic and because it is a non-fungible token, it is unique and can not be replaced by anything else. Therefore, we can use NFTs as a digital asset that ties to any physical assets, not just watches. NFTs are predicted to be huge in the future digital market. Now that you have a basic understanding of NFTs, let's dive into the visualizations.

First, instead of opening the dataset in common tools like Excel, let's utilize what we have done with Data2Int.
We are going to use the tools Pandas Profiling Report extended library to generate a report that provides useful information and render them here.
Source code can be found here

Next, we will use matplotlib and seaborn to generate visualizations.
We can create a few simple charts like below:

Source code can be found here:

                    
# Import pandas, maplotlib, and seaborn. Pandas to get Dataframe, then use Maplotlib and Seaborn to generate visualizations
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

# Read csv and get Dataframe
df = pd.read_csv('NFT_Sales.csv')

# Generate a visualization comparing  the number of sales vs the date
plt.figure(figsize=(16, 5), dpi=100)
plt.plot(df.index, df.Number_of_Sales, color='tab:green')
plt.gca().set(title='NFT Sales', xlabel='Date', ylabel='NFT')
# Save file as an image
plt.savefig('NFT_1.png') # Image 1

# Generate heat map
svm = sns.heatmap(df.corr(), center=0, annot=True)
# Get figure and save file as an image
figure = svm.get_figure()
figure.savefig('NFT_2.png') # Image 2

# Generate all possible visualizations
svm = sns.pairplot(df[1:])
# Save file 
plt.savefig("NFT_3.png") # Image 3

Next, let's use D3.js to create visualizations.

Timeline

Total Number of sales

Total Sales in USD

Source code can be found here:

                    
queue()
    .defer(d3.json, "/donorschoose/NFT")
    .await(makeGraphs);

function makeGraphs(error, projectsJson) {
    var nft = projectsJson;
    var dateFormat = d3.time.format("%Y-%m-%d");
    nft.forEach(function(d){
        d["Date"] = dateFormat.parse(d["Date"]);
        d["Date"].setDate(1);
        d["Number_of_Sales"] = +d["Number_of_Sales"];
    })

    var ndx = crossfilter(nft);

    var dateDim = ndx.dimension(function(d){return d["Date"]; });
    var numSaleDim = ndx.dimension(function(d){return d["Number_of_Sales"];});
    var saleDim = ndx.dimension(function(d){return d["Sales_USD_"];});

    var numSalesByDate = dateDim.group();
    var totalNumSales = ndx.groupAll().reduceSum(function (d) {return d["Number_of_Sales"];});
    var totalSales = ndx.groupAll().reduceSum(function (d) {return d["Sales_USD"];});

    var minDate = dateDim.bottom(1)[0]["Date"];
    var maxDate = dateDim.top(1)[0]["Date"];

    var timeChart = dc.barChart("#time-chart");
    var totalNumSalesND = dc.numberDisplay("#total-num-sales-nd");
    var totalSalesND = dc.numberDisplay("#total-sales-nd");

    timeChart
        .width(1000)
        .height(250)
        .margins({top: 10, right: 50, bottom: 30, left: 50})
        .dimension(dateDim)
        .group(numSalesByDate)
        .transitionDuration(500)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .elasticY(true)
        .xAxisLabel("Year")
        .yAxis().ticks(4);

    totalSalesND
        .formatNumber(d3.format("d"))
        .valueAccessor(function(d){return d; })
        .group(totalSales)
        .formatNumber(d3.format(".5s"));

    totalNumSalesND
        .formatNumber(d3.format("d"))
        .valueAccessor(function(d){return d; })
        .group(totalNumSales)
        .formatNumber(d3.format(".5s"));


    dc.renderAll();
};