2d:null 2e:["$","title",null,{"children":"Week3: Data Visualization Challenge | kenbunroku | Observable"}] 33:T552,{ //svg variables let width = 720; let height = 360; //dataset cut let dataLimit = 30000; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); let bg = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); //scales for converting geographic coordinates to pixels let longitudeScale = d3 .scaleLinear() .domain([-180, 60]) .range([0, width]); let latitudeScale = d3 .scaleLinear() .domain([-30, 90]) .range([height, 0]); //scale for converting months to a number between 0 and 1 let monthScale = d3 .scaleLinear() .domain([1, 12]) .range([0, 1]); //loop through all items in dataset for (let i = 0; i < dataLimit; i = i + 1) { let xPosition = longitudeScale(parseFloat(cetacea[i].decimalLongitude)); let yPosition = latitudeScale(parseFloat(cetacea[i].decimalLatitude)); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr('r', 1.2) .attr( 'fill', d3.interpolateViridis(monthScale(parseInt(cetacea[i].month))) ) .attr('stroke-width', '.5'); } //show visualization in Observable return svg.node(); }34:Tc67,{ //collector counting off the months let months = {}; //look over for (let i = 0; i < cetacea.length; i++) { let sightingMonth; //check if we need to add a zero in front of the month for Jan-Sept. //so 5>05 but 11->11 if (parseInt(cetacea[i].month) < 10) { sightingMonth = cetacea[i].year + "0" + cetacea[i].month; } else { sightingMonth = cetacea[i].year + cetacea[i].month; } //check if we have seen this month+year combo before if (sightingMonth in months) { //if we have seen it already, add one months[sightingMonth]++; } else { //otherwise, make a new key months[sightingMonth] = 1; } } //create an arrays to organize data let cetaceansByMonth = []; for (let property in months) { cetaceansByMonth.push({ name: property, count: months[property] }); } console.log(cetaceansByMonth); //sort months by their name - weird and not covered in the tutorial, but should make some intuitive sense? //looks like an accessor function, right? cetaceansByMonth.sort((a, b) => { return parseInt(a.name) - parseInt(b.name); }); //svg variablesj let width = 800; let height = 400; let margin = 25; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("fill", "#ddd"); //create SVG background let bg = svg .append("rect") .attr('x', 0) .attr('y', 0) .attr("width", width) .attr("height", height); //accessor function to find min and max counts let monthMinMax = d3.extent(cetaceansByMonth, d => d.count); //scales for counts to pixels and parameters let monthSizeScale = d3 .scaleLinear() .domain(monthMinMax) .range([margin, height - margin * 2]); let monthParameterScale = d3 .scaleLinear() .domain(monthMinMax) .range([0, 1]); //how wide should each bar be? let barWidth = (width - margin * 2) / cetaceansByMonth.length; //loop through all items in dataset for (let i = 0; i < cetaceansByMonth.length; i++) { // for converting data to pixels let barLength = monthSizeScale(parseFloat(cetaceansByMonth[i].count)); // for converting data to parameter between 0 and 1 let barParameter = monthParameterScale( parseFloat(cetaceansByMonth[i].count) ); //draw rectangle for each month svg .append("rect") .attr("x", i * barWidth + margin) //pesky needing to flip vertically .attr("y", height - barLength - margin) .attr('width', barWidth) .attr('height', barLength) .attr('fill', d3.interpolateViridis(barParameter)); //check if we are seeing a January... if (cetaceansByMonth[i]["name"].slice(4) == "01") { //add a textlabel for the new year svg .append("text") .attr("x", i * barWidth + margin) .attr("y", height - margin / 2) .text(cetaceansByMonth[i]["name"].slice(0, 4)) .attr('fill', 'black') .attr('font-family', 'courier') .attr('font-size', 8); } } //show visualization in Observable return svg.node(); }35:Tfe4,{ // list up top 5 countries let top5Countries = ["NL", "GB", "US", "NO", "DK"]; //collector counting off the months let months = {}; let cetaceansByMonth = []; // go through the loop for each top5 for (let c = 0; c < top5Countries.length; c++) { for (let i = 0; i < cetacea.length; i++) { // check countryCode of each datum corresponds to top5 if (cetacea[i].countryCode == top5Countries[c]) { //look over and attatch countryCode to month to avoid overlapping let sightingMonth = cetacea[i].countryCode + cetacea[i].month; //check if we have seen this month+year combo before if (sightingMonth in months) { //if we have seen it already, add one months[sightingMonth]++; } else { //otherwise, make a new key months[sightingMonth] = 1; } } } } //create an arrays to organize data for (let property in months) { cetaceansByMonth.push({ name: property, count: months[property] }); } //svg variablesj let width = 800; let height = 400; let margin = 25; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("fill", "#e5d8bd"); //create SVG background let bg = svg .append("rect") .attr('x', 0) .attr('y', 0) .attr("width", width) .attr("height", height); //accessor function to find min and max counts let monthMinMax = d3.extent(cetaceansByMonth, d => d.count); //scales for counts to parameters let monthParameterScale = d3 .scaleLinear() .domain(monthMinMax) .range([0, 1]); // calculate the gap between each vertical line let verticalGap = (height - margin * 2) / 12; // scales for counts to pixels let monthSizeScale = d3 .scaleLinear() .domain(monthMinMax) .range([0, verticalGap]); // calculate the gap between each horizontal line let horizontalGap = (width - margin * 2) / top5Countries.length; // loop throught all items in dataset for (let i = 0; i < cetaceansByMonth.length; i++) { for (let c = 0; c < top5Countries.length; c++) { if (cetaceansByMonth[i]["name"].slice(0, 2) == top5Countries[c]) { // for converting data to pixels let circleRadius = monthSizeScale( parseFloat(cetaceansByMonth[i].count) ); // for converting data to parameter between 0 and 1 let barParameter = monthParameterScale( parseFloat(cetaceansByMonth[i].count) ); let monthNumber = cetaceansByMonth[i]["name"].slice(2); // draw circle for each month svg .append("circle") .attr("cx", (c + 1) * horizontalGap) .attr("cy", monthNumber * verticalGap) .attr("r", circleRadius) .attr("fill", d3.interpolateViridis(barParameter)) .attr("opacity", .5); // label country name svg .append("text") .attr("x", (c + 1) * horizontalGap) .attr("y", height - margin / 2) .text(cetaceansByMonth[i]["name"].slice(0, 2)) .attr("fill", "black") .attr("text-anchor", "middle") .attr("fill", "#616161") .attr("font-family", "Arial, Helvetica, sans-serif"); let monthName = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; // label month name svg .append("text") .attr("x", margin) .attr("y", monthNumber * verticalGap) .text(monthName[monthNumber - 1]) .attr("fill", "black") .attr("transform", "translate(0 5)") .attr("fill", "#616161") .attr("font-size", "0.75em") .attr("font-family", "Arial, Helvetica, sans-serif"); } } } //show visualization in Observable return svg.node(); }36:T538,{ //svg variables let width = 720; let height = 360; //dataset cut let dataLimit = 20000; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); let bg = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); //scales for converting geographic coordinates to pixels let longitudeScale = d3 .scaleLinear() .domain([-140, -50]) .range([0, width]); let latitudeScale = d3 .scaleLinear() .domain([10, 55]) .range([height, 0]); //scale for converting months to a number between 0 and 1 let monthScale = d3 .scaleLinear() .domain([1, 12]) .range([0, 1]); //loop through all items in dataset for (let i = 0; i < dataLimit; i = i + 1) { let xPosition = longitudeScale(parseFloat(firefly[i].decimalLongitude)); let yPosition = latitudeScale(parseFloat(firefly[i].decimalLatitude)); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr('r', 1.2) .attr('fill', d3.interpolateTurbo(monthScale(parseInt(firefly[i].month)))) .attr('stroke-width', '.5'); } //show visualization in Observable return svg.node(); }37:Tce0,{ //collector counting off the months let months = {}; //look over for (let i = 0; i < firefly.length; i++) { // select data after 2010 and eliminate non month data if (firefly[i].year >= 2010 && firefly[i].month != "") { let sightingMonth; //check if we need to add a zero in front of the month for Jan-Sept. //so 5>05 but 11->11 if (parseInt(firefly[i].month) < 10) { sightingMonth = firefly[i].year + "0" + firefly[i].month; } else { sightingMonth = firefly[i].year + firefly[i].month; } //check if we have seen this month+year combo before if (sightingMonth in months) { //if we have seen it already, add one months[sightingMonth]++; } else { //otherwise, make a new key months[sightingMonth] = 1; } } } //create an arrays to organize data let firefliesByMonth = []; for (let property in months) { firefliesByMonth.push({ name: property, count: months[property] }); } //sort months by their name - weird and not covered in the tutorial, but should make some intuitive sense? //looks like an accessor function, right? firefliesByMonth.sort((a, b) => { return parseInt(a.name) - parseInt(b.name); }); //svg variables let width = 800; let height = 400; let margin = 25; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("fill", "#ddd"); //create SVG background let bg = svg .append("rect") .attr('x', 0) .attr('y', 0) .attr("width", width) .attr("height", height); //accessor function to find min and max counts let monthMinMax = d3.extent(firefliesByMonth, d => d.count); //scales for counts to pixels and parameters let monthSizeScale = d3 .scaleLinear() .domain(monthMinMax) .range([margin, height - margin * 2]); let monthParameterScale = d3 .scaleLinear() .domain(monthMinMax) .range([0, 1]); //how wide should each bar be? let barWidth = (width - margin * 2) / firefliesByMonth.length; //loop through all items in dataset for (let i = 0; i < firefliesByMonth.length; i++) { // for converting data to pixels let barLength = monthSizeScale(parseFloat(firefliesByMonth[i].count)); // for converting data to parameter between 0 and 1 let barParameter = monthParameterScale( parseFloat(firefliesByMonth[i].count) ); //draw rectangle for each month svg .append("rect") .attr("x", i * barWidth + margin) //pesky needing to flip vertically .attr("y", height - barLength - margin) .attr('width', barWidth) .attr('height', barLength) .attr('fill', d3.interpolateTurbo(barParameter)); //check if we are seeing a January... if (firefliesByMonth[i]["name"].slice(4) == "01") { //add a textlabel for the new year svg .append("text") .attr("x", i * barWidth + margin) .attr("y", height - margin / 2) .text(firefliesByMonth[i]["name"].slice(0, 4)) .attr('fill', 'black') .attr('font-family', 'courier') .attr('font-size', 8); } } //show visualization in Observable return svg.node(); }38:Tff3,{ // list up top 5 countries let top5Countries = ["GB", "US", "FR", "SE", "CA"]; //collector counting off the months let months = {}; let firefliesByMonth = []; // go through the loop for each top5 for (let c = 0; c < top5Countries.length; c++) { for (let i = 0; i < firefly.length; i++) { // check countryCode of each datum corresponds to top5 if ( firefly[i].countryCode == top5Countries[c] && firefly[i].month != "" ) { //look over and attatch countryCode to month to avoid overlapping let sightingMonth = firefly[i].countryCode + firefly[i].month; //check if we have seen this month+year combo before if (sightingMonth in months) { //if we have seen it already, add one months[sightingMonth]++; } else { //otherwise, make a new key months[sightingMonth] = 1; } } } } //create an arrays to organize data for (let property in months) { firefliesByMonth.push({ name: property, count: months[property] }); } //svg variablesj let width = 800; let height = 400; let margin = 25; //create SVG artboard let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("fill", "#e5d8bd"); //create SVG background let bg = svg .append("rect") .attr('x', 0) .attr('y', 0) .attr("width", width) .attr("height", height); //accessor function to find min and max counts let monthMinMax = d3.extent(firefliesByMonth, d => d.count); //scales for counts to parameters let monthParameterScale = d3 .scaleLinear() .domain(monthMinMax) .range([0, 1]); // calculate the gap between each vertical line let verticalGap = (height - margin * 2) / 12; // scales for counts to pixels let monthSizeScale = d3 .scaleLinear() .domain(monthMinMax) .range([0, verticalGap]); // calculate the gap between each horizontal line let horizontalGap = (width - margin * 2) / top5Countries.length; // loop throught all items in dataset for (let i = 0; i < firefliesByMonth.length; i++) { for (let c = 0; c < top5Countries.length; c++) { if (firefliesByMonth[i]["name"].slice(0, 2) == top5Countries[c]) { // for converting data to pixels let circleRadius = monthSizeScale( parseFloat(firefliesByMonth[i].count) ); // for converting data to parameter between 0 and 1 let barParameter = monthParameterScale( parseFloat(firefliesByMonth[i].count) ); let monthNumber = firefliesByMonth[i]["name"].slice(2); // draw circle for each month svg .append("circle") .attr("cx", (c + 1) * horizontalGap) .attr("cy", monthNumber * verticalGap) .attr("r", circleRadius) .attr("fill", d3.interpolateTurbo(barParameter)) .attr("opacity", .5); // label country name svg .append("text") .attr("x", (c + 1) * horizontalGap) .attr("y", height - margin / 2) .text(firefliesByMonth[i]["name"].slice(0, 2)) .attr("text-anchor", "middle") .attr("fill", "#616161") .attr("font-family", "Arial, Helvetica, sans-serif"); let monthName = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; // label month name svg .append("text") .attr("x", margin) .attr("y", monthNumber * verticalGap) .text(monthName[monthNumber - 1]) .attr("fill", "black") .attr("transform", "translate(0 5)") .attr("fill", "#616161") .attr("font-size", "0.75em") .attr("font-family", "Arial, Helvetica, sans-serif"); } } } //show visualization in Observable return svg.node(); }39:[{"id":"3ced5bb1924da22f051f63ab83f91e38a379979ecf7982593ba94572bc1626018f882351a68d128c4d1c3022f4d1581c95fe53c7c959834c34605bb3d19848ae","href":"https://static.observableusercontent.com/files/3ced5bb1924da22f051f63ab83f91e38a379979ecf7982593ba94572bc1626018f882351a68d128c4d1c3022f4d1581c95fe53c7c959834c34605bb3d19848ae","name":"firefly@3.csv","type":"text/csv","lastModified":1600082931374.878,"size":11442273},{"id":"f9a6ba2272778aa2bb508f53a82eafd24e27cba9507bd7afd57da05968fab49133646d028058cf5089673c2ac5f8481323a1b1a87a0cf0587bbb723864bc8b8d","href":"https://static.observableusercontent.com/files/f9a6ba2272778aa2bb508f53a82eafd24e27cba9507bd7afd57da05968fab49133646d028058cf5089673c2ac5f8481323a1b1a87a0cf0587bbb723864bc8b8d","name":"cetacea@1.csv","type":"text/csv","lastModified":1600082906611.748,"size":9935276}] 31:{"id":"321e378f412d6076","slug":"week3-data-visualization-challenge","title":"Week3: Data Visualization Challenge","thumbnail":"5d331eab94ea673fa9c1f16aa8c32a0e9601da00e2256e8d56acad7bfa4bb3a0","access_level":"public","create_time":"$D2020-09-13T13:36:54.483Z","update_time":"$D2022-09-21T15:45:37.134Z","view_time":null,"first_public_time":"$D2020-09-13T13:59:14.623Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6bd07d5d45d1a90f","login":"kenbunroku","name":"kenbunroku","avatar_url":"https://avatars-next.observableusercontent.com/30e8f4673e24d3895b8cc541f0f71438fc9bfc17e08aff6feb0e6ff342671d34","tier":"starter_2024"},"version":430,"publish_version":430,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b836af60ca8e040","login":"kenbunroku","name":"kenbunroku","avatar_url":"https://avatars-next.observableusercontent.com/30e8f4673e24d3895b8cc541f0f71438fc9bfc17e08aff6feb0e6ff342671d34","tier":null}],"members":[{"type":"individual","id":"6b836af60ca8e040","login":"kenbunroku","name":"kenbunroku","avatar_url":"https://avatars-next.observableusercontent.com/30e8f4673e24d3895b8cc541f0f71438fc9bfc17e08aff6feb0e6ff342671d34","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a4058c41e62b2d5a","slug":"intro-to-d3-js","title":"Intro to D3.js","owner":{"id":"6bd07d5d45d1a90f","login":"kenbunroku","name":"kenbunroku"}},"type":"notebook","body":{"title":"Week3: Data Visualization Challenge","cells":[{"id":0,"value":"md`# Week3: Data Visualization Challenge`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"cetacea = d3.csvParse(await FileAttachment(\"cetacea@1.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"firefly = d3.csvParse(await FileAttachment(\"firefly@3.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`### Cetacean Map around the US and Europe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### Number of cetacean observations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`### Count countries where cetaceans were observed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"{\n // Count countryCode\n let countires = {};\n\n // look over\n for (let i = 0; i < cetacea.length; i++) {\n let country = cetacea[i].countryCode;\n\n if (country in countires) {\n countires[country]++;\n } else {\n countires[country] = 1;\n }\n }\n return countires; // how to descend the data?\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"md`### Country x Month`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`### Firefly Map in the US`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`### Number of firefly observations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`### Countries where firefies were observed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"{\n // Count countryCode\n let countires = {};\n\n // look over\n for (let i = 0; i < firefly.length; i++) {\n let country = firefly[i].countryCode;\n\n if (country in countires) {\n countires[country]++;\n } else {\n countires[country] = 1;\n }\n }\n return countires; // how to descend the data?\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"