I am a Data Visualization and UI developer. Focusing on creating SPA using React, Redux, D3.js and Jest . I also do data projects when I have time.
Public
Edited
Oct 7, 2024
plot_area = {
// "red" "green" "blue" "yellow"
const plot =Plot.plot({
marginLeft: 150,
width: 928,
height:550,
style: {fontSize: "13px"},
color:{
legend:true,
label: "Coinssssssss",
width: 235,
columns:1,
className:"bitcoin-legend",
swatchHeight:"35px",
tickFormat:()=>{},
range: ["red", "green", "blue", "yellow"],
domain:["Etherum", "Solana", "USDC", "Bitcoin"]
},
y:{
grid:true,
label:"DEX Volume",
nice:true,
stroke: "white"
},
x:{
},
marks:[
Plot.areaY(flat_data, {x: "Date", y: "trade_volume", fill: "Coin"}),
Plot.axisX({ticks: d3.utcMonth.every(1),tickSize: 0, tickFormat: "%B-%Y", fill: "white"}),
Plot.axisY({ticks: 5, tickFormat:(d)=>"$"+String(d/1000000)+".0 " +"Million Dollars",tickSize: 0, strokeWidth:"10px", fill: "white",
labelAnchor: "center", labelArrow:"none"}),
]
})
//.selectAll(".bitcoin-legend-swatch")
//console.log('this is the legend', legend_rows);
return plot;
}
legendModify= {
return legendFunc(plot_area,totals);
}
legendFunc={
return function legendFunc(plot,totals){
d3.select(plot).select('.bitcoin-legend-swatches').style('margin','175px auto').style('border','1px solid grey').insert("div",":first-child").style('color','white')
.style('font-size','18px').style('text-align','center').style('border-bottom','1px solid white').text("Avg Q2'23 Volume")
let legend_rows = d3.select(plot).selectAll(".bitcoin-legend-swatch-label")
.append('div').attr('class','legend-row').style('color','white');
let name_yoy = legend_rows.append('div').attr('class','legend-name');
let name_yoy_name = name_yoy.append('div').attr('class','name').style('font-size','18px').text(d=>d);
let name_yoy_change = name_yoy.append('div').attr('class','name').text('QoQ change')
let name_total = legend_rows.append('div').attr('class','legend-total').style('margin-left','auto');
let name_total_total = name_total.append('div').attr('class','total')
.style('font-size','18px')
.text(d=>totals[d] >10000000?"$"+ Math.round(Math.round(totals[d])/1000000)+"M":
"$"+ Math.round(Math.round(totals[d])/100000)/10+"M" );
let name_total_change = name_total.append('div').attr('class','name').style('text-align','end').text('N/A')
d3.select(plot).selectAll('.bitcoin-legend-swatch').selectAll('rect').attr('rx','8px')
d3.select(plot).selectAll('.legend-row').style('width','200px').style('display','flex')
}
}
totals={
const totals ={
'Bitcoin':0,
'Etherum':0,
'USDC':0,
'Solana':0,
}
flat_data.forEach(d=>{
totals[d.Coin] += d.trade_volume;
})
return totals;
}
flat_data ={
const new_data = [];
trade_volume.forEach((data)=>{
Object.keys(data).forEach((key)=>{
if(key != "Date"){
const data_item = {
Date:data.Date,
Coin:key,
trade_volume:Number(String(data[key]).replaceAll(",",""))
}
new_data.push(data_item);
}
})
})
return new_data;
}
trade_volume_2023_Q2 - trade_volume.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
