From e27b5fcfd8f8edc1f10915f6737127810b23b36f Mon Sep 17 00:00:00 2001 From: CherryKitten Date: Sun, 23 Oct 2022 21:44:56 +0200 Subject: [PATCH] Add Scatterplot Graph Certification Project --- 4-data-visualization/2-scatterplot/index.css | 32 +++++++ .../2-scatterplot/index.css.map | 1 + 4-data-visualization/2-scatterplot/index.html | 20 +++++ 4-data-visualization/2-scatterplot/index.js | 85 +++++++++++++++++++ 4-data-visualization/2-scatterplot/index.scss | 30 +++++++ 5 files changed, 168 insertions(+) create mode 100644 4-data-visualization/2-scatterplot/index.css create mode 100644 4-data-visualization/2-scatterplot/index.css.map create mode 100644 4-data-visualization/2-scatterplot/index.html create mode 100644 4-data-visualization/2-scatterplot/index.js create mode 100644 4-data-visualization/2-scatterplot/index.scss 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