Chengwei Ye

@cye18·6 public vizzes

Speed and Altitude

The visualization displays a flight’s altitude and speed as two colored lines over time, using a dual-axis line chart. The left axis measures altitude, while the right axis tracks speed, with grid lines spanning both scales. It loads CSV data via `d3.csv` and renders SVG paths with `d3.line`, using `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks.

Mar 17, 2023

Loading thumbnail…

Speed and Altitude scatter plot

This scatter plot visualizes a week of temperature data in San Francisco, with altitude plotted on the y-axis and time on the x-axis. The code uses d3.scaleTime and d3.scaleLinear to map the data, along with d3.axisBottom and d3.axisLeft for the axes. Circles are rendered as SVG elements within an svg container. The dataset originates from the Data Canvas - Sense Your City project, loaded via d3.csv from a raw GitHub URL.

Mar 16, 2023

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature data in San Francisco, displaying time on the x-axis and altitude on the y-axis with steelblue circles. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the axes and plot points. Data originates from Data Canvas - Sense Your City and is loaded from a raw CSV file on GitHub. The chart includes labeled axes, a title, and gridlines, all rendered as SVG elements.

Mar 16, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 in a React application. It fetches a dataset containing weather and flight delay information for Logan Airport, then transforms the raw CSV strings into JavaScript Date objects and numeric values for variables like daily precipitation, wind speed, and departure delays. The code uses `d3.csv` with Promise chaining to asynchronously retrieve the data, and displays the parsed results in the browser console. The visualization serves primarily as a data preprocessing step for downstream charting.

Mar 16, 2023

Loading thumbnail…

CSV Visualization on a Map with d3.js

This example displays a CSV file of flight data by plotting a position marker on a world map and showing two time-series charts of altitude and speed. The map uses a Natural Earth projection with `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, while the charts use `d3.scaleUtc`, `d3.scaleLinear`, and `d3.line` to draw the data. Hovering over the chart updates the map marker position. Data is loaded via `d3.csv` and vector map data via `d3.json` with `topojson`.

Mar 16, 2023

Loading thumbnail…

Fork of Logan Airport Weather vs Delay

A linked-view dashboard explores the relationship between weather conditions and flight delays at Logan Airport in 2016. A scatter plot positions daily wind speed and precipitation against time, with circle size encoding delay magnitude and color indicating rainfall. A radial ring chart displays the same daily delays as arcs around a clock face, colored red for bad weather and blue for normal conditions. Hovering over a scatter plot circle highlights the matching radial bar and shows a tooltip with the date and delay value. The visualization uses D3 v5, including `d3.scaleTime`, `d3.arc`, `d3.lineRadial`, and a linear color interpolator to map weather severity.

Mar 6, 2023