Angus Hon

@Fluffisaurus·8 public vizzes

Temp in SF Line Chart

This line chart visualizes the temperature in San Francisco over a week, plotting time on the x-axis and temperature on the y-axis with a smooth, curved path and semi-transparent circular markers for each data point. The chart includes labeled axes and a title, rendered in an SVG using D3 v5. The code imports specific D3 modules including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, and `axisBottom`/`axisLeft` to construct the scales and axes. Data is loaded from the Data Canvas - Sense Your City dataset via `csv()`, with timestamps parsed as dates and temperatures as numbers.

Sep 7, 2019

Loading thumbnail…

Bar Chart - Axis Customization

This bar chart displays the world’s top ten most populous countries, with population values scaled in thousands from a local CSV file. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map populations and country names to SVG rectangles. Axis customization is a key feature: the x-axis uses a custom tick formatter to abbreviate large numbers with `format('.3s')` and replaces 'G' with 'B', while the y-axis removes its domain and tick lines. Both axes employ `axisBottom` and `axisLeft`, with x-axis tick lines extended across the plot using a negative tick size.

Sep 7, 2019

Loading thumbnail…

World Population Area Chart

This area chart visualizes the change in world population over time, with a smooth, curved line filling the space beneath it in blue. The chart uses a time-based x-axis and a linear y-axis, with a grid provided by axis ticks. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with a `curveBasis` to render the SVG path. The data originates from the United Nations World Population Prospects 2017 dataset.

Sep 5, 2019

Loading thumbnail…

Temp in SF Area Chart

This area chart displays temperature readings in San Francisco over a week, using a smooth blue filled path to convey trends across time. The visualization loads CSV data from a public dataset and renders an SVG with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smooth path, and `axisLeft`/`axisBottom` for labeled gridlines. The chart includes axis labels and a title, with parsing of timestamps and numeric temperature values in the data loading step.

Sep 5, 2019

Loading thumbnail…

Temp in SF Scatter Plot

A scatter plot displays one week of San Francisco temperature readings over time, with each semi-transparent steelblue circle representing an hourly observation. The x-axis maps timestamps using a time scale, while the y-axis maps temperature values with a linear scale, both with grid lines and clear axis labels. The visualization is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Data comes from the Data Canvas - Sense Your City dataset via a CSV loaded with `d3.csv`, and a title labels the graph.

Sep 5, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon and horsepower for a dataset of cars, with each point representing a vehicle. The axes are labeled as "Population" and "Weight" despite plotting mpg and horsepower. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, and `axisBottom` to render the chart as an SVG. Data is loaded asynchronously from a CSV file using D3's `csv` method, and circles are appended to the SVG to represent data points.

Sep 5, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, with population values plotted along the x-axis and country names along the y-axis. The chart uses d3.csv to load the country_data.csv file, then applies d3.scaleLinear and d3.scalePoint to map population and country names to screen coordinates. Axes are drawn using d3.axisLeft and d3.axisBottom, with tick formatting via d3.format to abbreviate large numbers. Circles representing each country are added to the SVG container, styled with a steelblue fill.

Sep 2, 2019

Loading thumbnail…

Bar Chart

This bar chart displays the populations of the top 10 most populous countries in 2018, sourced from the United Nations World Population Prospects. The visualization uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with data loaded via d3.csv. Horizontal bars are rendered as SVG rectangles, and axes are generated with d3.axisLeft and d3.axisBottom.

Aug 31, 2019