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
Feb 16, 2024
dataheaders ={
const headers = [];
Object.keys(colleges[0]).forEach(key =>{headers.push(key)})
return headers;
}
majors = {
const majors = dataheaders.filter(header =>{return header.includes('major')})
return majors;
}
collegesNonGraduate ={
const collegesNonGraduate = colleges.filter(d=>{
return d['pred_deg'] != 'Entirely graduate-degree granting';
})
return collegesNonGraduate;
}
// filter data to get the top 100 colleges median income
getTop ={
const getTop = (attr, data, length) =>{
const sortedData = data.sort((a,b)=>{
if(a[attr] > b[attr]){
return -1;
}
if(a[attr] < b[attr]){
return 1;
}
return 0;
})
return sortedData.slice(0, length);
}
return getTop;
}
//filter data to get the top 100 schools
top100income = {
const top100income = getTop('median_earnings',collegesNonGraduate,100)
return top100income;
}
// sum of degrees at the top median income schools
sumOfDegrees = {
const sumOfDegrees = {}
majors.forEach(major =>{sumOfDegrees[major]= 0});
console.log('I am checking this now',top100income[0][majors[0]])
top100income.forEach(college =>{
majors.forEach(m=>{
if(!isNaN(college[m])){
sumOfDegrees[m] += college[m];
}
})
})
return sumOfDegrees;
}
{
const svg2 = d3.create('svg')
.attr('height', dimensions.height+(dimensions.m.t+dimensions.m.b))
.attr('width', dimensions.width + (dimensions.m.l+dimensions.m.r))
.style('overflow-x', 'scroll');
const g = svg2.append('g')
.attr('transform',`translate(${dimensions.m.l},${dimensions.m.t})`)
const yAxis = d3.axisLeft(barScales.yScale);
const xAxis = d3.axisBottom(barScales.xScale);
g.append('g')
.call(yAxis)
g.append('g')
.attr('transform',`translate(${0},${dimensions.height})`)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
g.selectAll('rect').data(dataForD3).join('rect')
.attr('x', d=> barScales.xScale(d.title))
.attr('height', d=> dimensions.height - barScales.yScale(d.amount))
.attr('y', d=> barScales.yScale(d.amount))
.attr('width', barScales.xScale.bandwidth())
.attr('fill', 'grey')
return svg2.node()
}
barScales ={
const bandValues = [];
dataForD3.forEach(d=>{bandValues.push(d.title)})
const max = d3.max(Object.values(sumOfDegrees))
const yScale = d3.scaleLinear([0,max],[dimensions.height,0]);
const xScale = d3.scaleBand(bandValues, [0, dimensions.width]).padding(0.2);
return {yScale:yScale, xScale:xScale};
}
dataForD3 = {
let dataForD3 = [];
Object.keys(sumOfDegrees).forEach(key=>{
dataForD3.push({
title:key,
amount:sumOfDegrees[key]
})
})
dataForD3 = dataForD3.sort((a,b)=>{
return b.amount - a.amount;
});
return dataForD3;
}
{
const svg2 = d3.create('svg')
.attr('height', dimensions.height+(dimensions.m.t+dimensions.m.b))
.attr('width', dimensions.width + (dimensions.m.l+dimensions.m.r))
.style('overflow-x', 'scroll');
const g = svg2.append('g')
.attr('transform',`translate(${dimensions.m.l},${dimensions.m.t})`)
const yAxis = d3.axisLeft(xyPlotScales.yScale);
const xAxis = d3.axisBottom(xyPlotScales.xScale);
g.append('g')
.call(yAxis)
g.append('g')
.attr('transform',`translate(${0},${dimensions.height})`)
.call(xAxis)
.selectAll("text")
g.selectAll('circle').data(colleges).join('circle')
.attr('cx',d=> xyPlotScales.xScale(d.sat_math_quartile_2))
.attr('cy',d=> xyPlotScales.yScale(d.unemployment_rate))
.attr('fill', d=> isNaN(d.sat_math_quartile_2)?'none':isNaN(d.unemployment_rate)?'none': 'grey')
.attr('r','4')
return svg2.node()
}
xyPlotScales=({
xScale: d3.scaleLinear([0,d3.max(colleges, d=>Number(d.sat_math_quartile_2))],[0,dimensions.width]),
yScale: d3.scaleLinear([0,d3.max(colleges, d=>d.unemployment_rate)], [dimensions.height,0])
})
colleges.tsv
Type Table, then Shift-Enter. Ctrl-space for more options.
dimensions =({
height:750,
width:1050,
m:{
l:40,t:20,r:20,b:150
}
})
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.