diff --git a/4-data-visualization/2-scatterplot/index.css b/4-data-visualization/2-scatterplot/index.css
new file mode 100644
index 0000000..a17b4cf
--- /dev/null
+++ b/4-data-visualization/2-scatterplot/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: 1200px;
+ height: 750px;
+ 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/2-scatterplot/index.css.map b/4-data-visualization/2-scatterplot/index.css.map
new file mode 100644
index 0000000..5584fc1
--- /dev/null
+++ b/4-data-visualization/2-scatterplot/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/2-scatterplot/index.html b/4-data-visualization/2-scatterplot/index.html
new file mode 100644
index 0000000..577ea68
--- /dev/null
+++ b/4-data-visualization/2-scatterplot/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+ FreeCodeCamp Scatterplot Graph
+
+
+
+
+
+
Doping in Professional Bicycle Racing
+
+ it's very funny that there are no actual requirements for the content of the 'Legend' element
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/4-data-visualization/2-scatterplot/index.js b/4-data-visualization/2-scatterplot/index.js
new file mode 100644
index 0000000..8182f28
--- /dev/null
+++ b/4-data-visualization/2-scatterplot/index.js
@@ -0,0 +1,85 @@
+const w = 900
+const h = 500
+
+d3.select('#chart')
+ .append('svg')
+ .attr('height', h)
+ .attr('width', w)
+
+d3.json('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json')
+ .then(data => {
+
+
+ const dates = [];
+ data.map((i) => {
+ i = i.Time.split(':');
+ dates.push(new Date(1970, 1, 1, 0, i[0], i[1]))
+ })
+
+
+ console.log(dates)
+
+ const xScale = d3.scaleLinear()
+ .domain([d3.min(data.map((i) => i.Year)), d3.max(data.map((i) => i.Year))])
+ .range([0, w])
+ .nice()
+
+ const yScale = d3.scaleTime()
+ .domain([d3.max(dates), d3.min(dates)])
+ .range([h, 0])
+ .nice()
+
+ const xAxis = d3.axisBottom().scale(xScale)
+ .tickFormat(d3.format('d'))
+
+ const yAxis = d3.axisLeft().scale(yScale)
+ .tickFormat(d3.timeFormat('%M:%S'))
+
+ d3.select('svg')
+ .append('g')
+ .call(xAxis)
+ .attr('id', 'x-axis')
+ .attr('transform', 'translate(40, 450)')
+
+ d3.select('svg')
+ .append('g')
+ .call(yAxis)
+ .attr('id', 'y-axis')
+ .attr('transform', 'translate(40, -50)')
+
+ d3.select('svg')
+ .selectAll('circle')
+ .data(data)
+ .enter()
+ .append('circle')
+ .attr('class', 'dot')
+ .attr('cx', (d) => xScale(d.Year) + 40)
+ .attr('cy', (d, i) => yScale(dates[i]) - 50)
+ .attr('data-xvalue', (d) => d.Year)
+ .attr('data-yvalue', (d, i) => (dates[i]))
+ .attr('data-name', (d) => d.Name)
+ .attr('data-doping', (d) => d.Doping)
+ .attr('data-url', (d) => d.URL)
+ .attr('r', 5)
+ .on('mouseover', (e) => {
+ console.log(e)
+
+ d3.select('#tooltip')
+ .style('display', 'initial')
+ .style('left', e.pageX + 'px')
+ .style('top', e.pageY + 30 + 'px')
+ .attr('data-year', e.target.attributes['data-xvalue'].nodeValue)
+ .html(
+ 'Name: ' + e.target.attributes['data-name'].nodeValue + '
' +
+ e.target.attributes['data-doping'].nodeValue
+ )
+
+
+ })
+ .on('mouseout', () => {
+ d3.select('#tooltip')
+ .style('display', 'none')
+
+ })
+ }
+ )
diff --git a/4-data-visualization/2-scatterplot/index.scss b/4-data-visualization/2-scatterplot/index.scss
new file mode 100644
index 0000000..b89b2b9
--- /dev/null
+++ b/4-data-visualization/2-scatterplot/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