2d:null 2e:["$","title",null,{"children":"A deep dive into bike-share programs across the US | Jennah Haque | Observable"}] 33:T4a2,**How well are bike stations distributed by income level?** Well, it depends on the **socio-spatial** distribution of income in each city, which we don't claim to have modeled in this project. Because we wanted to be able to compare the neighborhood income distribution of bike stations *across* cities, we needed to make a few simplifying assumptions. First, we chose to use quintiles to segment the population of each city into equally sized buckets per city, even though the income distribution varies by city. Then, we came up with two possible assumptions about the *spatial* distribution of income in a city: 1. Neighborhoods are distributed **equally** across the quintiles (Out of 100 neighborhoods, 20 neighborhoods are in each quintile). 2. Neighborhoods are distributed along a **normal distribution** across the quintiles (Out of 100 neighborhoods in the city, we expect to see a lot of neighborhoods with a median near the citywide median income, and few at the extremes). For simplicity, we chose to make the first assumption. As it turns out in the figure below, **no matter which assumption you make**, bike stations are skewed towards higher income neighborhoods.34:T780,There's not enough information (how many census blocks exist for each quintile in each city?) to make concrete judgments about which city is most well distributed but it raises some interesting questions: **1. How should we measure equitable distribution?** San Francisco, for example, technically has the majority of its bike stations in neighborhoods below the citywide median household income, but that doesn't mean the distribution on the neighborhood or even quintile level is equitable. **2. What's the balance between expanding to new neighborhoods vs. concentrating resources at existing public transportation hot spots that are frequented by people of all income levels?** If you think that stations should be equally distributed across all quintiles, then the *Percent Difference* graph shows that we have a "shortage" of stations in the lowest and richest neighborhoods. However, research shows that lower-income individuals rely on public transit options more than high-income individuals. If you think that stations should follow a normal distribution, then the *Percentage of Stations* graph shows that current bike station distribution does produce a somewhat normal curve, albeit slightly skewed to higher than the median because of Austin. If you think that stations should be distributed based on who uses bikes most often, then we'd need more data about the riders themselves. **3. How does the location of stations in census blocks of certain income levels correlate with bikeshare usage itself?** New York City has disproportionately more stations in highest income neighborhoods, while Austin has disproportionately more stations in lowest income neighborhoods. Is that bad? Not necessarily. It could still be the case that low-income New Yorkers use the bike-share bikes more often than low-income Austinites. This comes back to the need for demographic data in addition to system logs.35:T4e1,{ // create an interval selection over an x-axis encoding const brush = vl.selectInterval().encodings('x'); // determine opacity based on brush const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1); // an overview histogram of cars per year // add the interval brush to select cars over time const overview = vl.markBar() .encode( vl.x().fieldN('City') // extract year unit, treat as ordinal .axis({title: null, labelAngle: 0}), // no title, no label angle vl.y().fieldQ('Total_trips').title(null), // counts, no axis title vl.color().fieldN("City"), vl.tooltip(['City', 'Total_trips']), opacity // modulate bar opacity based on the brush selection ) .select(brush) // add interval brush selection to the chart .width(400) // use the full default chart width .height(50); // set chart height to 50 pixels const detail = vl.markPoint() .encode( vl.x().fieldQ('Hour_day'), vl.y().fieldQ('Duration_minutes'), vl.color().fieldN('City'), opacity // modulate point opacity based on the brush selection ); // vertically concatenate (vconcat) charts return vl.data(cities_vis3).vconcat(overview, detail).render(); }36:T19eb,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart(data, { //x = ([, x]) => x, x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 20, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 50, // left margin, in pixels width= 1100, height= 400, mapwidth=550, chartwidth = 450, totalwidth = 1050, xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, chartwidth - 4*marginRight], // [left, right] xLabel, xFormat, yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, 4*marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "current color", //d => colorCity(d.operator),//**original -->** "current color", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, d => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d")); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svgContainer = d3.create("svg") .attr("width", totalwidth) .attr("height", 610) .attr("viewBox", [0, 0, width, height]) const svg_map = svgContainer.append('g') .attr('width', totalwidth) .attr('height', 500) .attr('fill', 'gainsboro') .attr("transform", `scale(0.5, 0.5)`) const scale = d3.scaleOrdinal() .domain(["Lyft", "BCycle", "Other"]) .range(["#FF00BF", "yellow", "gray"]); const legend = d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(400)()) //.shape("circle") .shapePadding(35) .labelOffset(20) .scale(scale) .labels(["Lyft", "BCycle", "Other"]); svg_map.append("g") .attr("class", "legend_auto") .style('font-size', 30) .style('font-family', 'sans-serif') .attr("transform", `translate(100, -120)`) .attr('fill', 'black') .call(legend) // Add SVG map at correct size, pull map from Professor Agarwala's github svg_map.append('path') .datum(states_data) .attr("d", geopath) drawCircles(svg_map, Year) const svg1 = svgContainer.append("g") .attr("width", chartwidth) .attr("height", height) .attr("transform", `translate(${mapwidth - marginLeft},${-3*marginTop})`) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); svg1.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", (chartwidth - marginRight)/2) .attr("y", 35) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(xLabel)); svg1.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 2.5*marginTop) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const path = svg1.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg1.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .attr("y", -16); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point path.style("stroke", ([z]) => Z[i] === z ? null : "#ddd").filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); svg1.property("value", O[i]).dispatch("input", {bubbles: true}); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg1.node().value = null; svg1.dispatch("input", {bubbles: true}); } // return Object.assign(svg1.node(), {value: null}); return svgContainer.node(); }37:T80b,function drawCircles(svg, n) { let data = vis1dataset .filter(d => d.year == n); const circleGroups = svg.selectAll('circle') .data(data) .join('g') circleGroups.append('circle') .attr('class', 'city_cirlce') .attr("id", function(d) { return "city_circle" + d.id; }) .attr('r', 1) // Use d.size to set size attr. .attr('cx', d => projection([d.longitude, d.latitude])[0]) .attr('cy', d => projection([d.longitude, d.latitude])[1]) // .transition().duration(1000) .attr('fill', 'black') .attr('opacity', .8) circleGroups.append('circle') .attr('class', 'bike_circle') .attr("id", function(d) { return "bike_circle" + d.id; }) .attr('r', d => numBikesToRadius(d.num_bikes_july)) // Use d.size to set size attr. .attr('cx', d => projection([d.longitude, d.latitude])[0]) .attr('cy', d => projection([d.longitude, d.latitude])[1]) .on('mouseover', function (event, d) { svg.append('text') .attr('class', 'ptLabel') .attr("font-family", "sans-serif") .attr('x', projection([d.longitude, d.latitude])[0] - 60) .attr('y', projection([d.longitude, d.latitude])[1] - 70) .style("font-size", "30px") .attr("fill", "black") .text(d.city_name + " (" + d.year + "): "); svg.append('text') .attr('class', 'ptLabel') .attr("font-family", "sans-serif") .attr('x', projection([d.longitude, d.latitude])[0] - 60) .attr('y', projection([d.longitude, d.latitude])[1] - 40) .style("font-size", "30px") .attr("fill", "black") .text(d.num_bikes_july + " total bikes"); }) .on('mouseout', function(event, d) { svg.selectAll('.ptLabel').remove() // Remove all ptLabels }) //.transition() //.attr('fill', 'blue') .attr('fill', d => vis1_colorCity(d.operator_type, d.num_bikes_july)) .attr('opacity', .8) .transition().duration(1000) .ease(d3.easeCubic) .duration(1000) }; 38:T2159,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/diverging-bar-chart function DivergingBarChart(data, { x = d => d, // given d in data, returns the (quantitative) x-value y = (d, i) => i, // given d in data, returns the (ordinal) y-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 40, // right margin, in pixels marginBottom = 10, // bottom margin, in pixels marginLeft = 60, // left margin, in pixels width = 700, // outer width of chart, in pixels height = 600, // the outer height of the chart, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, 2*width/3 - marginRight], // [left, right] xFormat, // a format specifier string for the x-axis xLabel, // a label for the x-axis yPadding = 0.1, // amount of y-range to reserve to separate bars yDomain, // an array of (ordinal) y-values yRange, // [top, bottom] colors = d3.schemePiYG[3], // [negative, …, positive] colors lineheight = 20 } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the y-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = Y; yDomain = new d3.InternSet(yDomain); // Omit any data not present in the y-domain. // Lookup the x-value for a given y-value. const I = d3.range(X.length).filter(i => yDomain.has(Y[i])); const YX = d3.rollup(I, ([i]) => X[i], i => Y[i]); // Compute the default height. if (height === undefined) height = Math.ceil((yDomain.size + yPadding) * 25) + marginTop + marginBottom; if (yRange === undefined) yRange = [marginTop, height - marginBottom]; // Construct scales, axes, and formats. const xScale = xType(xDomain, xRange); const yScale = d3.scaleBand(yDomain, yRange).padding(yPadding); const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat); const yAxis = d3.axisLeft(yScale).tickSize(0).tickPadding(6); const format = xScale.tickFormat(100, xFormat); // Compute titles. if (title === undefined) { title = i => `${Y[i]}\n${format(X[i])}`; } else if (title !== null) { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", height - marginTop - marginBottom) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", xScale(0)) .attr("y", -22) .attr("fill", "currentColor") .attr("text-anchor", "center") .text(xLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("class", "rect") .attr("id", i=>Y[i]) .attr("fill", i => colorCity(Y[i])) .attr("opacity", 0.5) .attr("x", i => Math.min(xScale(0), xScale(X[i]))) .attr("y", i => yScale(Y[i])) .attr("width", i => Math.abs(xScale(X[i]) - xScale(0))) .attr("height", yScale.bandwidth()) .on("mouseover", function (d) { let city_bucket = d.srcElement.id; let cityabbr = city_bucket.split("_")[0]; let city = city_dict[city_bucket.split("_")[0]].full; let bucket = city_bucket.split("_")[1]; let rightverb = city_dict[cityabbr].actual[bucket/20 - 1] == 1 ? " is " : " are " let rightplurality = city_dict[cityabbr].actual[bucket/20 - 1] == 1 ? "" : "s" let lessormore = city_dict[cityabbr].actual[bucket/20 - 1] < city_dict[cityabbr].expected ? "less" : "more"; svg.append("text") .attr("class", "description") .attr("font-weight", "bold") .style("opacity", 1) .attr("fill", city_dict[city_bucket.split("_")[0]].color) .attr("x", width*.625) .attr("y", 2*marginTop + lineheight) .text(city+ ", " + bucketRange(bucket)) svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 2*lineheight) .text("1 in 5 households in " + city + " make") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 3*lineheight) .text(incomeRange(cityabbr, bucket) + " a year.") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 5*lineheight) .text("Assuming that the neighborhoods are equally") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 6*lineheight) .text("distributed among the five income levels,") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("font-weight", "bold") .attr("y", 2*marginTop + 7*lineheight) .text("we expected " + city_dict[cityabbr].expected + " out of the city's total " + city_dict[cityabbr].total + " stations") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 8*lineheight) .text("to be distributed across neighborhoods with a ") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 9*lineheight) .text("median household income in this range.") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("font-weight", "bold") .attr("y", 2*marginTop + 11*lineheight) .text("There " + rightverb + " actually " + city_dict[cityabbr].actual[bucket/20 - 1] + " station" + rightplurality + ".") svg.append("text") .attr("class", "description") .attr("x", width*.625) .attr("y", 2*marginTop + 12*lineheight) .text("That's " + lessormore + " than expected.") svg.select("#" +city_bucket).attr("opacity", 1); }) .on("mouseout", function (event, d) { svg.selectAll(".rect").attr("opacity", 0.5); // Remove all ptLabels svg.selectAll(".description").remove(); // Remove all ptLabels }); if (title) bar.append("title") .text(title); svg.append("g") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(I) .join("text") .attr("text-anchor", i => X[i] < 0 ? "end" : "start") .attr("x", i => xScale(X[i]) + Math.sign(X[i] - 0) * 4) .attr("y", i => yScale(Y[i]) + yScale.bandwidth() / 2) .attr("dy", "0.35em") .text(i => isNaN(X[i]) ? " " : format(X[i])); svg.append("g") .attr("transform", `translate(${xScale(0)},0)`) .call(yAxis) .call(g => g.selectAll(".tick text") .filter(y => y.includes("P")) .attr("font-weight", "bold")) .call(g => g.selectAll(".tick text") .filter(y => y.includes("break")) .attr("fill", "white")) .call(g => g.selectAll(".tick text") .filter(y => y.split("_")[0] == "aus") .text("Austin")) .call(g => g.selectAll(".tick text") .filter(y => y.split("_")[0] == "bos") .text("Boston")) .call(g => g.selectAll(".tick text") .filter(y => y.split("_")[0] == "chi") .text("Chicago")) .call(g => g.selectAll(".tick text") .filter(y => y.split("_")[0] == "nyc") .text("New York City")) .call(g => g.selectAll(".tick text") .filter(y => y.split("_")[0] == "sf") .text("San Francisco")) .call(g => g.selectAll(".tick text") .filter(y => YX.get(y) < 0) .attr("text-anchor", "start") .attr("x", 6)); svg.append("text") .attr("class", "subtitle") .attr("x", width*.625) .attr("y", 2*marginTop - lineheight) .text("← Hover over a bar above to learn more:"); return svg.node(); }39:[{"id":"b65254bc62cab85cf73c56a2f77f236673c0764ebaca823ac51a8082eb5e7f675b09dd14c8409b0c97266e3a2fff8ff2a362e80e51ce429305954400e78655e8","href":"https://static.observableusercontent.com/files/b65254bc62cab85cf73c56a2f77f236673c0764ebaca823ac51a8082eb5e7f675b09dd14c8409b0c97266e3a2fff8ff2a362e80e51ce429305954400e78655e8","name":"visual 1 dataset - Sheet1.csv","type":"text/csv","lastModified":1639174409514.338,"size":42950},{"id":"7110a425c04665201ec461d4f1180022ec435f4760a54eaa5181fe40797f826f87f7fd03f6f7e45aec29e568ac5616ec26176d26fbfe1f430c8f023b37a7654b","href":"https://static.observableusercontent.com/files/7110a425c04665201ec461d4f1180022ec435f4760a54eaa5181fe40797f826f87f7fd03f6f7e45aec29e568ac5616ec26176d26fbfe1f430c8f023b37a7654b","name":"download@1.jpg","type":"image/jpeg","lastModified":1639103099053.366,"size":155753},{"id":"92ddec763e96bd81e98c28a3a16997435507c8b801ef4220963f0877a3f5d554926ea559a62ec38b30b0354764939fbc2cd61111f09ab18376ac206592f139d6","href":"https://static.observableusercontent.com/files/92ddec763e96bd81e98c28a3a16997435507c8b801ef4220963f0877a3f5d554926ea559a62ec38b30b0354764939fbc2cd61111f09ab18376ac206592f139d6","name":"bikes.jpg","type":"image/jpeg","lastModified":1639103413066.11,"size":1045949},{"id":"deb55923f03fa6307a0f9d666333932415e04b1fe3f43a51741727330bbdf3f2a480a9febfa541594cf8325bddfa52419b7a012f80ea4186d90a48ede5b53274","href":"https://static.observableusercontent.com/files/deb55923f03fa6307a0f9d666333932415e04b1fe3f43a51741727330bbdf3f2a480a9febfa541594cf8325bddfa52419b7a012f80ea4186d90a48ede5b53274","name":"Income Distribution - final_statatlas(5)-5.csv","type":"text/csv","lastModified":1639158236247.615,"size":545},{"id":"60100d6f0ee0254229204a812c3fd5230a253f2a93c8073299dcb69439affaee662014c6b9d9f43f186c09884ebefaf5aa621819d01e082c96a96af0e401fb34","href":"https://static.observableusercontent.com/files/60100d6f0ee0254229204a812c3fd5230a253f2a93c8073299dcb69439affaee662014c6b9d9f43f186c09884ebefaf5aa621819d01e082c96a96af0e401fb34","name":"images.jpg","type":"image/jpeg","lastModified":1639179931047.462,"size":13352},{"id":"3c4b8ba6816eafba1237a663b7553ac46aeb37eae610a750e1e04e6f0512b9530533819f677bed541002c214ba953d46d83442e0d84fa3b9d86834d083f0fafc","href":"https://static.observableusercontent.com/files/3c4b8ba6816eafba1237a663b7553ac46aeb37eae610a750e1e04e6f0512b9530533819f677bed541002c214ba953d46d83442e0d84fa3b9d86834d083f0fafc","name":"neighborhood-guide-icon.png","type":"image/png","lastModified":1639179792097.404,"size":10578},{"id":"a1724fe444068c28e229dac6031efc99b3d3125a347979dbf2193c4a2eb61f1e95c84c2f43ed4f01e8b5c434be4b38214b55a395d6d9b17b5febf26ed0ff2cc2","href":"https://static.observableusercontent.com/files/a1724fe444068c28e229dac6031efc99b3d3125a347979dbf2193c4a2eb61f1e95c84c2f43ed4f01e8b5c434be4b38214b55a395d6d9b17b5febf26ed0ff2cc2","name":"smart-phones-icons.png","type":"image/png","lastModified":1639179592392.27,"size":30181},{"id":"467bff4b643e9bbe2978ce02689750821f5d8352613ce373cf94190d3966216bea3b3654938a1fabbb62d90bdc26b246489d09c06af1965af0dfa4522a462ba8","href":"https://static.observableusercontent.com/files/467bff4b643e9bbe2978ce02689750821f5d8352613ce373cf94190d3966216bea3b3654938a1fabbb62d90bdc26b246489d09c06af1965af0dfa4522a462ba8","name":"bike-sharing-system.jpg","type":"image/jpeg","lastModified":1639178757385.487,"size":100509},{"id":"6fa9b91db54c21a6b01831a05834af2ae20738f6e1c8409c3dcb14e16d90b08a8d134b131594eb9bbef776debe2ed4edf6287e0198694b9e952f453beb771929","href":"https://static.observableusercontent.com/files/6fa9b91db54c21a6b01831a05834af2ae20738f6e1c8409c3dcb14e16d90b08a8d134b131594eb9bbef776debe2ed4edf6287e0198694b9e952f453beb771929","name":"us-states-1.json","type":"application/json","lastModified":1639173963335.626,"size":88338},{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states.json","type":"application/json","lastModified":1639173958941.236,"size":82031},{"id":"a3ba436ae92a9ca0794527f9fc6f2da68889758c801256df444f27c885b812eadae11e0c9d29098622f7b1bb5cf5552f805cf79637582b3018c1fc3275de3c6b","href":"https://static.observableusercontent.com/files/a3ba436ae92a9ca0794527f9fc6f2da68889758c801256df444f27c885b812eadae11e0c9d29098622f7b1bb5cf5552f805cf79637582b3018c1fc3275de3c6b","name":"updated.csv","type":"text/csv","lastModified":1639157489782.479,"size":399},{"id":"cec4cd7503942b88e9b48b64d948c970e613dc13433c8a8269512cb123d57f28bef70e109154ff662c98c8d4b324b7ebab557e0809d7414cd361e5c6c9f2464c","href":"https://static.observableusercontent.com/files/cec4cd7503942b88e9b48b64d948c970e613dc13433c8a8269512cb123d57f28bef70e109154ff662c98c8d4b324b7ebab557e0809d7414cd361e5c6c9f2464c","name":"cities_final.csv","type":"text/csv","lastModified":1639157340214.648,"size":7360}] 31:{"id":"ceec8b818fcbb414","slug":"cs448bfinalproject","title":"A deep dive into bike-share programs across the US","thumbnail":"1f53ee46c3486120f347b395acb3b5d1569f6cb1a992638c9c394c37774402fc","access_level":"public","create_time":"$D2021-12-07T23:25:37.161Z","update_time":"$D2021-12-11T03:04:47.827Z","view_time":null,"first_public_time":"$D2021-12-11T02:40:47.311Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"75050baec5072f17","login":"4bd20473306f283e","name":"Jennah Haque","avatar_url":"https://avatars-next.observableusercontent.com/47b511c21b1525072390c1f3d237a2a53dbf494578cb18a0ea5064fd195759e4","tier":"starter_2024"},"version":1257,"publish_version":1257,"role":null,"authored":false,"authors":[{"type":"individual","id":"4bd20473306f283e","login":"4bd20473306f283e","name":"Jennah Haque","avatar_url":"https://avatars-next.observableusercontent.com/47b511c21b1525072390c1f3d237a2a53dbf494578cb18a0ea5064fd195759e4","tier":null}],"members":[{"type":"individual","id":"4bd20473306f283e","login":"4bd20473306f283e","name":"Jennah Haque","avatar_url":"https://avatars-next.observableusercontent.com/47b511c21b1525072390c1f3d237a2a53dbf494578cb18a0ea5064fd195759e4","tier":null,"role":"editor"},{"type":"individual","id":"39808c2da236b54f","login":"jennylihan","name":"Jenny Han","avatar_url":"https://avatars-next.observableusercontent.com/e2029faa3fc9c8ffe86bb4b2b54cb5324020d1e9fb1700ddb6a5c2c30d5d7ba6","tier":null,"role":"editor"},{"type":"individual","id":"0b1c571c18998149","login":"kgjert","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A deep dive into bike-share programs across the US","cells":[{"id":0,"value":"# A deep dive into bike-share programs across the US\n\nBy Katherine Gjersten, Jenny Han, and Jennah Haque\n\nCS448b Fall 2021 Final Project\n\n**Important note: ** For best viewing results, please use Google Chrome.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## In the last twenty years, city biking has changed dramatically. Here's how.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"md`${await FileAttachment(\"download@1.jpg\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Bike-share systems have infiltrated urban landscapes. These programs offer short term rental bikes throughout a city for a short period of time. Bikes can be taken out as often as every morning for a commute to work, or even just a one time day tour of a new city.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"And they’ve taken off. There are currently active bike-share programs in over 60 cities in the United States.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1021,"value":"*Related: [Bike-share Lauded By Curbed as Biggest Transit Success Story of the 2010s](https://archive.curbed.com/2019/12/16/20864145/bike-share-citi-bike-jump-uber)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":468,"value":"*If you're curious to learn more about our data sources and data transformation, check out the methodology section at the bottom of the page.* ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"# How do they work?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"Most bike-share programs are operated through public private partnerships. A city will often partner with a private company to bring in and operate bikes throughout the city. Take Divvy bikes in Chicago. In 2019, the city of Chicago gave Motivate, a subsidiary of Lyft, exclusive bike rights to the entire city.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"*Related: [Uber Sues Chicago Over Its Divvy Bike Share Deal With Lyft, Calling It ‘A Backroom Monopoly'](https://blockclubchicago.org/2019/08/02/uber-sues-chicago-over-its-divvy-bike-share-deal-with-lyft-calling-it-a-backroom-monopoly/)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":455,"value":"You’ll often see familiar brands associated with bike-share programs. That generally represents their title sponsor. For Blue Bikes in Boston, the Blue is for Blue Cross Blue Shield. NYC Citi bikes are named after title sponsor Citi group. But make no mistake, they're usually still operated by the same actor: Lyft.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"**Lyft isn't just operating in Chicago. Lyft controls bike-shares in at least 7 metropolitan areas within the US. Population wise, they serve over 15 million people. **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"There are a few other notable players as well: Bcycle, a public bike sharing program based in Wisconsin operates in a number of smaller cities across the US too. Cycle Hop, Social Bikes, and Corps Logistics also operate in multiple metropolitan areas. Other cities operate their programs through a non-profit of government agency. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1246,"value":"*Related: [Bloomberg CityLab Asks: Why Don't Transit Agencies Do Bikeshare?](https://www.bloomberg.com/news/articles/2021-04-15/transit-agencies-can-make-bikeshare-work-better?utm_medium=social&utm_content=citylab&utm_source=twitter&utm_campaign=socialflow-organic)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"*Take a look at the map of all the active stations in the US over time. Notice the pink dots, which represent bike share programs operated by Lyft growing significantly over time, particularly in the more populous cities. *","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"## Which operators have dominated the city-bike program market share?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1106,"value":"Lyft gains clear majority stake in most populous metropolitan areas. BCycle operates in a higher number of smaller cities.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1194,"value":"*Click the play button to watch bike-share growth over time. You can also use drag the circle to your desired year. *","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"viewof Year = Scrubber(\n d3.range(2010,2022, 1),\n {autoplay: false, delay: 500, loop: true }, \n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"chart1 = LineChart(filtered_map_data, {\n x: d => +d.year,\n y: d => d.total_bikes,\n z: d => d.operator,\n yLabel: \"Number of Bikes\",\n xLabel: \"Year\",\n yType: d3.scaleLinear, // type of y-scale,\n // xDomain: [2010, 2021],\n yDomain: [.1, 35000],\n title: function title(d) {\n return d.operator + \" (\" + d.year + \"): \" + d.total_bikes;},\n //color: d => colorCity(d.operator)\n // color: \"steelblue\"\n color: function colorcity(d) {\n let color = \"gray\";\n if (d == \"lyft\") color = '#FF00BF';\n if (d == \"bcycle\") color = 'yellow';\n // if (num_bikes == 0) color = 'none';\n return color;}\n// } //d => colorCity(d.operator)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"*Not pictured: the first pilot of a municipal bike-share program in the United States was in 2007, in Tulsa, Oklahoma.* ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"*Accessibility caption: This is a side by side graphic. Left graphic shows a bubble map of number of bike stations in US city from 2010-2021. Right graphic shows a line chart of number of stations per operator from 2010-2021.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"# Where are these bike stations?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"The potential for bike-share programs is vast. If stations are placed strategically, they can provide more transportation options for low-income users or solve the last mile problem. If not, they may be adopted only by a niche group of users in certain neighborhoods, potentially reinforcing negative legacies of segregation, gentrification, and income inequality.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1035,"value":"*Related: [Tensions in San Francisco Rise after Bike-share Fare Hike](https://www.sfexaminer.com/news/san-franciscos-bike-sharing-program-reckons-with-an-uncertain-future/)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1042,"value":"*Related: [San Francisco Announces Bike-share Expansion and Commitment to Equity](https://www.sfmta.com/blog/bikeshare-station-expansion-and-e-bike-price-changes)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"Because we don't have access to rider demographics directly, we examine the income level of the neighborhood/census block where each station is located in across 5 cities as a proxy for who's using these bikes and where.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"## How well are bike stations distributed by income level?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"For most cities, there are fewer bike stations in the lowest and highest income neighborhoods; this mostly poses an accessibility concern for low-income bike-share users.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1200,"value":"*Select any combination of cities and one view-frame. Hover over a bar to learn more about the accessibility for a city's specific income bracket.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"viewof selected_cities = Inputs.checkbox([\"aus\", \"bos\", \"chi\", \"nyc\", \"sf\"], {value: [\"aus\", \"bos\", \"chi\", \"nyc\", \"sf\"], label: html`Select Cities`, format: function (x) {\n let col = city_dict[x].color;\n let name = city_dict[x].full;\n return html`${name}`}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof metric = Inputs.radio(new Map([[\"Percent of stations (percentage of stations in the city in this income range)\", \"absolute\"], [\"Percent difference (expected percentage of stations vs. actual percentage of stations in the city in this income range)\", \"relative\"]]), {value: \"absolute\", label: html`Select View`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"chart = DivergingBarChart(filtered_data, {\n x: metric === \"absolute\" ? d => d[2019]/city_station_totals[getCityAbbr(d.city_bucket.split(\"_\")[0])] : d => calculatePercentage(d.city_bucket, d[2019], d[2010]),\n y: d => d.city_bucket,\n xFormat: metric === \"absolute\" ? \"%\" : \"+%\",\n xLabel: metric === \"absolute\" ? \"Percent of stations →\": \"← Less than expected ······ Balanced number of bike stations for income level ······ More than expected →\",\n width:1100,\n marginRight: 70,\n marginLeft: 90,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"*Accessibility caption: This is a bar graph divided by income distribution. We plot the expected percentage of stations for that income bracket versus the actual for all 5 cities. *","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1217,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"# Who's riding these bikes? What's the impact?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":769,"value":"md`${await FileAttachment(\"bike-sharing-system.jpg\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"Finally, bike-share programs have the power to impact a city’s environmental footprint. First, let’s look at some ridership trends across the following 5 cities: SF, NYC, Boston, Chicago, and Austin.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"Across these 5 cities, over 1 million trips were taken in the month of October. These trips lasted anywhere from 5 minutes to almost 3 hours. We sampled 50 trips in October from each city and then looked at the timing and trip duration. Let's break this down by city.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"## When are bike rides most common? Which city bikes the most? How long does a bike ride last?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"An overwhelming majority of trips are taken in Chicago or Boston. Most trips are 20 minutes or less sometime between 6am-8pm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"*Drag out one city or a group of cities in the upper bar chart to see how it affects the points in the lower scatter plot. Hover over a bar in the upper chart to see the total trips taken in October for that city.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"*Accessibility caption: This is a interactive bar chart connected to a scatter plot. The bar chart shows the total trips taken in October for the following 5 cities: Austin,Boston, Chicago, New York City, and San Fransisco. The scatter plot shows hour of the day on the x axis, and trip duration on the y axis. When you drag a pane over a city in the bar chart, a scatter plot highlighting the corresponding data will light up. *","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"Now, let's zoom out and consider how this connects to climate change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"We calculated an estimate of how many miles were traveled through bike-share programs across the 5 cities in the month of October.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1028,"value":"We multiple the total of number of trips taken by the average trip duration to get aggregate time biking. We estimate a speed of 10 miles per hour, an assumption Google Map makes as well.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":658,"value":"The total distance traveled then comes out to a whopping **3562784.731 miles**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":661,"value":"Assuming **22.5** miles per gallon, this is equivalent to using **158345.9881** gallons of gas used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"How does that translate to Carbon Emissions?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"That is equivalent to...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":674,"value":"## 1407.695834 Metric Tons of Carbon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"Let's put that number into context: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":694,"value":"**That's equivalent to the carbon emitted from 306 Passenger vehicles driven for one year.**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":849,"value":"md`${await FileAttachment(\"images.jpg\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"**That's equivalent to the carbon emitted from charging 171,151,204 smart phones.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":823,"value":"md`${await FileAttachment(\"smart-phones-icons.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"**\nThat's equivalent to the carbon emitted from 256 homes' electricity use for a year. **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":836,"value":"md`${await FileAttachment(\"neighborhood-guide-icon.png\").image()}`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"Source: [EPA Greenhouse Gas Equivalencies Calculator](https://www.epa.gov/energy/greenhouse-gas-equivalencies-calculator)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":812,"value":"*Related: [Bike-share programs aren’t profitable but chip away at emissions](https://www.marketplace.org/2021/10/06/bike-share-programs-arent-profitable-but-chip-away-at-emissions/)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":969,"value":"This is just the energy savings from a month's worth of data. Most of these bike-share programs have been in place for years. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"**Bikes truly can change a city.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":985,"value":"Thanks for scrolling! We hope you learned something :)\n\n- ------__o\n- -----_\\ <,_\n- ----(_)/ (_)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":995,"value":"md`${await FileAttachment(\"bikes.jpg\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"\n\n \n \n \n \n\n\n\n \n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1067,"value":"## FOOTNOTES\n\nBike data is open source and can be found at the following links:\n- [Austin](https://data.austintexas.gov/Transportation-and-Mobility/Austin-MetroBike-Trips/tyfh-5r8s)\n- [Boston](https://www.bluebikes.com/system-data)\n- [Chicago](https://www.divvybikes.com/system-data)\n- [New York City](https://ride.citibikenyc.com/system-data)\n- [San Francisco](https://www.lyft.com/bikes/bay-wheels/system-data) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1144,"value":"#### Methodology behind Visualization 1:\n\n1. To calculate summary statistics of each city's bike-share program, we used data aggregated on https://bikeshare-research.org/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1080,"value":"#### Methodology behind Visualization 2:\n\n1. To calculate the median household income of the surrounding census block of each station, we used the help of [Geocodio](https://www.geocod.io/latitude-longitude-coordinates-to-median-household-income/) to convert Lat/Longitude to median household income based on the 2020 Census.\n2. To calculate the household income quintiles of each city, we used a combination of 2016 and 2019 Census data. the [percentage distributions for quintiles in 2016](https://statisticalatlas.com/place/California/San-Francisco/Household-Income), but projected this onto the updated medians from 2020.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1088,"value":"#### Methodology behind Visualization 3:\n1. We calculated summary statistics like total number of trips, average trip duration, and hour of the day for the 5 cities (Austin, Boston, Chicago, New York City, and San Fransisco) in SQL.\n2. After experimenting with several visualizations, we settle on visualizing total number of trips by city in a bar graph. In aggregate, this is more than a million trips. We decide to limit our sample size when visualizing time of day and trip duration.\n3. We limit our data frame to bike rides spanning less than 360 minutes so that the scales don't alter completely for one or two outliers. We sample 50 bike rides for each city.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"**SOURCES**\n\nFor some visualizations, we adapted Observable code or used the abstracted D3 libraries created by Mike Bostock.\n\nThe following notebooks and resources were referenced for this assignment:\nhttps://observablehq.com/@stanfordvis/introduction-to-vega-lite\nhttps://observablehq.com/@didoesdigital/7-may-2020-d3-scatterplot\nhttps://observablehq.com/@d3/multi-line-chart\nhttps://observablehq.com/@d3/bubble-map\nhttps://observablehq.com/@stanfordvis/lets-make-a-scatterplot\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"**ACKNOWLEDGEMENTS**\n\nWe'd like to thank Professor Maneesh Agarwala and TAs Shana and Dae-Hyun for all their guidance this quarter. Many (many) visualizations later, we are excited to showcase this final product. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"**CODE, DATA AND LIBRARIES USED**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"d3 = require('d3@7') //load d3 library","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"#### Visualization 1:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1078,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":490,"value":"filtered_map_data = vis1data\n .filter(d => d.year <= Year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"vis1data = d3.csv(\"https://raw.githubusercontent.com/jennylihan/cs448b-bikes/main/clean%20vis%201%20-%20Sheet1-2.csv\", function(d) {\n return {\n total_bikes: +d.total_bikes,\n year: d.year,\n operator: d.operator,\n ID: +d.ID,\n operator_type: d.operator_type\n };\n}).then(function(vis1data){\n return vis1data;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"vis1dataset = FileAttachment(\"visual 1 dataset - Sheet1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"states_data = FileAttachment(\"us-states-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"projection = d3.geoAlbersUsa().scale(1200).translate([510, 280])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"us = FileAttachment(\"states.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"geopath = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"function vis1_colorCity(operator_type, num_bikes) {\n let color = \"gray\";\n if (operator_type == \"lyft\") color = '#FF00BF';\n if (operator_type == \"bcycle\") color = 'yellow';\n if (num_bikes == 0) color = 'none';\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"function numBikesToRadius(num_bikes) {\n // City Lab: 100,2000,7000,10000+\n\n //TODO: figure out log scale later\n let bucket = num_bikes;\n if (num_bikes < 1000) bucket = 400;\n else if (num_bikes < 2000) bucket = 800;\n else if (num_bikes < 6000) bucket = 2400;\n else bucket = 6000;\n \n return bucket/80;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"focus = Generators.input(chart1) // or say viewof focus = LineChart(…)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"swatches({\n color: d3.scaleOrdinal([\"Lyft\", \"BCycle\", \"Other\"], [\"#FF00BF\", \"yellow\", \"gray\"])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import {geoEqualEarth, geoPath} from \"https://cdn.skypack.dev/d3-geo@3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"#### Visualization 2:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"filtered_data = cities\n .filter(d => selected_cities.includes(getCityAbbr(d.city_bucket)) || d.city_bucket.includes(\"break\") || d.city_bucket.includes(\"P\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"city_dict = ({\n \n \"aus\": {color: color_scheme[0], full: \"Austin\", total: 72, income:[30276.65, 56330.31, 88754.24, 143152.00], expected: 14, actual: [13, 6, 18, 33, 2]}, \n \"bos\": {color: color_scheme[1], full: \"Boston\", total: 384, income:[19769.97, 51771.72, 93160.65, 160719.90], expected: 77, \nactual: [15, 65, 112, 162, 30]}, \n \"chi\": {color: color_scheme[2], full: \"Chicago\", total:782, income:[21943, 46173, 79736, 135366], expected: 156, \nactual: [50, 208, 210, 209, 105]},\n \"nyc\": {color: color_scheme[3], full: \"New York City\", total:1332, income:[21503.33, 47614.51, 83837.38, 143355.52], expected: 266, actual: [89, 286, 355, 363, 239]}, \n \"sf\": {color: color_scheme[4], full: \"San Francisco\", total:251, income:[33960, 83662.06, 145059.21, 244014.33], expected: 50, actual: [10,53,84,103,1]}});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"cities = FileAttachment(\"Income Distribution - final_statatlas(5)-5.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"color_scheme = [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"city_station_totals = ({bos: 384, aus: 72, nyc: 1332, sf:251, chi:782});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"function calculatePercentage(bucket, actual_num, expected_num){\n if (bucket.includes(\"break\") || bucket.includes(\"P\")) {\n return;\n }\n let cityname = bucket.split(\"_\")[0];\n return (actual_num - expected_num)/city_dict[cityname].total\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function getCityAbbr(city_bucket) {\n if (city_bucket.includes(\"break\") || city_bucket.includes(\"P\")) {\n return;\n }\n return city_bucket.split(\"_\")[0] \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function colorCity(city_bucket) {\n let cityabbr = city_bucket.split(\"_\")[0]; \n switch (cityabbr) {\n case 'aus':\n return color_scheme[0]\n case 'bos':\n return color_scheme[1]\n case 'chi':\n return color_scheme[2]\n case 'nyc':\n return color_scheme[3]\n case 'sf':\n return color_scheme[4]\n default:\n return \"black\"\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":" function incomeRange(cityabbr, bucket) {\n let incomes = city_dict[cityabbr].income;\n switch (bucket) {\n case \"20\":\n return \"between $0 and $\" + incomes[0];\n case \"40\":\n return \"between $\" + incomes[0] + \" and $\" + incomes[1];\n case \"60\":\n return \"between $\" + incomes[1] + \" and $\" + incomes[2];\n case \"80\":\n return \"between $\" + incomes[2] + \" and $\" + incomes[3];\n case \"100\":\n return \"over $\" + incomes[3];\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"function bucketRange(bucket){\n switch(bucket){\n case \"20\":\n return \"0 - 20th percentile\";\n case \"40\":\n return \"20th - 40th percentile\";\n case \"60\":\n return \"40th - 60th percentile\";\n case \"80\":\n return \"60th - 80th percentile\";\n case \"100\":\n return \"80th - 100th percentile\"; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"#### Visualization 3:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"cities_vis3 = FileAttachment(\"cities_final.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"dataset = FileAttachment(\"updated.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"import {fromColumns, printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"