diff --git a/4-data-visualization/1-bar-chart/index.css b/4-data-visualization/1-bar-chart/index.css
new file mode 100644
index 0000000..4a62fd2
--- /dev/null
+++ b/4-data-visualization/1-bar-chart/index.css
@@ -0,0 +1,32 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0;
+ height: 100vh;
+ width: 100vw;
+ background-color: grey;
+}
+
+#tooltip {
+ background-color: tomato;
+ display: none;
+ height: fit-content;
+ width: fit-content;
+ opacity: 0.8;
+ border-radius: 5px;
+ padding: 20px;
+ position: fixed;
+ z-index: 10;
+}
+
+#chart {
+ width: 900px;
+ height: 500px;
+ text-align: center;
+ background-color: navajowhite;
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
+
+/*# sourceMappingURL=index.css.map */
diff --git a/4-data-visualization/1-bar-chart/index.css.map b/4-data-visualization/1-bar-chart/index.css.map
new file mode 100644
index 0000000..5584fc1
--- /dev/null
+++ b/4-data-visualization/1-bar-chart/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/4-data-visualization/1-bar-chart/index.html b/4-data-visualization/1-bar-chart/index.html
new file mode 100644
index 0000000..1a06953
--- /dev/null
+++ b/4-data-visualization/1-bar-chart/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ FreeCodeCamp Barchart
+
+
+
+
+
+
United States GDP
+
+
+
+
+
\ No newline at end of file
diff --git a/4-data-visualization/1-bar-chart/index.js b/4-data-visualization/1-bar-chart/index.js
new file mode 100644
index 0000000..24c6d8c
--- /dev/null
+++ b/4-data-visualization/1-bar-chart/index.js
@@ -0,0 +1,69 @@
+const w = 800
+const h = 400
+
+d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json')
+ .then(data => {
+ const dataset = data.data
+
+ d3.select('#chart')
+ .append('svg')
+ .attr('height', h)
+ .attr('width', w)
+
+ function getDate(d) {
+ console.log(d, new Date(d[0]))
+ return new Date(d[0]);
+ }
+
+ const xScale = d3.scaleTime()
+ .domain([getDate(dataset[0]), getDate(dataset[dataset.length - 1])])
+ .range([0, w])
+
+ const yScale = d3.scaleLinear()
+ .domain([0, d3.max(dataset, (d) => d[1])])
+ .range([h, 0])
+
+ const xAxis = d3.axisBottom().scale(xScale);
+ const yAxis = d3.axisLeft().scale(yScale);
+
+ d3.select('svg')
+ .append('g')
+ .call(xAxis)
+ .attr('id', 'x-axis')
+ .attr('transform', 'translate(40, 360)')
+
+ d3.select('svg')
+ .append('g')
+ .call(yAxis)
+ .attr('id', 'y-axis')
+ .attr('transform', 'translate(40, -40)')
+
+
+ d3.select('svg')
+ .selectAll('rect')
+ .data(dataset)
+ .enter()
+ .append('rect')
+ .attr('class', 'bar')
+ .attr('x', (d) => xScale(getDate(d)) + 40)
+ .attr("y", (d) => yScale(d[1]) - 40)
+ .attr('width', () => w / 275)
+ .attr("height", (d) => h - yScale(d[1]))
+ .attr('data-date', (d) => d[0])
+ .attr('data-gdp', (d) => d[1])
+ .style('fill', '#74dbf1')
+ .on('mouseover', (e) => {
+ const date = e.target.__data__[0]
+ const value = e.target.__data__[1]
+ d3.select('#tooltip')
+ .attr('data-date', date)
+ .style('display', 'initial')
+ .text(() => 'Date: ' + date + " GDP: " + value)
+ })
+ .on('mouseout', () => {
+ d3.select('#tooltip')
+ .style('display', 'none')
+
+ })
+ }
+ )
diff --git a/4-data-visualization/1-bar-chart/index.scss b/4-data-visualization/1-bar-chart/index.scss
new file mode 100644
index 0000000..b89b2b9
--- /dev/null
+++ b/4-data-visualization/1-bar-chart/index.scss
@@ -0,0 +1,30 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0;
+ height: 100vh;
+ width: 100vw;
+ background-color: grey;
+}
+
+#tooltip{
+ background-color: tomato;
+ display: none;
+ height: fit-content;
+ width: fit-content;
+ opacity: 0.8;
+ border-radius: 5px;
+ padding: 20px;
+ position: fixed;
+ z-index: 10;
+}
+
+#chart {
+ width: 900px;
+ height: 500px;
+ text-align: center;
+ background-color: navajowhite;
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
\ No newline at end of file