angelalien

@angelalien·6 public vizzes

Fork of Music Signature Change of the Hit Songs

This fork of a line chart visualization tracks the changing musical signatures of hit songs from 2010 to 2019, using averaged Spotify top-10 data preprocessed in R to show mean values and standard deviations for each category. Built with vega-lite-api, vega-lite, and d3, it renders interactive multi-series lines that respond to mouseover events, bolding the hovered series via a single-selection and opacity/stroke-width encodings while displaying exact data point values as text labels. The tooltip handler from vega-tooltip provides additional detail, with data sourced from Observable and rendered as SVG.

Jun 6, 2022

Loading thumbnail…

Covid Data 2020 Visualization

This visualization explores COVID-19 case data across U.S. states during 2020, focusing on case increases around major holidays. It features a bar chart ranking the top N states by percentage increase, a choropleth map showing geographical distribution, and a line chart tracking daily new cases for selected states. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, `scaleTime`, and `scaleOrdinal` for scales, `geoAlbersUsa` and `geoPath` for the map, and SVG rendering for all marks. The data comes from CSV files containing daily state-level case counts.

Jan 19, 2021

Loading thumbnail…

Iris Parallel Coordinate Plots

This example uses a parallel coordinate plot to show the relationships between four numerical measurements (sepal length, sepal width, petal length, and petal width) across three species of iris flowers. Grey background paths provide context, while colorful foreground paths, colored by species via `d3.scale.ordinal`, highlight individual data points. Users can drag the vertical axes to reorder the dimensions, with smooth transitions animated by `d3.transition`. The visualization is rendered with SVG, using `d3.svg.line` and `d3.svg.axis`, and loads its data from a remote CSV file.

Nov 5, 2020

Loading thumbnail…

Iris Scater Plot

This interactive scatter plot visualizes the Iris flower dataset, letting users compare sepal and petal measurements across three species. Colored circles represent individual samples, with red, green, and blue marking Iris-setosa, Iris-versicolor, and Iris-virginica. Users select which measurement appears on each axis via dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and SVG circles for data points, with data loaded from a CSV file.

Oct 17, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the UCI Machine Learning Repository’s Auto MPG Data Set. Red semi-transparent circles represent individual car models, with each point’s position determined by its horsepower (x-axis) and weight (y-axis) values. The visualization is built using D3 v5, employing the `scaleLinear` function to map data domains to pixel ranges, `axisBottom` and `axisLeft` for the labeled axes, and the `csv` function to load the remote data file into SVG elements.

Sep 21, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, based on United Nations data, with population values scaled to thousands. It demonstrates customized D3 axes: the y-axis removes domain and tick lines for a cleaner look, while the x-axis uses tick formatting to convert values to billions and applies a custom label. The chart is rendered as SVG using d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, with styled tick text and a title.

Sep 21, 2020