a4-colby-frechette

README.md

@@ -1,61 +1,9 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+## Country Population Vis
 
-Due: October 4th, by 11:59 AM.
+https://a4-colb131.glitch.me/
 
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
+This project visualizes the US, China, and India populations from 1960 to 2021. Data obtained from https://github.com/jdorfman/Awesome-JSON-Datasets.
 
-[WebAudio + Canvas Tutorial](https://github.com/cs4241-22a/cs4241-22a.github.io/blob/main/using_webaudio_canvas.md)  
-[SVG + D3 tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svg_and_d3.md)  
-
-Baseline Requirements
----
-
-Your application is required to implement the following functionalities:
-
-- A server created using Express. This server can be as simple as needed.
-- A client-side interactive experience using at least one of the following web technologies frameworks.
-  - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences
-  - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations
-  - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers
-  - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML.
-  - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback.
-- A user interface for interaction with your project, which must expose at least four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `<input>` tags (the `range` type is useful to create sliders). You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that both mouse and touch events will both be supported in your app.
-- Your application should display basic documentation for the user interface when the application first loads.
-
-The interactive experience should possess a reasonable level of complexity. Some examples:
-### Three.js
-- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents.
-- A simple 3D game... you really want this to be a simple as possible or it will be outside the scope of this assignment.
-- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. 
-### Canvas
-- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using <canvas>; we'll be checking to ensure that your implementation is not a copy of these.
-- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. 
-### Web Audio API
-- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib).
-### D3.js
-- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here.
+- This project is a way of exploring d3 in showing a visualization of population data from China, the US, and India.
+- The biggest challenges I faced were in hosting the server, as glitch did not like many of the ways I ws testing locally, and d3's syntax, which is easy to use once learned but hard to learn.
+- The user can use the tweakpane to adjust the graph, changing it's color, showing the line for the values, and changing the country, they can also hover over a bar to see it's exact value.

d3.js

