Skip to main content
Log in
A

andrewtran1991

@andrewtran1991·10 public vizzes

Loading thumbnail…

Line charts

Multiple line charts display earthquake frequencies from 2000 to 2015, broken down by magnitude bands (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+), alongside estimated deaths as a radius scale. Built with D3 v5, the visualization uses `d3.line` with monotone curve interpolation, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders as SVG. Data comes from the USGS earthquake records embedded in the local CSV file.

Feb 24, 2020
Loading thumbnail…

Untitled

A drop-down menu switches between two years of earthquake magnitude data, displaying stacked totals for seven U.S. states across three magnitude bands (7.0+, 6–6.9, 5–5.9) as colored segments. The chart uses D3 v5’s `d3.csv`, `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`, with SVG rectangles and text labels updated via `transition`. Segments animate smoothly to new heights and totals when the year changes, rendering the raw CSV counts as proportional bars.

Feb 23, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the number of earthquakes recorded in four U.S. regions—West, South, Midwest, and Northeast—from 2011 to 2015. Each line represents a region, with points plotted per year using `d3.scaleTime` and `d3.scaleLinear` for axes. Hovering over a point triggers a second SVG bar chart showing earthquake counts by state for that region and year. The visualization uses D3 v5, SVG rendering, and data from the state-year-earthquakes.csv file.

Feb 22, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city appears as a distinct colored line, with a color legend positioned to the right. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft, d3.line with curveBasis, and d3.nest to structure the data by city. Multiple lines are rendered as SVG paths with a multiply blend mode for overlapping strokes.

Feb 22, 2020
Loading thumbnail…

Worldwide Earthquake stats 2000-2015

This visualization displays earthquake frequency and impact from 2000 to 2015, using four smoothed lines to compare magnitude categories (5.0–8.0+) alongside estimated deaths. The chart encodes time on the x-axis via `scaleTime`, counts on the y-axis using `scaleLinear`, and plots each series with D3’s `line` generator and `curveBasis`. Data from `earthquakes.csv` is loaded via `d3.csv` and rendered as SVG, with axis labels, a legend, and a title positioned within a custom margin layout.

Feb 21, 2020
Loading thumbnail…

Worldwide Earthquake stats 2000-2015

This visualization displays earthquake frequency by magnitude range from 2000 to 2015, using four smoothed lines to represent counts of quakes in the 5-5.9, 6-6.9, 7-7.9, and 8.0+ categories. The chart, built with D3 v5, uses `scaleTime` for the year axis, `scaleLinear` for the count axis, and `line` with `curveBasis` for the smoothed paths. Each magnitude range has a distinct color, with a legend and title included. Data comes from an external CSV file in the Data Canvas Sense Your City dataset.

Feb 21, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city appears as a distinct colored line, with a color legend positioned to the right. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft, d3.line with curveBasis, and d3.nest to structure the data by city. Multiple lines are rendered as SVG paths with a multiply blend mode for overlapping strokes.

Feb 20, 2020
Loading thumbnail…

Rebrickable Lego Sets by Year

This bar chart shows the cumulative number of Rebrickable Lego sets released each year from 1949 to 2019, with the running total rising steadily from 5 to nearly 15,000. The visualization uses D3 v5’s `scaleTime` for the x-axis (with ticks every three years) and `scaleLinear` for the y-axis, rendering steelblue rectangles via SVG. Data is loaded from a CSV using `dsv`, and the chart includes a title and author credit.

Feb 20, 2020
Loading thumbnail…

Lego Sets by Year from Rebrickable

A bar chart shows the cumulative number of Lego sets per year, sourced from Rebrickable. The chart uses a React-based data loading process with the `d3.csv` API, and renders as SVG with animated transitions. X-axis labels update for every three years using a tick format function, and the visualization includes a title and author attribution.

Jan 29, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020 using data from the United Nations World Population Prospects 2019. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear`, rendering bars as SVG rectangles with tooltips via the `title` element. Horizontal grids and labels are drawn from `AxisBottom` and `AxisLeft`, which utilize `xScale.ticks()` and `yScale.domain()`. The x-axis formats population values with the `format('.2s')` function, replacing ‘G’ with ‘B’ for billions. Data loads asynchronously via `csv`, with the top ten entries sliced after parsing.

Jan 29, 2020