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
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.
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.