Skip to main content
Log in
I

Icecreamneverfall

@Icecreamneverfall·7 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which numerical columns map to the X and Y axes via dropdown menus, implemented with a custom `dropdownMenu` module. The visualization uses `d3.scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and animates circle positions with `transition().duration(2000)`. Updates re-render the SVG, preserving axis labels and tick marks while smoothly transitioning data points to new coordinates.

Jul 6, 2020
Loading thumbnail…

Airbnb Vienna

This scatter plot shows the price distribution of Airbnb apartments across 23 numbered boroughs in Vienna, revealing price clusters and outliers per district. The visualization uses D3 v5 with SVG rendering, employing `d3.csv` to load the dataset and `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for ticks. Circles are plotted with opacity 0.3 to show overlapping points, and axes include gridlines. Data originates from insideairbnb.com/vienna/.

Jun 4, 2020
Loading thumbnail…

Covid-19

This visualization shows the global spread of COVID-19 by plotting circular markers on a world map, with each circle sized proportionally to the total reported cases for a country on March 25, 2020. The map uses a geoMercator projection with d3.geoPath to render country boundaries from TopoJSON. COVID-19 data from a CSV file is loaded with d3.csv, and circle radii are scaled using d3.scaleSqrt. An interactive range slider is present, though its current implementation only displays static text.

Jun 4, 2020
Loading thumbnail…

Force Directed Graph

This force-directed graph visualizes relationships between programming languages, with nodes sized by degree and colored on a blue scale. Links appear either green and thick or black and dashed, indicating a binary attribute. The visualization uses d3.forceSimulation to compute the layout, d3.forceLink for link forces, and d3.forceManyBody for repulsion. Node dragging is enabled via d3.drag. The SVG rendering is built dynamically, with curved paths for connections and labels positioned above each node.

Jun 2, 2020
Loading thumbnail…

Force Directed Graph

This force-directed graph visualizes relationships between programming languages as a network of labeled, colored nodes connected by curved links. It uses `d3.forceSimulation` with link, center, and many-body charges to compute node positions, while each node’s radius and blue color intensity scale with its degree (weight). Links are styled differently based on a binary value: dashed black lines indicate zero, solid green lines indicate one. The chart is rendered as an SVG using d3.v5.

Jun 2, 2020
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

Jun 2, 2020
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

Jun 1, 2020