Skip to content

Instantly share code, notes, and snippets.

@Kamalabot

Kamalabot/codeswing.json

Last active June 23, 2022 09:02
Show Gist options
  • Save Kamalabot/91ae2696cff32a0116b635807bac50b6 to your computer and use it in GitHub Desktop.
Save Kamalabot/91ae2696cff32a0116b635807bac50b6 to your computer and use it in GitHub Desktop.
Download ZIP
FCC: D3 Bar Chart
Raw
codeswing.json
{
"scripts": [
"react",
"react-dom"
],
"styles": [],
"layout": "splitBottom"
}
Raw
functionSnippets.js
var years = data.data.map((d) => {
var quarter;
var temp = d[0].substring(5, 7);
if (temp === '01') {
quarter = 'Q1';
} else if (temp === '04') {
quarter = 'Q2';
} else if (temp === '07') {
quarter = 'Q3';
} else if (temp === '10') {
quarter = 'Q4';
}
Raw
index.html
<div class="main">
<div class="container">
<div id="title">United States GDP</div>
<div class="visHolder">
</div>
</div>
</div>
Raw
script.babel
/* global d3 */
/* eslint-disable max-len */
// eslint-disable-next-line no-unused-vars
const projectName = 'bar-GDP';
// coded by @Christian-Paul
var width = 800,
height = 400,
barWidth = width / 275;
var tooltip = d3
.select('.visHolder')
.append('div')
.attr('id', 'tooltip')
.style('opacity', 0);
var overlay = d3
.select('.visHolder')
.append('div')
.attr('class', 'overlay')
.style('opacity', 0);
var svgContainer = d3
.select('div.container')
.append('svg')
.attr('width', width + 100)
.attr('height', height + 60);
d3.json(
'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json'
)
.then((data) => {
//creating the title
svgContainer
.append('text')
.attr('transform', 'rotate(-90)')
.attr('x', -200)
.attr('y', 80)
.text('Gross Domestic Product');
//creating the reference
svgContainer
.append('text')
.attr('x', width / 2 + 120)
.attr('y', height + 50)
.text('More Information: http://www.bea.gov/national/pdf/nipaguid.pdf')
.attr('class', 'info');
console.log(data.data.slice(1,5))
//creating the additional data and re-formatting
var years = data.data.map((d) => {
var quarter;
var t = d[0].substring(5, 7);
if (t === '01') {
quarter = 'Q1';
} else if (t === '04') {
quarter = 'Q2';
} else if (t === '07') {
quarter = 'Q3';
} else if (t === '10') {
quarter = 'Q4';
}
return d[0].substring(0, 4) + ' ' + quarter;
});
console.log(years.slice(1,5))
var yearsDate = data.data.map((d) =>{
return new Date(d[0]);
});
console.log(yearsDate[1])
var xMax = new Date(d3.max(yearsDate));
console.log(xMax)
xMax.setMonth(xMax.getMonth() + 3);
console.log(xMax)
var xScale = d3
.scaleTime()
.domain([d3.min(yearsDate), xMax])
.range([0, width]);
var xAxis = d3.axisBottom().scale(xScale);
svgContainer
.append('g')
.call(xAxis)
.attr('id', 'x-axis')
.attr('transform', 'translate(60, 400)');
var GDP = data.data.map((d) =>{
return d[1];
});
var scaledGDP = [];
var gdpMax = d3.max(GDP);
var linearScale = d3.scaleLinear().domain([0, gdpMax]).range([0, height]);
scaledGDP = GDP.map(d => {
return linearScale(d);
});
var yAxisScale = d3.scaleLinear().domain([0, gdpMax]).range([height, 0]);
var yAxis = d3.axisLeft(yAxisScale);
//creating the y-axis
svgContainer
.append('g')
.call(yAxis)
.attr('id', 'y-axis')
.attr('transform', 'translate(60, 0)');
//bar chart is starting
d3.select('svg')
.selectAll('rect')
.data(scaledGDP)
.enter()
.append('rect')
//Adding attributes as per the test requestst
.attr('data-date', (d, i) => {
return data.data[i][0];
})
.attr('data-gdp', (d, i) => {
return data.data[i][1];
})
//creating the bars
.attr('class', 'bar')
.attr('x', (d, i) => {
return xScale(yearsDate[i]);
})
.attr('y', (d) => {
return height - d;
})
.attr('width', barWidth)
.attr('height', (d) => {
return d;
})
.attr('index', (d, i) => i)
.style('fill', '#3fa9ff')
.attr('transform', 'translate(60, 0)')
.on('mouseover', function (event, d) {
// d or datum is the height of the
// current rect
var i = this.getAttribute('index');
overlay
.transition()
.duration(0)
.style('height', `${d}px`)
.style('width', `${barWidth}px`)
.style('opacity', 0.9)
.style('left', `${i * barWidth + 0}px`)
.style('top', `${height - d - 30}px`)
.style('transform', 'translateX(60px)');
tooltip.transition().duration(200).style('opacity', 0.9);
tooltip
.html(
years[i] +
'<br>' +
'$' +
GDP[i].toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') +
' Billion'
)
.attr('data-date', data.data[i][0])
.style('left', i * barWidth + 30 + 'px')
.style('top', height - 100 + 'px')
.style('transform', 'translateX(60px)');
})
.on('mouseout', function () {
tooltip.transition().duration(20).style('opacity', 0);
overlay.transition().duration(20).style('opacity', 0);
});
})
.catch((e) => console.log(e));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.4/d3.min.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Raw
style.css
* {
margin: 0;
padding: 0;
}
.main {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto';
background-color: #708090;
background-size: 64px 128px;
}
.main .container {
height: 560px;
width: 900px;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 20px 20px 20px 20px;
align-self: center;
position: relative;
}
@media (min-width: 1000px) {
.main .container {
box-shadow: 2px 2px 20px;
}
}
.main .container #title {
text-align: center;
font-size: 2.5em;
}
.main .container .visHolder {
position: absolute;
top: 6em;
}
#tooltip {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
text-align: center;
width: 150px;
height: 50px;
padding: 2px;
font: 12px;
background: lightgreen;
box-shadow: 1px 1px 10px;
border-radius: 2px;
pointer-events: none;
}
.overlay {
position: absolute;
background: #f0f;
pointer-events: none;
}
#y-axis path {
stroke: black;
stroke-width: 1;
fill: none;
}
#x-axis path {
stroke: black;
stroke-width: 1;
fill: none;
}
.info {
font-size: 0.8em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment