T

TaraZhu

@TaraZhu·18 public vizzes

Loading thumbnail…

New York City Leading Causes of Death

This line chart visualizes the top five causes of death in New York City from 2007 to 2014, with each cause represented by a colored line and legend label. The data, sourced from NYC Open Data via a CSV file, shows trends such as declining heart disease deaths and rising “All Other Causes.” The visualization uses d3.csv, d3.nest, d3.scaleTime, and d3.scaleOrdinal to render SVG paths and text. Interaction relies on mouseover and mouseout events, which increase opacity, stroke width, and font size for the hovered cause across both its line and label.

Loading thumbnail…

Color luminance and saturation

This example displays two horizontal sequences of four squares each, one using a grey sequential color scale and the other using an orange scale, to illustrate how luminance and saturation vary across interpolated color steps. The visualization uses d3.scaleSequential with d3.interpolateGreys and d3.interpolateOranges to map the domain [0, 4] to filled SVG rectangles. The squares redraw responsively on window resize, recomputing their positions and sizes based on the current viewport dimensions.

Loading thumbnail…

CITY OF BOSTON PROJECTS FY2017

This visualization is an SVG pie chart that shows the total length of road construction for each work type in Boston’s FY2017 projects. It uses the d3.pie and d3.arc APIs from D3 v4 to compute and draw the arcs, with a d3.scaleOrdinal color scale and a d3.legendColor legend to encode the categorical work types. The underlying data comes from a CSV file containing the scope of work and corresponding shape lengths for 341 items, sourced from Boston's open data portal.

Loading thumbnail…

Pokemon_visualization

This radar chart visualizes the base stats of the Pokémon Bulbasaur across six attributes—HP, Attack, Defense, Sp. Atk, Sp. Def, and Speed—with values scaled from 0 to 100. The chart renders a pentagonal grid with five levels, using an SVG polygon to represent the stat profile. Built with D3 v4, the visualization relies on the `RadarChart.draw` function to generate axes, circular segments, and the filled area, while mouseover transitions highlight the polygon. The dataset originates from a Kaggle Pokémon stats CSV file.

Loading thumbnail…

New York City Leading Causes of Death

This visualization shows trends in New York City’s leading causes of death from 2007 to 2014, plotting annual death counts for five causes (including heart disease, malignant neoplasms, and diabetes) as colored lines. It uses d3.csv to load the data, d3.nest() to group by cause, and d3.line() with time and linear scales to render the chart. The legend labels are clickable, toggling line opacity via d3 transitions. The graphic employs an SVG renderer with d3’s axis components and a categorical color scheme.

Loading thumbnail…

Color luminance and saturation

Two horizontal strips of small squares demonstrate how the sequential color scales `d3.interpolateGreys` and `d3.interpolateOranges` change with luminance and saturation. The top strip shows four gray shades, the bottom four orange shades, each sampled at equal intervals from zero to four via `d3.scaleSequential`. Rendered as SVG rectangles in d3.v4, the example uses `d3-color` and `d3-scale-chromatic` to produce the fills, with the squares positioned using `d3.scaleLinear`. The visual contrast between the monochromatic gray ramp and the saturated orange ramp highlights how lightness and color intensity vary independently across each scale's domain.

Loading thumbnail…

CITY OF BOSTON PROJECTS FY2017

This pie chart visualizes the total length of Boston roadway and sidewalk projects for fiscal year 2017, grouped by scope of work such as reconstruction, resurfacing, and preservation. The data comes from the City of Boston’s open data portal and is rendered as an SVG using d3.v4, with the `d3.pie()` and `d3.arc()` generators to create the slices. A color legend, built with the d3-legend library, maps each work type to a distinct category color, and the chart is adapted from Curran Kelleher’s block.

Loading thumbnail…

CITY OF BOSTON PROJECTS FY2017

This pie chart visualizes the total length of road construction work by type for Boston’s FY2017 projects, using data from the city’s open data portal. Each slice represents a work category, such as ARP, CRP, or Full Reconstruction, with the arc length proportional to the summed `Shape_Leng` values. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate SVG paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors. A legend, created with the d3-legend plugin, labels each category. The chart builds from a CSV file containing seven rows of scope and length data.

