yuli19991001

@yuli19991001·6 public vizzes

Fork of Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s position mapping horsepower (x-axis) and torque (y-axis) and its size encoding highway MPG. Color distinguishes car brands. The visualization uses D3 v7 with SVG rendering and includes interactive tooltips that appear on mouse hover. The chart also provides a legend for bubble size (MPG values) and a color-coded brand key, with data loaded from a local CSV file.

Nov 21, 2022

Loading thumbnail…

Fork of Academic Publication Influence on University Ranking

This scatter plot visualizes the relationship between academic publication counts and university world rankings, with bubble size representing alumni employment numbers and color encoding country. The visualization uses the vega-lite-api library with d3.csv to load World University Ranking data from a GitHub gist. It renders circles with encoded x (publications), y (world_rank), color (country), and scaled size (alumni_employment) fields, plus tooltips showing institution names. The chart includes custom axis styling for improved readability.

Nov 20, 2022

Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from the my_weather_data.json dataset. The chart uses D3 v5’s `d3.histogram` and `d3.scaleLinear` to bin humidity values into four bars, with a dashed maroon line marking the mean. Bar heights and count labels are rendered as SVG rectangles and text, while the x-axis is generated with `d3.axisBottom`. The code also adds accessibility features via ARIA roles and labels on the SVG elements.

Nov 20, 2022

Loading thumbnail…

Fork of Fork of Bubbles with Json Data

This visualization displays a bubble chart of 18 individuals, with each bubble sized according to a monetary value and labeled with the person's name and that value. The code uses D3 v5's `d3.pack` layout to position bubbles within a hierarchical JSON dataset, rendering circles and text as SVG elements. Clicking a bubble triggers a process-loading function, and the chart is embedded in a React-based HTML page. The visualization demonstrates D3's declarative data joining with `d3.hierarchy` and `d3.pack`.

Nov 19, 2022

Loading thumbnail…

Fork of Histogram with D3

This histogram displays birth rates per 1000 for different age groups in California for 2016, using a bar chart with an interactive tooltip that reveals the age group on hover. Built with D3 v7, it loads CSV data via `d3.csv`, maps age groups to a `d3.scaleBand` and rates to a `d3.scaleLinear`, and renders the bars as SVG rectangles. Tooltips are appended and removed dynamically using `svg.append("text")` and `d3.select("#t1").remove()` on mouseenter and mouseleave events.

Nov 17, 2022

Loading thumbnail…

Untitled

This interactive scatter plot explores the Iris dataset, displaying measurements of sepal and petal dimensions. Users can change which measurements appear on the x- and y-axes via dropdown menus, with points colored by Iris species. The visualization uses D3 v5 scales and axes within a React framework, rendering circles as SVG elements with a color mapping for the three species classes.

Sep 28, 2022