| license: mit |
| b0VIM 8.0 #:�YrR "B curran neon ~curran/topInternetViz/index.html 3210 #"! U tp p y ad 0 p � � � � � S � � � � � � � � o X ? � � � � � � � ` S R - � � { z V / � � � i � | |
| � | |
| � | |
| � | |
| ~ | |
| W | |
| 2 | |
| � � � � z N $ | |
| � � � � � h G F . � � � � ~ e ! � � � � � i h @ % � � � � � q X W . | |
| � � � ` E D ( � � � q % .a .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', ' .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr( .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .selectAll('.cell text') .att yAxisG.call yAxisG.call(yAxis); xAxisG.call(xAxis); .attr('r', 8); .attr('fill-opacity', 0.6) .attr('fill', 'black') .attr('cy', d => yScale(yValue(d))) .attr('cx', d => xScale(xValue(d))) .enter().append('circle') g.selectAll('circle').data(data) .nice(yTicks); .range([innerHeight, 0]) .domain(d3.extent(data, yValue)) yScale .range([0, innerWidth]); .domain(data.map(xValue)) xScale data = top5(data); d3.csv('data.csv', row, data => { const top5 = data => data.slice(0, 5); }; }; netUsers: +netUsersWithCommas.replace(/,/g, '') country: d['Country or Region'], return { const netUsersWithCommas = d['Internet Users 31 Mar 2017']; const row = d => { .tickSize(-innerWidth); .tickFormat(d3.format('.0s')) .tickPadding(15) .ticks(yTicks) .scale(yScale) const yAxis = d3.axisLeft() const yTicks = 5; .tickSize(-innerHeight); .tickPadding(15) .scale(xScale) const xAxis = d3.axisBottom() const yScale = d3.scaleLinear(); const xScale = d3.scalePoint(); .text(yLabel); .style('text-anchor', 'middle') .attr('transform', `rotate(-90)`) .attr('y', -100) .attr('x', -innerHeight / 2) .attr('class', 'axis-label') yAxisG.append('text') .text(xLabel); .attr('y', 90) .attr('x', innerWidth / 2) .attr('class', 'axis-label') xAxisG.append('text') const yAxisG = g.append('g'); .attr('transform', `translate(0, ${innerHeight})`); const xAxisG = g.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const g = svg.append('g') const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const height = svg.attr('height'); const width = svg.attr('width'); const svg = d3.select('svg'); const margin = { left: 150, right: 70, top: 20, bottom: 110 }; const yLabel = 'Internet Users'; const yValue = d => d.netUsers; const xLabel = 'Country'; const xValue = d => d.country; <script> <svg width="960" height="500"></svg> <body> </head> </style> } font-family: sans-serif; font-size: 40pt; fill: #635F5D; .axis-label { } font-family: sans-serif; font-size: 20pt; fill: #8E8883; .tick text { } stroke: #C0C0BB; .tick line { } display: none; .domain { } margin: 0px; body { <style> <title>Top Internet Countries Visualization</title> <script src="https://d3js.org/d3.v4.min.js"></script> <meta name="viewport" content="width=device-width"> <meta charset="utf-8"> <head> <html> <!DOCTYPE html> ad � � � � � � </html> </body> </script> }); |
This is a scatter plot of average MTA ridership for months in 2017. The x-axis is month, the y-axis is the average ridership, and the color of the point is the type of mta mode of transportation that was taken.
The data shown here comes from Data.gov: MTA Average Weekday Ridership by Month. The data shown in the plot is only 2017.
This scatter plot was forked from curran's block: Scatter Plot with Ordinal Axis and Responding to Resize
| Month | Avg_Riders | Type | |
|---|---|---|---|
| Jan | 37667 | Metro | |
| Feb | 37428 | Metro | |
| Mar | 34319 | Metro | |
| Apr | 36558 | Metro | |
| May | 36684 | Metro | |
| Jun | 39484 | Metro | |
| Jan | 18225 | Light Rail | |
| Feb | 20202 | Light Rail | |
| Mar | 22669 | Light Rail | |
| Apr | 23613 | Light Rail | |
| May | 20547 | Light Rail | |
| Jun | 23981 | Light Rail | |
| Jan | 6539 | MARC Brunswick | |
| Feb | 7084 | MARC Brunswick | |
| Mar | 6824 | MARC Brunswick | |
| Apr | 7114 | MARC Brunswick | |
| May | 7333 | MARC Brunswick | |
| Jun | 7497 | MARC Brunswick | |
| Jan | 3669 | MARC Camden | |
| Feb | 4110 | MARC Camden | |
| Mar | 4186 | MARC Camden | |
| Apr | 4575 | MARC Camden | |
| May | 4896 | MARC Camden | |
| Jun | 4684 | MARC Camden | |
| Jan | 20978 | MARC Penn | |
| Feb | 21515 | MARC Penn | |
| Mar | 21659 | MARC Penn | |
| Apr | 23475 | MARC Penn | |
| May | 23508 | MARC Penn | |
| Jun | 24267 | MARC Penn | |
| Jan | 994 | CB Baltimore | |
| Feb | 1181 | CB Baltimore | |
| Mar | 1174 | CB Baltimore | |
| Apr | 1114 | CB Baltimore | |
| May | 1139 | CB Baltimore | |
| Jun | 1110 | CB Baltimore | |
| Jan | 10353 | CB Washington | |
| Feb | 14049 | CB Washington | |
| Mar | 13725 | CB Washington | |
| Apr | 13422 | CB Washington | |
| May | 13567 | CB Washington | |
| Jun | 13450 | CB Washington |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
| <title>2017 Average Commuter Ridership in Maryland</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .tick line { | |
| stroke: #C0C0BB; | |
| } | |
| .tick text, .legendCells text { | |
| fill: #8E8883; | |
| font-size: 12pt; | |
| font-family: sans-serif; | |
| } | |
| .axis-label, .legend-label { | |
| fill: #635F5D; | |
| font-size: 15pt; | |
| font-family: sans-serif; | |
| } | |
| #chart { | |
| position: fixed; | |
| left:0px; | |
| right:0px; | |
| top:0px; | |
| bottom:0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <div id = "chart"></div> | |
| <script> | |
| const xValue = d => d.Month; | |
| const xLabel = 'Month'; | |
| const yValue = d => d.Avg_Riders; | |
| const yLabel = 'Average Ridership'; | |
| const colorValue = d => d.Type; | |
| const colorLabel = 'Type'; | |
| const margin = { left: 100, right: 250, top: 20, bottom: 120 }; | |
| const row = d => { | |
| d.Month = d['Month'] | |
| d.Avg_Riders = +d.Avg_Riders | |
| return d; | |
| }; | |
| var chartDiv = document.getElementById("chart") | |
| var svg = d3.select(chartDiv).append("svg"); | |
| const xScale = d3.scalePoint(); | |
| const yScale = d3.scaleLinear(); | |
| const colorScale = d3.scaleOrdinal() | |
| .range(d3.schemeCategory10); | |
| const colorLegend = d3.legendColor() | |
| .scale(colorScale) | |
| .shape('circle'); | |
| const g = svg.append('g'); | |
| const datag = g.append('g'); | |
| const xAxisG = g.append('g'); | |
| const xText = xAxisG.append('text') | |
| .attr('class','axis-label') | |
| const yAxisG = g.append('g'); | |
| const yText = yAxisG.append('text') | |
| .attr('class','axis-label') | |
| const colorLegendG = g.append('g') | |
| function redraw() { | |
| var width = chartDiv.clientWidth; | |
| var height = chartDiv.clientHeight; | |
| const innerWidth = width - margin.left - margin.right; | |
| const innerHeight = height - margin.top - margin.bottom; | |
| svg | |
| .attr("width",width) | |
| .attr("height",height); | |
| g.attr('transform', `translate(${margin.left},${margin.top})`); | |
| xAxisG | |
| .attr('transform', `translate(0, ${innerHeight})`); | |
| xText | |
| .attr('x', innerWidth/2) | |
| .attr('y',70) | |
| .text(xLabel); | |
| yText | |
| .attr('x',-innerHeight/2) | |
| .attr('y',-75) | |
| .attr('transform',`rotate(-90)`) | |
| .style('text-anchor','middle') | |
| .text(yLabel) | |
| colorLegendG.attr('transform', `translate(${innerWidth + 60}, 150)`); | |
| const xAxis = d3.axisBottom() | |
| .scale(xScale) | |
| .tickPadding(15) | |
| .tickSize(-innerHeight); | |
| const yTicks = 5; | |
| const yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| .ticks(yTicks) | |
| .tickPadding(15) | |
| .tickSize(-innerWidth); | |
| d3.csv('commuter_data.csv', row, data => { | |
| xScale | |
| .domain(data.map(xValue)) | |
| .range([0, innerWidth]); | |
| yScale | |
| .domain(d3.extent(data, yValue)) | |
| .range([innerHeight, 0]) | |
| .nice(yTicks); | |
| var circles = datag.selectAll('circle').data(data) | |
| circles | |
| .enter() | |
| .append('circle') | |
| .attr('fill-opacity', 0.6) | |
| .merge(circles) | |
| .attr('cx', d => xScale(xValue(d))) | |
| .attr('cy', d => yScale(yValue(d))) | |
| .attr('fill', d => colorScale(colorValue(d))) | |
| .attr('r', 8); | |
| xAxisG.call(xAxis); | |
| yAxisG.call(yAxis); | |
| colorLegendG.call(colorLegend) | |
| .selectAll('.cell text') | |
| .attr('dy', '0.1em'); | |
| }); | |
| } | |
| redraw(); | |
| window.addEventListener("resize",redraw); | |
| </script> | |
| </body> | |
| </html> | |
