hxiao-git

@hxiao-git·5 public vizzes

One Way Delay

This line chart displays one week of one-way network delay measurements in milliseconds for San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots delay values against time across two side-by-side SVG charts, with the primary chart showing a smoothed line via d3.line with curveBasis, while the second contains a simple blue circle. The code uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv to load the dataset.

Aug 23, 2019

Loading thumbnail…

One Way Delay

This line chart visualizes one week of one-way network delay data (in milliseconds) from San Francisco, sourced from Data Canvas - Sense Your City. It plots delay values over time using a smooth curve (d3.curveBasis) on an SVG. The code builds scales with d3.scaleTime and d3.scaleLinear, renders axes with d3.axisBottom and d3.axisLeft, and generates the line with d3.line. Data is loaded via d3.csv and parsed into dates and numbers before rendering.

Aug 23, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart plots temperature in degrees Celsius on the y-axis against time on the x-axis, with a smooth curved line connecting data points. The visualization is rendered as SVG using D3 v5, employing APIs such as `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `curveBasis` to construct the axes and path. Interactive components are absent, with the focus on clear presentation of the temperature trend.

Aug 20, 2019

Loading thumbnail…

Ordinal Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the auto-mpg dataset, with each red semi-transparent circle representing one vehicle. The chart uses d3.scaleLinear to map data values to pixel coordinates, with axes rendered using d3.axisBottom and d3.axisLeft, including grid lines and custom labels. The data is loaded as CSV via d3.csv and parsed to numeric types before rendering. The SVG output is styled with CSS for tick marks, axis labels, and the title, using a clean sans-serif typography across the visualization.

Aug 20, 2019

Loading thumbnail…

test

This example demonstrates asynchronous data loading and text generation by fetching a hardcoded JSON array of used cars and displaying a filtered report of models under a price threshold. The page initially shows a loading message, then updates the DOM with formatted car details after a simulated two-second delay using a Promise. The code relies on native JavaScript features like `JSON.parse`, `setTimeout`, and ES6 modules, while the report formatting is handled by custom functions `formatCar` and `generateReport`. Styling is applied via a CSS file with an imported Google Font, and the visualization is presented as large plain text in a `<pre>` element.

Aug 14, 2019