Anita Tse

@anitatse·3 public vizzes

P3 - Task 1

This choropleth map displays the population of Canadian provinces and territories for a given year, with a slider intended to change the year. Each province is filled with a blue color scale based on its population value, using a linear scale from white to blue. The visualization is built with React, D3 v5, and TopoJSON, rendering geographic paths via `d3.geoPath` and `d3.geoAlbers`. Population data is loaded from a CSV file and joined to the map features by province name.

Mar 6, 2020

Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. It customizes the axes by removing domain lines and tick lines from the y-axis, while the x-axis uses a custom tick format that abbreviates large numbers (e.g., converting billions to "B") via d3.format. The chart is rendered with SVG using d3.scaleBand for the categorical country labels and d3.scaleLinear for population values. Axis generation relies on d3.axisBottom and d3.axisLeft, with tick size extended across the plot for grid lines, and a title and axis label added as text elements.

Feb 7, 2020

Loading thumbnail…

P1 - Task 2

This visualization uses a scatter plot to show the relationship between years of service and salary for professors, with each circle’s size varying based on years since PhD. The data comes from a Salaries.csv file. Built with D3.js and rendered as an SVG, it uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` for loading data. Circle radius is set using `Math.sqrt(d.yrs_since_phd)`, and styling includes gray grid lines and steelblue semi-transparent points.

Jan 29, 2020