jhcliu19

@jhcliu19·10 public vizzes

Cocktail Ingredient Pairings

A horizontal bar chart shows the 20 most common ingredients in cocktails filtered by a selected main alcohol. A dropdown menu lets users choose among spirits like Gin, Rum, or Tequila, with the chart updating to display ingredient frequency counts. The React app uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.nest for aggregation. Data comes from Hotaling & Co.’s cocktail dataset, rendered as SVG rectangles with tooltips.

Dec 26, 2019

Loading thumbnail…

Goundhog Day Temperatures

This line chart compares the average March temperature in the United States across years, grouped by whether Punxsutawney Phil saw his shadow on Groundhog Day. The visualization uses d3.csv to load the Kaggle dataset, d3.nest to group records by shadow status, and d3.line with curveBasis to render smooth paths for each category. Axes, scales, and a color legend are generated with d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and a custom colorLegend module, all rendered as SVG elements.

Oct 30, 2019

Loading thumbnail…

Groundhog Day Temperatures

This visualization displays yearly temperatures for February and March across U.S. regions, with each line representing a groundhog shadow category (full shadow, no shadow, or partial shadow) from 1895 onward. The data comes from Data Canvas - Sense Your City. Using d3.csv and d3.nest, the code groups records by shadow status and renders them as smoothed line paths with d3.line and curveBasis. A d3.scaleOrdinal with schemeCategory10 provides color encoding, accompanied by a custom colorLegend module, while axes are generated using d3.axisBottom and d3.axisLeft.

Oct 30, 2019

Loading thumbnail…

Growth in Irish Whiskey Sales

The visualization shows the growth in Irish whiskey sales over time, with multiple lines representing different countries and a color legend identifying each series. It uses d3.csv to load data, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10 for scales, along with d3.line and curveBasis to render smooth paths. d3.nest groups data by country, and d3.axisBottom and d3.axisLeft add labeled axes. The SVG rendering includes a custom colorLegend component built with d3 selections.

Oct 30, 2019

Loading thumbnail…

Amazon Fire

A scatterplot displays the number of Amazon fires by year, with each red circle representing a single monthly observation for a state. The chart reveals the distribution of fire counts across time. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes on an SVG canvas, reading from the `amazonfire.csv` dataset.

Oct 29, 2019

Loading thumbnail…

Temperature in Montreal

This line chart displays one week of temperature in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5 to scale and render the data, employing `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator with `curveBasis` to draw the smooth trend line. Data is loaded from a CSV file hosted on vizhub.

Oct 29, 2019

Loading thumbnail…

Google Playstore App Trends

This interactive bar chart shows Google Play Store app trends, letting users explore app category metrics through a dropdown menu. The visualization renders as an SVG using React and D3 v5, with bars colored in a muted teal and axes styled for readability. The chart sorts data by value and uses D3’s scaleBand and scaleLinear to position bars and ticks, while the dropdown, built with the react-dropdown library, updates the displayed dataset. The code loads data from a CSV file and applies D3’s axisBottom and axisLeft for the chart’s coordinate system.

Oct 29, 2019

Loading thumbnail…

Untitled

This scatterplot uses the D3.js library to visualize the relationship between horsepower and weight for a collection of cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a single car model. The D3 code loads the CSV data, applies linear scales to both axes, and renders the points within an SVG, while also adding labeled axes and a title to the chart.

Oct 29, 2019

Loading thumbnail…

Diverging Stacked Bar Chart with D3.js

This visualization displays survey responses as a diverging stacked bar chart, with each row representing a question and colored segments showing the percentage of respondents who strongly disagree, disagree, are neutral, agree, or strongly agree. The chart uses D3.js v3 to load CSV data, compute percentage distributions, and render SVG rects and text labels via ordinal and linear scales. Alternating row backgrounds and a centered zero line aid readability, while a legend identifies the five response categories.

Oct 29, 2019

Loading thumbnail…

Infovis

This example visualizes Swedish municipal statistics, plotting the relationship between local tax rates and average income, with circle size encoding mean age. The scatterplot uses d3.scaleLinear for x- and y-axes and a third scale for bubble radius, rendered as SVG circles with axis ticks from d3.axisBottom and d3.axisLeft. A dropdown menu, built with a custom dropdownMenu function, offers three options though the selection is not connected to the data. Data is loaded from a CSV file using d3.csv, with numeric fields parsed for scaling.

Oct 29, 2019