25:["$","title",null,{"children":"MTA data exploration | Melanie Sawyer | Observable"}] 4c:T1190,chart3 = { function startButton() { return "HI"; for (var i = 0; i < 48; i++) { var totalLength = path.node().getTotalLength(); ridershipLabel .transition() .duration(1000) .text(getTotalForDay(i) + " total riders") .style("fill", d3.interpolateViridis(1 - allTotals[i]/maxForTotals)); var formatTime = d3.timeFormat("%B %d, %Y"); dateLabel.transition().duration(1000).text(formatTime(data.dates[i])); path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(1000) .attr("stroke-dashoffset", 0) } } var svg = d3.create("svg") .attr("width", 1000) .attr("height", 700) .attr("transform", "translate(40, 0)") var dateLabel = svg.append("text") .attr("id", "date-label") .text("FEBRUARY 16") .attr("x", 50) .attr("y", 50) var ridershipLabel = svg.append("text") .attr("id", "ridership-label") .text(allTotals[0] + " total riders") .attr("fill", d3.interpolateViridis(allTotals[0]/maxForTotals)) .attr("x", 50) .attr("y", 90) var defs = svg.append("defs"); var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient"); //Vertical gradient linearGradient .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); var xScale = d3.scaleLinear() .domain([0, 48]) .range([0, width]); var yScale = d3.scaleLinear() .domain([0, 4000000]) .range([height, 0]); var xAxis = d3.axisBottom() .scale(xScale) var yAxis = d3.axisLeft() .scale(yScale); var xAxisSvg = svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis); var yAxisSvg = svg.append('g') .attr('class', 'y axis') .call(yAxis); var testData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] linearGradient.selectAll("stop") .data(testData) .enter().append("stop") .attr("offset", function(d,i) { return i/(10); }) .attr("stop-color", function(d) { return d3.interpolateViridis(d/10); }); var x = d3.scaleLinear() .domain([0, 48]) .range([0, 1000]); var y = d3.scaleLinear() .domain([0, 4000000]) .range([500,0]); var line = d3.line() .x(function(d, i) { return x(i) }) .y(function(d, i) { return y(d) }) .curve(d3.curveNatural) var gradientColor = (p) => { return d3.interpolateViridis(p/maxForTotals); }; var path = svg.selectAll("path") .data(allTotals) .enter() .append("path") .attr("d", line(allTotals)) .attr("stroke", "url(#linear-gradient)") .attr("stroke-width", "2") .attr("fill", "none") var points = svg.selectAll("circle") .data(allTotals) .enter() .append("circle") .attr("cx", function(d, i) { return x(i) }) .attr("cy", function(d, i) { return y(d) }) .attr("r", 5) .attr("fill", function(d, i) { return d3.interpolateViridis(1 - d/maxForTotals) }) .attr("stroke", "white") var point = svg.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 3) .style("fill", function(d, i) { return d3.interpolateYlOrRd(getTotalForDay(0)/maxForTotals + 0.1) }) svg.append("input").attr("type", "button").attr("value", "start animation").text("Hi there").html("`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"maximum = {\n var max = 0\n for (var i = 0; i < data.series.length; i++) {\n if (data.series[i].values[0] > max) {\n max = data.series[i].values[0];\n }\n }\n return max;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"proj = d3.geoConicConformal()\n .parallels([33, 45])\n .rotate([96, -39])\n .fitSize([1000, 700], nyc2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"path = d3.geoPath()\n .projection(d3.geoConicConformal()\n .parallels([33, 45])\n .rotate([96, -39])\n .fitSize([1000, 700], nyc2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"nyc2 = {\n var betterfeatures = nyc.features.filter(function(d) { \n return d.properties.borough != \"Staten Island\";\n })\n return {\n type: nyc.type,\n features: betterfeatures\n };\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"nyc = d3.json(\"https://gist.githubusercontent.com/pstuffa/928a2a31f352e59edef5ef56fa767e20/raw/7ba0230c627237c12cc1b3809f85d99486621756/nyc.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"maxForTotals = {\n var tots = []\n for (var i = 0; i < 48; i++) {\n tots.push(getTotalForDay(i));\n }\n return d3.max(tots);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"allTotals = {\n var all = []\n for (var i = 0; i < 48; i++) {\n all.push(getTotalForDay(i));\n }\n return all;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"function getTotalForDay(dayNum) {\n var total = 0;\n for (var i = 0; i < data.series.length; i++) {\n total += data.series[i].values[dayNum]\n }\n return total;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"data = {\n var dateRange = d3.timeDays(new Date(2020, 1, 16), new Date(2020, 3, 4));\n var format = d3.timeFormat(\"%a %d\")\n return {\n y: \"Daily Station Entries\",\n series: data_raw,\n dates: dateRange\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"data_raw.splice(0,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n //.call(g => g.select(\".tick:last-of-type text\").clone()\n //.attr(\"x\", 3)\n //.attr(\"text-anchor\", \"start\")\n //.attr(\"font-weight\", \"bold\")\n //.text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n //.x(d => x(d.date))\n //.y(d => y(d.value))\n .x((d, i) => x(data.dates[i]))\n .y(d => y(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()\n //.domain([0, 12000])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require.alias({\n \"d3-array\": \"d3@5\",\n \"d3-axis\": \"d3@5\",\n \"d3-dispatch\": \"d3@5\",\n \"d3-drag\": \"d3@5\",\n \"d3-ease\": \"d3@5\",\n \"d3-scale\": \"d3@5\",\n \"d3-selection\": \"d3@5\",\n \"d3-transition\": \"d3@5\"\n})(\"d3@5\", \"d3-simple-slider@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null