Public
Edited
Oct 24, 2022
1 star
df = df1.filter(d => d.WEEKS < D)
// df.filter(d => d.PLATFORM_NAME == 'looksrare').map(d => d.DATE)
chart = StackedAreaChart(df, {
x: d => new Date(d.DATE),
// x: d => d.DATE,
y: d => d.ETH,
z: d => d.PLATFORM_NAME,
zDomain: PLATFORM_NAME,
title: "% Volume", // given d in data, returns the title text
// colors: d3.schemeSpectral[PLATFORM_NAME.length],
yLabel:"% ETH",
width: 700,
height: 200
})
{
var trace1 = {
x: df.filter(d => d.PLATFORM_NAME == 'opensea').map(d => d.DATE),
y: df.filter(d => d.PLATFORM_NAME == 'opensea').map(d => d.ETH),
name: 'opensea',
type: 'bar',
xaxis: 'x',
yaxis: 'y',
};
var trace2 = {
x: df.filter(d => d.PLATFORM_NAME == 'x2y2').map(d => d.DATE),
y: df.filter(d => d.PLATFORM_NAME == 'x2y2').map(d => d.ETH),
name: 'x2y2',
type: 'bar',
xaxis: 'x2',
yaxis: 'y2'
};
var trace3 = {
x: df.filter(d => d.PLATFORM_NAME == 'looksrare').map(d => d.DATE),
y: df.filter(d => d.PLATFORM_NAME == 'looksrare').map(d => d.ETH),
name: 'looksrare',
type: 'bar',
xaxis:'x3',
yaxis: 'y3'
};
var trace4 = {
x: df.filter(d => d.PLATFORM_NAME == 'larva labs').map(d => d.DATE),
y: df.filter(d => d.PLATFORM_NAME == 'larva labs').map(d => d.ETH),
name: 'larva labs',
type: 'bar',
xaxis:'x4',
yaxis: 'y4'
};
var data1 = [trace1,trace2,trace3,trace4];
// var layout = {
// title: 'NFT Volume on Ethereum',
// barmode: 'stack',
// font:{
// family: 'Raleway, sans-serif'
// },
// grid: {
// rows: 2, columns: 2, pattern: 'independent'
// },
// showlegend: true,
// xaxis: {
// tickangle: -45
// },
// yaxis: {
// zeroline: false,
// gridwidth: 2
// },
// bargap :0.05
// };
var layout = {
title: 'NFT Volume on Ethereum ' + SALES_TYPE + ' Trading',
grid: {rows: 2, columns: 2, pattern: 'independent'},
};
const div = DOM.element('div');
Plotly.newPlot(div, data1, layout);
return div;
}
viewof m = Inputs.range([0, 4000], { label: "Time Axis", step: 10 })
Plot.plot({ y: {
grid: true,
label: "ETH Volume"
},
x: {
ticks: df.map(d => new Date(d.DATE)).filter((d, i) => i % m === 0)
},
color:{
legend: true,
label: "Marketplace"
},
marks: [
Plot.barY(df, Plot.groupX({y:"sum"},
{x:d => new Date(d.DATE), y:"ETH", fill:"PLATFORM_NAME", sort: {x: "x", reverse: true}})),
Plot.ruleY([0]),
],
marginLeft: 50, // space to the left of the chart
marginBottom: 50, // space below the chart
insetBottom: 10, // space between the x-axis and the marks
insetLeft: 5, // space between the y-axis and the marks
})
import {Swatches} from "@d3/color-legend"
import {howto, altplot} from "@d3/example-components"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