Loading thumbnail…

Basic Scatter Plot

A basic scatter plot displays the relationship between age and Apo10 index, with each data point colored by status from the neg.csv dataset. The visualization uses D3 v4 to create SVG circles, with linear scales for both axes and an ordinal color scale for categorical grouping. Axis ticks are styled with custom formatting, and a color legend is generated using the d3-legend library's legendColor function.

Loading thumbnail…

Basic Scatter Plot

This static SVG scatter plot displays the relationship between patient age (x-axis) and TKTL1 index (y-axis), with points colored by negative status via a categorical color legend. Built with D3 v4, it uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` for the color key, rendering circles with `fill-opacity` 0.6 from a CSV dataset.

Loading thumbnail…

Basic Scatter Plot

A basic scatter plot displays the relationship between age (x-axis) and an index value (y-axis) for individual records, with points colored by a categorical status field. The visualization uses D3.js v4 to render SVG circles, with axis ticks and gridlines styled via CSS. Data is loaded from a local CSV file, and the x and y scales are computed using `d3.scaleLinear` with `d3.extent` to determine domains. A categorical color scale (`d3.scaleOrdinal`) and legend (`d3.legendColor`) distinguish the status groups.

Loading thumbnail…

Data Summary

This example displays a text-based summary of a New York City open data table on leading causes of death by sex and ethnicity. It shows the total row count, column count, and file size, followed by per-column statistics such as data types and value distributions. The code loads the CSV using `d3.csv`, then uses `dl.format.summary` from Datalib to generate the column summaries, which are rendered into a `<pre>` element and logged to the console.

Loading thumbnail…

Data Summary

This example provides a text summary of a tabular dataset, displaying the number of rows, columns, and file size, followed by a statistical breakdown of each column. It uses the Datalib library’s `format.summary` function to generate the column statistics, while D3.js (v4) is used to load the CSV file via `d3.csv` and render the resulting text into a `<pre>` element on the page. The data represents 341 Boston roadway projects from FY2017.

Loading thumbnail…

Basic Scatter Plot

A scatter plot displays suicide rates across multiple countries from 1985 to 2004, with each dot colored by country to compare temporal trends. The visualization uses D3 v4 (d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) and the d3-legend library to render colored circles in SVG. Data comes from Our World in Data’s suicide rates by country dataset, loaded via d3.csv, with axes labeled for year and suicide rate.

Loading thumbnail…

Data Summary

This example displays a plain-text summary of a 721-row Pokémon dataset, showing the number of rows, columns, file size, and per-column statistics. It loads the CSV with `d3.csv` and uses Datalib’s `dl.format.summary` to generate the statistical breakdown. The code then appends the result as a `<pre>` element and logs it to the console.

Loading thumbnail…

Data Summary

This example displays a plain-text summary of the Pokemon dataset, reporting the total number of rows, columns, and file size, followed by per-column statistics. It loads the CSV file with `d3.csv`, then uses Datalib’s `dl.format.summary` to generate the statistical breakdown. The resulting string is rendered inside a `<pre>` element via `d3.select('body').append('pre')` and also logged to the console. The data originates from the provided Pokemon.csv file.

Loading thumbnail…

Data Summary

This visualization presents a plain-text summary of a CSV dataset containing City of Boston projects for fiscal year 2017. It uses the Datalib library’s `format.summary` function to compute and display quantitative details, such as the number of rows, columns, and file size, alongside per-column summaries. The code loads the data via `d3.csv()` and appends the resulting summary to the page as a `<pre>` element.

Loading thumbnail…

CS573_HW1_3

This bar chart visualizes the causes of newborn deaths in their first month of life in 2013, using data from Our World in Data. Each horizontal bar represents a cause of death, with bar length proportional to the number of deaths and a text label showing both the raw count and percentage of the total 277,200 deaths. The visualization uses d3.scaleLinear for the x-axis and d3.scaleBand for the categorical y-axis, rendering SVG rectangles and text elements with d3.v4. The chart is adapted from a block by Curran.