@@ -0,0 +1,187 @@
+const countryURLs = [
+    "https://api.worldbank.org/v2/countries/USA/indicators/SP.POP.TOTL?per_page=5000&format=json",
+    "https://api.worldbank.org/v2/countries/IND/indicators/SP.POP.TOTL?per_page=5000&format=json",
+    "https://api.worldbank.org/v2/countries/CHN/indicators/SP.POP.TOTL?per_page=5000&format=json"
+]
+
+let baseColor = '#ff0055';
+let baseLineColor = '#007dff'
+
+const PARAMS = {
+    chartColor: '#ff0055',
+    showLine: false,
+    lineColor: "#007dff"
+};
+
+let margin = {top: 20, right: 20, bottom: 80, left: 100},
+    width = 800 - margin.left - margin.right,
+    height = 600 - margin.top - margin.bottom;
+
+let xScale = d3.scaleBand().range([0, width]).padding(0.4),
+    yScale = d3.scaleLinear().range([height, 0]);
+
+
+window.addEventListener('load', () => {
+    createPane()
+    getChart(countryURLs[0])
+})
+
+function createPane() {
+    const pane = new Tweakpane.Pane();
+
+    const chartColorInput = pane.addInput(PARAMS, 'chartColor');
+    chartColorInput.on('change', function (e) {
+        countrySvg.selectAll(".bar")
+            .style("fill", e.value)
+        baseColor = e.value
+    })
+
+    const lineInput = pane.addInput(PARAMS, 'showLine', {
+        label: "Show line?",
+    });
+    lineInput.on('change', function (e) {
+        let opacity = e.value ? 4 : 0;
+        console.log(opacity)
+        countrySvg.selectAll("#blueLine")
+            .style("stroke-width", opacity)
+    })
+
+    const lineColorInput = pane.addInput(PARAMS, 'lineColor');
+    lineColorInput.on('change', function (e) {
+        countrySvg.selectAll("#blueLine")
+            .style("stroke", e.value)
+        baseLineColor = e.value
+    })
+
+
+    const countryInput = pane.addBlade({
+        view: 'list',
+        label: 'country',
+        options: [
+            {text: 'USA', value: countryURLs[0]},
+            {text: 'India', value: countryURLs[1]},
+            {text: 'China', value: countryURLs[2]},
+        ],
+        value: 'USA',
+    });
+
+    countryInput.on('change', function (e) {
+        getChart(e.value)
+        lineInput.value = false
+    })
+}
+
+function createScales(data) {
+    xScale.domain(data.map(function (d) {
+        return d.date;
+    }));
+    yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
+
+}
+
+let countrySvg = d3.select("#countryChart")
+    .append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+function getChart(countryURL) {
+    countrySvg.selectAll('*').remove();
+    console.log(countryURL)
+    fetch(countryURL)
+        .then(data => data.json())
+        .then(jsonData => {
+            let data = jsonData[1]
+            createScales(data)
+            console.log(data.length)
+            let countryTitle = document.getElementById("countryTitle");
+            countryTitle.innerHTML = data[0].country.value
+            for (let i = 0; i < data.length; i++) {
+                data[i].date = parseInt(data[i].date);
+                data[i].value = parseInt(data[i].value);
+                console.log("year = " + data[i].date + " value = " + data[i].value);
+
+            }
+
+            countrySvg.selectAll(".bar")
+                .data(data)
+                .enter().append("rect")
+                .attr("class", "bar")
+                .attr("x", function (d) {
+                    return xScale(d.date);
+                })
+                .attr("y", function (d) {
+                    return yScale(d.value);
+                })
+                .attr("width", xScale.bandwidth())
+                .attr("height", function (d) {
+                    return height - yScale(d.value);
+                })
+                .style("fill", baseColor)
+                .on('mouseover', function (d) {
+                    d3.select(this).style("fill", "black");
+                    let div = document.getElementById("textBox");
+                    div.innerHTML += d.country.value + "<br>";
+                    div.innerHTML += "Population in " + d.date + " was : " + d.value.toLocaleString() + "<br>"
+                })
+                .on('mouseout', function () {
+                    d3.select(this).style("fill", baseColor);
+                    let div = document.getElementById("textBox");
+                    div.innerHTML = "";
+                })
+
+
+            let x = d3.scaleBand()
+                .padding(0.2)
+                .range([0, width]);
+
+            let y = d3.scaleLinear()
+                .range([height, 0]);
+
+            let xAxis = d3.axisBottom()
+                .scale(x);
+
+            let yAxis = d3.axisLeft()
+                .scale(y)
+                .ticks(15);
+
+            x.domain(data.map(function(d) { return d.date; }));
+            y.domain([0, d3.max(data, function(d) { return parseInt(d.value); })]);
+
+            countrySvg.append("g")
+                .attr("class", "x axis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(xAxis)
+                .selectAll("text")
+                .style("text-anchor", "end")
+                .attr("dx", "-.8em")
+                .attr("dy", ".15em")
+                .attr("transform", function() {
+                    return "rotate(-65)"
+                });
+
+            countrySvg.append("g")
+                .attr("class", "y axis")
+                .call(yAxis)
+                .append("text")
+                .attr("transform", "rotate(-90)")
+                .attr("y", 6)
+                .attr("dy", ".71em")
+                .style("text-anchor", "end")
+                .text("Year");
+
+            countrySvg.append("path")
+                .attr("id", "blueLine")
+                .datum(data)
+                .attr("fill", "none")
+                .attr("stroke", baseLineColor)
+                .attr("stroke-width", 0)
+                .attr("d", d3.line()
+                    .x(function(d) { return x(d.date) })
+                    .y(function(d) { return y(d.value) })
+                )
+
+        })
+
+}

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script type="module" src="/d3.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
+    <title></title>
+</head>
+<body>
+<h1 id="countryTitle"></h1>
+<svg id="countryChart" width="800" height="600"></svg>
+<div id="textBox"></div>
+</body>
+</html>