28:null 29:["$","title",null,{"children":"Interactive Visual Data Exploration of Divvy Rideshare | Raka Primardika | Observable"}] 2e:T4ab,/** * Given Divvy data, return object showing the percentage * of member-casual and bike types */ function getPercentages(data) { const counts = {} for (let ride of data) { const member = ride.member_casual; const bike = ride.rideable_type; if (!(member in counts)) { counts[member] = {}; } if (!(bike in counts[member])) { counts[member][bike] = 1; } else { counts[member][bike] += 1; } } var fix = (counts) => { return { ...counts, casual: {classic_bike: bikeCountsRaw.casual.classic_bike + bikeCountsRaw.casual.docked_bike, electric_bike: bikeCountsRaw.casual.electric_bike} }; } let bikeCounts = fix(counts); const total_casual = Object.values(bikeCounts.casual).reduce((a,b) => a + b); const total_member = Object.values(bikeCounts.member).reduce((a,b) => a + b); return { casual: {classic_bike: bikeCounts.casual.classic_bike / total_casual, electric_bike: bikeCounts.casual.electric_bike / total_casual}, member: {classic_bike: bikeCounts.member.classic_bike / total_member, electric_bike: bikeCounts.member.electric_bike / total_member} }; }2f:T56c,pieChartImage = { // set the dimensions and margins of the graph const width = 900, height = 450, margin = 40; // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin. const total_casual = Object.values(bikeCounts.casual).reduce((a,b) => a + b); const total_member = Object.values(bikeCounts.member).reduce((a,b) => a + b); const radius2 = Math.min(width, height) / 2 - margin; const radius1 = radius2 * Math.sqrt(total_casual / total_member); // proportion encoded in circle areas // append the svg object to the div called 'my_dataviz' const svg = d3.create("svg") .attr("width", width) .attr("height", height) const chart1 = svg.append("g") .attr("transform", `translate(${width / 4}, ${height / 2})`); const chart2 = svg.append("g") .attr("transform", `translate(${3 * width / 4}, ${height / 2})`); // Create dummy data const data = {a: 9, b: 20, c:30, d:8, e:12} pieChart(chart1, bikeRatios.casual, radius1, "Casual riders"); pieChart(chart2, bikeRatios.member, radius2, "Membership riders"); svg.append('text') .attr('x', width / 3 - 250) .attr('y', 30) .attr('fill', 'black') .attr('font-size', 30) .attr('dominant-baseline', 'middle') .text("Casual vs Member Bike Type Ratios") return svg.node(); }30:T54a,pieChart = (element, data, radius, title) => { // set the color scale const color = d3.scaleOrdinal() .range([DIVVYBLUE,LYFTPINK]); // Compute the position of each group on the pie: const pie = d3.pie() .value(function(d) {return d[1]}) const data_ready = pie(Object.entries(data)) // Now I know that group A goes from 0 degrees to x degrees and so on. // shape helper to build arcs: const arcGenerator = d3.arc() .innerRadius(0) .outerRadius(radius) // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function. element .selectAll('mySlices') .data(data_ready) .join('path') .attr('d', arcGenerator) .attr('fill', function(d){ return(color(d.data[0])) }) .attr("stroke", "black") .style("stroke-width", "2px") .style("opacity", 0.7) // Now add the annotation. Use the centroid method to get the best coordinates element .selectAll('mySlices') .data(data_ready) .join('text') .text(function(d){ return d.data[0]+' : '+ parseFloat(d.data[1]* 100).toFixed(2)+"%"}) .attr("transform", function(d) { return `translate(${arcGenerator.centroid(d)})`}) .style("text-anchor", "middle") .style("font-size", 13); element .append("text") .attr("text-anchor", "middle") .attr("dy", ".3em").text(title) .attr("transform", `translate(0, ${radius+ 20})`); }31:Ta54,lineChart = () => { // set the dimensions and margins of the graph const margin = {top: 70, right: 30, bottom: 50, left: 80}, width = 600 - margin.left - margin.right, height = 450 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const lineChart = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // console.log(countsByTime(raw).map(d => d.hour)) //Read the data let x = d3.scaleLinear() .domain(d3.extent(countsByTime(raw).map(d => d.hour))) .range([ 0, width ]); let xAxis = lineChart.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).ticks(24)); // Add Y axis let y = d3.scaleLinear() .domain([0, d3.max(countsByTime(raw).map(d => d.rides))]) .range([ height, 0 ]); let yAxisGroup = lineChart.append("g") let yAxis = yAxisGroup .call(d3.axisLeft(y)); // Add the line let path = lineChart.append("path") path .datum(countsByTime(raw)) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) {return x(d.hour)}) .y(function(d) {return y(d.rides)}) ) function update(data) { // update x axis const t = svg.transition() .ease(d3.easeLinear) .duration(200); y = d3.scaleLinear() .domain([0, d3.max(countsByTime(data).map(d => d.rides))]) .range([ height, 0 ]); yAxis = yAxisGroup .transition(t) .call(d3.axisLeft(y)); // draw bars path .datum(countsByTime(data)) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) {return x(d.hour)}) .y(function(d) {return y(d.rides)}) ) } // Title svg.append('text') .attr('x', width / 2 - 100) .attr('y', margin.top / 3) .attr('fill', 'black') .attr('font-size', 30) .attr('dominant-baseline', 'middle') .text('Divvy Ridership per Hour') // xlabel svg.append('text') .attr('x', width / 2 - 20 + margin.left) .attr('y', height + margin.top + 35) .attr('fill', 'black') .attr('font-size', 15) .attr('dominant-baseline', 'middle') .text('hour of day') return Object.assign(svg.node(), { update }); }32:T8e7,map = () => { const raw2 = raw.slice(0, 5000) const initialValue = raw2; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let image = svg.append("g") .attr("pointer-events", "none") .selectAll("image"); image.data(tiles, d => d).join("image") .attr("xlink:href", d => url(...d3.tileWrap(d))) .attr("x", ([x]) => { // console.log((x + tiles.translate[0]) * tiles.scale); return (x + tiles.translate[0]) * tiles.scale}) .attr("y", ([, y]) => { // console.log((y + tiles.translate[1]) * tiles.scale); return (y + tiles.translate[1]) * tiles.scale}); const color = d3.scaleOrdinal() .domain(["classic_bike", "docked_bike", "electric_bike"]) .range([DIVVYBLUE,DIVVYBLUE,LYFTPINK]); // console.log(raw2); const dots = svg .selectAll("circles") .data(initialValue) .enter() .append("circle") .attr('cx', d => projection([d.start_lng, d.start_lat])[0]) .attr('cy', d=> projection([d.start_lng, d.start_lat])[1]) .attr('r', 5) const brush = d3.brush() // set the space that the brush can take up .extent([[0, 0], [width, height]]) // handle events .on('brush', onBrush) .on('end', onEnd); svg.append('g') .call(brush); function onBrush(event) { // event.selection gives us the coordinates of the // top left and bottom right of the brush box const [[x1, y1], [x2, y2]] = event.selection; // return true if the dot is in the brush box, false otherwise function isBrushed(d) { const point = projection([d.start_lng, d.start_lat]) return point[0] >= x1 && point[0] <= x2 && point[1] >= y1 && point[1] <= y2; } // style the dots dots.attr('fill', d =>{ return isBrushed(d) ? color(d.rideable_type) : 'gray'}); // update the data that appears in the raw2 variable svg.property('value', raw.filter(isBrushed)).dispatch('input'); } function onEnd(event) { // if the brush is cleared if (event.selection === null) { // reset the color of all of the dots dots.attr('fill', d => color(d.rideable_type)); svg.property('value', raw).dispatch('input'); } } return svg.node(); }33:T930,function scatterplot() { // TODO: Add plot title // TODO: Add legend const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // axes g.append("g").call(xAxis, x, 'duration (seconds)'); g.append("g").call(yAxis, y, 'distance (metres)'); // draw points g.selectAll('circle') // filter data to only contain selected car origins .data(filtered) .join('circle') .attr('cx', d => x(d.duration_seconds)) .attr('cy', d => y(d.distance_metres)) .attr('fill', d => bikeColor(d.rideable_type)) .attr('opacity', 1) .attr('r', 3); // Title svg.append('text') .attr('x', visWidth / 2 - 200) .attr('y', margin.top / 3) .attr('fill', 'black') .attr('font-size', 30) .attr('dominant-baseline', 'middle') .text(title) // Subtitle svg.append('text') .attr('x', visWidth / 2 - 100) .attr('y', margin.top * 2 / 3) .attr('text-align', 'center') .attr('fill', 'black') .attr('font-size', 15) .attr('dominant-baseline', 'middle') .text(subtitle) // Legend svg.append('rect') .attr('width', 200) .attr('height', 70) .attr('x', visWidth - margin.right - 80) .attr('y', margin.top + 5) .attr('fill', '#eeeeee') .attr('opacity', 1) svg.append('circle') .attr('cx', visWidth - margin.right - 50) .attr('cy', margin.top + 25) .attr('fill', LYFTPINK) .attr('opacity', 1) .attr('r', 8); svg.append('circle') .attr('cx', visWidth - margin.right - 50) .attr('cy', margin.top + 55) .attr('fill', DIVVYBLUE) .attr('opacity', 1) .attr('r', 8); svg.append('text') .attr('x', visWidth - margin.right - 35) .attr('y', margin.top + 27) .attr('text-align', 'center') .attr('fill', 'black') .attr('font-size', 15) .attr('dominant-baseline', 'middle') .text('Electric Bike') svg.append('text') .attr('x', visWidth - margin.right - 35) .attr('y', margin.top + 57) .attr('text-align', 'center') .attr('fill', 'black') .attr('font-size', 15) .attr('dominant-baseline', 'middle') .text('Normal Bike') return svg.node(); }34:[{"id":"b1b0897453ffc1a1e0842b050bebf95905ad62bb6ec24b37922053821a9285611153ea74f28ff5a44949f6492d6164c0e77b49e2276988ff6d80be2b89656bfd","href":"https://static.observableusercontent.com/files/b1b0897453ffc1a1e0842b050bebf95905ad62bb6ec24b37922053821a9285611153ea74f28ff5a44949f6492d6164c0e77b49e2276988ff6d80be2b89656bfd","name":"divvy_dataset@2.csv","type":"text/csv","lastModified":1665931235809.513,"size":24246091},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1666884467120.578,"size":795407}] 2c:{"id":"2129d6d43ecff9c9","slug":"cs424-project-2","title":"Interactive Visual Data Exploration of Divvy Rideshare","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-10-15T22:07:22.821Z","update_time":"$D2022-11-29T03:11:14.481Z","view_time":null,"first_public_time":"$D2022-10-16T03:37:04.417Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4a89da457d2516a1","login":"rakaprimardika","name":"Raka Primardika","avatar_url":"https://avatars-next.observableusercontent.com/02dce83249fd2b3c1ba7b88e01a32a449662f2aa636c5cb5fc85b5760b0de010","tier":"starter_2024"},"version":1153,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2348a3bdd2b2262f","login":"rakaprimardika","name":"Raka Primardika","avatar_url":"https://avatars-next.observableusercontent.com/02dce83249fd2b3c1ba7b88e01a32a449662f2aa636c5cb5fc85b5760b0de010","tier":null}],"members":[{"type":"individual","id":"aa60f4acf4f59125","login":"duynguyen2001","name":"Khanh Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/e3f1bc71676644d503cb7a3a45f51c6b1d9b81d6c1ff1ea1977857222c327ab0","tier":null,"role":"editor"},{"type":"individual","id":"2348a3bdd2b2262f","login":"rakaprimardika","name":"Raka Primardika","avatar_url":"https://avatars-next.observableusercontent.com/02dce83249fd2b3c1ba7b88e01a32a449662f2aa636c5cb5fc85b5760b0de010","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Interactive Visual Data Exploration of Divvy Rideshare","cells":[{"id":0,"value":"# Interactive Visual Data Exploration of Divvy Rideshare\n\nUniversity of Illinois at Chicago, CS 424 Fall 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1014,"value":"In this notebook, we create **3** data visualisations based on data from Divvy, a bike sharing service based in Chicago. We therefore have divided this notebook into **3 sections**:\n- 👨‍💼 Member Type vs Bike Type\n - Static Pie Chart\n- ⏳ Hourly Ridership\n - Interactive Line Chart and Geographic Scatterplot (Linked View)\n- 📐 Distance and Duration Distribution\n - Interactive Scatterplot with Slider (Single View)\n\nEach of these visualisations are driven by questions we formulated. These questions can be accessed through GitHub.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1009,"value":"## 👥 Group Members","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1011,"value":"Raka Primardika (aprima3@uic.edu), Khanh Duy Nguyen (knguye71@uic.edu)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"## Logistics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"Our project notes are located at [this GitHub repository](https://github.com/uic-vis/project-2-raka-s-team). In the `README.md` file, we mention the domain and data questions that drive the direction of our analysis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"Due to file size constraints, we are working with Divvy data in between **19 September 2022** and **25 September 2022** inclusive. This will still allow us to examine data throughout all seven days of the week.\n\nThere are just under **120 thousand** unique rides in our dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"## Loading Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1004,"value":"The \"raw\" data here has been slightly preprocessed with `pandas` and `geopandas`. The Jupyter notebook can be located in the [GitHub repository](https://github.com/uic-vis/project-2-raka-s-team).\n\nThe preprocessing done with Python includes:\n- Removing `NaN` values.\n- Filtering to only one week of data.\n- Added two extra columns:\n - `duration_seconds`: The gap between `started_at` and `ended_at`, measured in seconds.\n - `distance_metres`: The _straight line_ distance between starting and ending coordinates of the Divvy trip, measured in metres. Calculated using `geopandas`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"raw = FileAttachment(\"divvy_dataset@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"## 👨‍💼 Member Type vs Bike Type","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"**Q04** How do e-bike and classic bike ridership ratios differ for each membership type?\n\nWe are going to first calculate the _e-bike_ counts for each member type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"bikeCountsRaw = {\n\n // want something like\n // { \n // member: {electric: 13, normal: 67},\n // casual: {electric: 57, normal: 155}\n // }\n\n const counts = {}\n\n for (let ride of raw) {\n \n const member = ride.member_casual;\n const bike = ride.rideable_type;\n\n if (!(member in counts)) {\n counts[member] = {};\n }\n\n if (!(bike in counts[member])) {\n counts[member][bike] = 1;\n } else {\n counts[member][bike] += 1;\n }\n \n }\n\n return counts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"We see that there is a category of bikes called `docked_bike` which only appears in the `casual` member category. We don't want a mismatch of bike types for both member types, so we are going to _consider these docked bikes as classic bikes_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"bikeCounts = {\n return {\n ...bikeCountsRaw,\n casual: {classic_bike: bikeCountsRaw.casual.classic_bike + bikeCountsRaw.casual.docked_bike, \n electric_bike: bikeCountsRaw.casual.electric_bike}\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"We also want to calculate the e-bike ratios for both member types. We can save these as proportion values and then plot them as percentage values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"bikeRatios = {\n \n const total_casual = Object.values(bikeCounts.casual).reduce((a,b) => a + b);\n const total_member = Object.values(bikeCounts.member).reduce((a,b) => a + b);\n return {casual: {classic_bike: bikeCounts.casual.classic_bike / total_casual,\n electric_bike: bikeCounts.casual.electric_bike / total_casual},\n member: {classic_bike: bikeCounts.member.classic_bike / total_member,\n electric_bike: bikeCounts.member.electric_bike / total_member}\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"A _pie chart_ will be best to visualise this data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1137,"value":"getPercentages(raw);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"## ⏳ Hourly Ridership","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"**Q05** Given a region in Chicago, how does the number of all Divvy rides change for each hour of the day?\n\nWe will create a _function_ that counts the number of _all_ Divvy rides given a subset of the raw data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"countsByTime = (data) => {\n\n const counts = {}\n\n for (let ride of data) {\n\n const parseTime = d3.timeParse(\"%Y-%m-%d %H:%M:%S\");\n const time = parseTime(ride.started_at).getHours();\n\n if (!(time in counts)) {\n counts[time] = 1;\n } else {\n counts[time] += 1;\n }\n \n }\n\n const arr = []\n for (var key in counts) {\n if (counts.hasOwnProperty(key)) {\n arr.push( { hour: parseInt(key), rides: counts[key] } );\n }\n}\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"### Map Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"projection = d3.geoMercator()\n .center([-87.621946, 41.886156])\n .scale(Math.pow(2, 21) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n . zoomDelta(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"d3.extent(tiles.map(d=>d[0]).map(x => (x+tiles.translate[0]) * tiles.scale))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"d3.extent(tiles.map(d=>d[1]).map(y => (y+tiles.translate[1]) * tiles.scale))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"Choose the type of map with this dropdown menu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"viewof url = {\n const options = [\n {\n name: \"CartoDB Voyager\",\n value: (x, y, z) => `https://${\"abc\"[Math.abs(x + y) % 3]}.basemaps.cartocdn.com/rastertiles/voyager/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}.png`\n },\n {\n name: \"OSM Mapnik\", \n value: (x, y, z) => `https://${\"abc\"[Math.abs(x + y) % 3]}.tile.osm.org/${z}/${x}/${y}.png`\n }\n ];\n const form = html`