js164

@js164·11 public vizzes

Untitled

This interactive line chart visualizes monthly passenger traffic between India and foreign airlines, with buttons to switch between passenger and freight data. The visualization uses D3.js (v4) to render SVG paths, with a dropdown menu to filter by airline name. Red and blue lines compare passenger counts from India versus to India, updated through transition animations. Data is loaded from a CSV file hosted on GitHub, and the chart includes axes, legends, and axis labels for months and passenger counts.

Apr 6, 2021

Loading thumbnail…

Untitled

This interactive line chart visualizes monthly airline traffic between India and international destinations, comparing passenger numbers and freight volumes for selectable airlines. Two buttons switch the dataset between passenger and freight metrics, while a dropdown menu filters by airline name. The visualization uses D3.js v4 to load CSV data, render SVG paths for each metric (blue for inbound, red for outbound), and animate transitions when changing airlines. The data, sourced from a GitHub-hosted CSV file, is drawn using linear scales and d3.line path generators.

Mar 11, 2021

Loading thumbnail…

Untitled

This interactive line chart displays monthly passenger and freight traffic to and from India, aggregated by airline. Two buttons toggle between the passenger and freight datasets, while a dropdown menu selects which airline’s routes to display. Incoming traffic appears as a blue line, outgoing traffic as red, with transitions animating the path updates over 1000 milliseconds. The visualization is built with D3 v4, using `d3.line` for path generation, `d3.scaleLinear` for axes, and `transition.attrTween` internally via D3’s transition API. The data comes from a CSV file hosted on GitHub, rendered as SVG.

Mar 11, 2021

Loading thumbnail…

Untitled

This example shows monthly passenger traffic to India for multiple airlines, with each airline’s data drawn as a separate time-series line. The chart uses a time-scaled X axis for months and a linear Y axis for passenger counts, with all series overlaid in a single view. It loads CSV data from a GitHub repository and renders the lines as SVG paths using d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/Left from D3 v4. The visualization highlights seasonal patterns and relative volumes across carriers.

Mar 11, 2021

Loading thumbnail…

Untitled

This interactive line chart shows monthly passenger traffic to India for individual airlines, with a dropdown menu to switch between carriers. Each line traces the number of passengers across the 12 months, colored via a categorical scale. The visualization uses d3.v4 with an SVG path updated through a transition on the `d` attribute when the selection changes. Data is loaded from a remote CSV, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. The color scheme comes from `d3-scale-chromatic`.

Mar 11, 2021

Loading thumbnail…

Untitled

A world map rendered in gray displays curved green lines connecting pairs of cities, with each line drawn as a GeoJSON LineString between two latitude-longitude coordinates loaded from a CSV file. The example uses d3.geoMercator for projection, d3.geoPath to generate SVG paths for both the world shape and connection lines, and d3.queue to load the world GeoJSON and connection data concurrently. Country boundaries appear with white strokes and zero width, while the connections use a teal stroke.

Mar 9, 2021

Loading thumbnail…

Untitled

A choropleth map shows the total number of airline passengers traveling to and from India for 54 countries, using a cyan-to-red color scale to represent traveler counts. The visualization loads flight data from a CSV file via `d3.csv`, then passes it through JavaScript to a Google Charts GeoChart, which renders the geographic regions. The code also references D3 v4 and a TopoJSON file for US states, though the map itself is drawn by the Google visualization API.

Mar 6, 2021

Loading thumbnail…

Untitled

This example displays a column chart of monthly air traffic between India and other countries, using passenger counts from a CSV file. The code loads the data with `d3.csv`, then builds a Google Visualization `DataTable` through `google.visualization.arrayToDataTable`, styling each bar with a custom fill and stroke color. The chart is rendered as a `google.visualization.ColumnChart` with a title and legend, while the underlying data source is a raw GitHub-hosted CSV.

Mar 5, 2021

Loading thumbnail…

Month wise travellers

The visualization displays monthly passenger numbers traveling to India from various airlines, using horizontal bars of varying lengths to represent passenger counts. Built with D3.js v6, the bar chart maps the `PASSENGERS_TO_INDIA` field from a CSV dataset, scaling each bar’s width proportionally via `d3.scaleLinear`. Rendered as SVG rectangles with a fixed height of 40 pixels, the chart orders airlines by row, enabling quick comparison of traffic volumes across carriers. The interactive chart loads data asynchronously via `d3.csv`, fetching the airline traffic dataset from a GitHub repository.

Mar 5, 2021

Loading thumbnail…

Visitors/Day

A horizontal bar chart displays visitor counts for each day of the week, with blue bars scaled linearly from zero to 4,000 using d3.scaleLinear. Day names appear as white text labels, while a bottom axis with 15 ticks, generated via d3.axisBottom, provides quantitative reference. The chart loads the CSV file visitors-day.csv with d3.csv and renders entirely as SVG elements (rect, text, and g) appended to the body. A final text label names the x-axis "Visitors."

Mar 4, 2021

Loading thumbnail…

Prac 5

This example displays a simple horizontal bar chart built with React and rendered as SVG using D3 v6. Each bar’s width is proportional to the person’s age from the local CSV file `nameage.csv`, with bars spaced vertically at 50-pixel intervals. The code loads the data via `d3.csv`, selects the body, appends an 800x800 SVG canvas, and binds the dataset to `rect` elements whose `width` attribute is computed as `d.age * 20`. All bars are filled with cyan, and the chart includes no axes or labels, focusing purely on raw geometric encoding.

Mar 3, 2021