S

Suzie1022susu

@Suzie1022susu·26 public vizzes

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The SVG chart includes labeled axes with gridlines and a smooth curve connecting temperature data points. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveBasis for the path, and d3.axisBottom and d3.axisLeft for the axes. Data originates from the Data Canvas - Sense Your City project.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the UCI Auto MPG dataset, letting users dynamically choose which numeric columns (e.g., horsepower, weight, acceleration) map to the X and Y axes via dropdown menus. Built with d3.v5, it renders an SVG with animated circle transitions. The implementation uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for scaling and axes, while a custom `dropdownMenu` module handles the select elements, updating the plot on change.

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

A donut chart displays the number of songs per language, with the nine most popular languages shown individually and all remaining languages aggregated into an "Others" slice. Clicking the "Others" slice removes the main chart and shows a zoomed view with all the remaining languages as individual slices. The visualization uses D3 v6's `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeTableau10` to generate and color the SVG paths, with tooltips shown on mouseover. Data is loaded from a local `data.json` file, and the chart is built within a Vue.js framework.

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

This donut chart displays the distribution of song counts across languages, aggregating the top nine categories and grouping all remaining languages into an "Others" slice. Clicking the "Others" segment replaces the view with a detailed breakdown of those smaller language groups. Built with D3 v6, the visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, rendering SVG paths with hover tooltips and interactive click transitions.

Loading thumbnail…

Fork of Bubble/Bar Combo viz

This visualization combines a bubble chart and a bar chart to explore quarterly data on traumatic brain injury (TBI) visits and symptoms. Four buttons allow the user to switch between quarters, updating both the bubble chart, which shows the distribution of visit types using D3’s pack and hierarchy APIs, and the bar chart displaying total counts. The SVG-based graphics are rendered with animation, and the data is embedded directly in the code.

Loading thumbnail…

scatter_heatmap

A scatter-heatmap visualization traces a player's movement through a game map over time, using a slider to scrub through timestamps and reveal player positions as colored dots. The map is divided into named regions like "A Main" and "Mid Top," each mapped to x/y coordinates via a custom `addPosition` function. Built with D3 v6, it uses `scaleLinear` for axes, `sliderBottom` for time navigation, and SVG rendering. Data comes from a CSV file containing game telemetry, with positions annotated as labeled points.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js v5 selections and transitions to animate its eyebrows upward and downward in a repeating loop. The face is built with a yellow circle, two eye circles, rectangular eyebrows, and a mouth path generated via `d3.arc()`. The entire group is centered with a transform, and eyebrow movement is achieved through chained `transition().duration()` calls. The code also loads a CSV file with `d3.csv()` to log parsed numeric data, though this data does not affect the visualization.

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature data for San Francisco by animating colored circles over a fixed grid. Each circle represents a data point that moves along the x- and y-axes, with colors distinguishing different players or sensors. A slider control updates the displayed time step, triggering a D3 animation that removes and redraws circles to match the selected moment. Built with D3 v5 and SVG, the visualization uses scaleLinear, axis functions, and sliderBottom to encode position and time, while reading data from a local CSV file.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face is drawn with D3.js, rendered as SVG shapes, with eyebrows that animate by moving up and down. The code uses D3’s `select` and `append` to build the SVG hierarchy, and the `transition().duration(2000)` API to create the two-second eyebrow movement. The face is composed of circles for the eyes and head, and a path generated with D3’s `arc` function for the mouth, all positioned using SVG transforms.

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for SVG circles. The visualization shows five fruits—red apples and a yellow lemon—arranged in a row, with actions over time removing fruits and changing an apple into a lemon. Each state change triggers a smooth 1000-millisecond transition using D3’s `transition` and `duration` methods, animating circle radius and horizontal position. The code uses `d3.scaleOrdinal` for color and size mapping, and a custom `fruitBowl` function manages data joins with enter, merge, and exit selections.

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

Five apples appear in a row and enlarge from zero radius; clicking one selects it with a black stroke, while a lemon is added to the bowl using an animated transition. The code uses d3-selection’s data join with a key function, and d3-transition’s `.transition().duration()` to animate circle positions and radii. SVG rendering displays the fruit, with d3-scaleOrdinal mapping fruit types to colors and sizes.

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for SVG circles. The visualization shows five fruits—red apples and a yellow lemon—arranged in a row, with actions over time removing fruits and changing an apple into a lemon. Each state change triggers a smooth 1000-millisecond transition using D3’s `transition` and `duration` methods, animating circle radius and horizontal position. The code uses `d3.scaleOrdinal` for color and size mapping, and a custom `fruitBowl` function manages data joins with enter, merge, and exit selections.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit as apples are eaten and replaced with lemons over time. The visualization uses SVG circles and text labels rendered through a custom `fruitBowl` function, which leverages `selection.enter()`, `selection.merge()`, and `selection.exit()` to handle data joins. The code applies ordinal scales from `d3.scaleOrdinal` for fruit colors and radii, and uses `d3.select` and `setTimeout` to trigger sequential state changes from the initial five apples.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for SVG elements in D3 v5, showing how to handle special cases like creating, updating, and removing data points in a static visualization. A bowl of fruit changes over time as apples are eaten or replaced with lemons, with each fruit rendered as a circle and text label. The code uses D3's `selectAll` and `merge` methods to reconcile entering, updating, and exiting elements, while `scaleOrdinal` maps fruit types to colors and radii. The SVG view updates at timed intervals to reflect the changing array of fruit objects.

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

Using D3.js v5 and modular ES imports, this animated example visualizes a bowl of fruit where apples and lemons appear, disappear, and change type over time. Circles represent fruit, with ordinal scales mapping color and radius to fruit type, while each fruit’s identity is tracked via a random `id`. Transitions animate entering circles from radius zero, exiting circles shrink away, and updates smoothly shift positions over one second via `transition().duration(1000)`. The data is programmatically generated in JavaScript, with timed `setTimeout` callbacks modifying an array of fruit objects and re-rendering the SVG scene.

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

A fork of the Bowl of Fruit example demonstrates animated transitions for SVG circles. The visualization shows five fruits—red apples and a yellow lemon—arranged in a row, with actions over time removing fruits and changing an apple into a lemon. Each state change triggers a smooth 1000-millisecond transition using D3’s `transition` and `duration` methods, animating circle radius and horizontal position. The code uses `d3.scaleOrdinal` for color and size mapping, and a custom `fruitBowl` function manages data joins with enter, merge, and exit selections.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

A fork of the Bowl of Fruit example demonstrates the general update pattern for adding, removing, and updating SVG elements in D3.js. The animation shows five red apples arranged in a row, which then shrink and disappear as one apple is eaten, one apple is replaced by a yellow lemon, and a second apple is removed. The code uses D3's ordinal color and radius scales to differentiate fruit types, while the `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` chain manages the circle elements. Each update triggers a 1000-millisecond transition that shrinks exiting circles to zero radius before removal.

Loading thumbnail…

bowl of fruit

A bowl of fruit displays five red apples as circles in an SVG, then demonstrates D3.js data joins by removing one apple after a second and turning another into a yellow lemon after two seconds. Using d3.select, d3.range, and scaleOrdinal, the code binds an array of fruit objects to circle elements, handling enter, update, and exit selections with merge and remove methods. The color and radius scales map fruit types to visual properties, showing how D3 manages dynamic DOM updates.

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a selection of cars from the UCI Auto MPG dataset. It uses a red semi-transparent circle for each car, plotted on a chart with labeled axes for "Time" and "Weight". Built with D3 v5, the visualization uses `scaleLinear` to map data values to SVG coordinates and `axisLeft` and `axisBottom` for the axes.

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between vehicle attributes, with population data from the United Nations World Population Prospects 2017 used for the top 10 most populous countries. It uses d3.v5 with SVG rendering, employing `scaleLinear` for the population axis, `scalePoint` for categorical country positioning, and `axisBottom` and `axisLeft` for labeled axes. The code applies a custom tick formatter to abbreviate large numbers, and demonstrates customization of D3 axes with tick lines and removal of domain paths.

Loading thumbnail…

Fork of Stylized Bar Chart

A stylized bar chart ranks the top 10 most populous countries according to the United Nations World Population Prospects 2019 dataset, loading data via d3.csv. It renders as an SVG using React, mapping country names to a d3.scaleBand y-axis and population values to a d3.scaleLinear x-axis. The marks are rectangular elements with a teal fill and hover tooltips, while axes display tick lines and labels formatted with d3.format. The layout includes margins, a bottom axis label, and a Poppins font.

Loading thumbnail…

Making a Bar Chart.js

This bar chart visualizes the populations of ten countries, ranging from China to Mexico. The data is loaded from a CSV file and values are multiplied by 1000. Using d3’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, it renders steel-blue rectangles in SVG, with axes labeled via `axisLeft` and `axisBottom`.

Loading thumbnail…

make face with D3.js

Built with D3.js v7, this example draws a smiling yellow face as an SVG graphic. The code constructs circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all positioned using SVG transforms. Animated transitions, using `transition().duration()`, move the eyebrows up and down over two seconds. The face is centered within a 960 by 500 pixel viewport, with the visualization rendered entirely through SVG elements.

Loading thumbnail…

shape with SVG and CSS

This example demonstrates primitive SVG shapes styled with CSS, showing circles, rectangles, lines, and paths arranged in a 960-by-500 canvas. It uses raw SVG elements (circle, rect, line, path) with inline attributes for coordinates, fills, strokes, and transforms like scale and translate. The code also links an external stylesheet, style.css, which defines classes such as `.lines` with stroke properties. No D3 or JavaScript libraries are loaded; the visualization relies solely on static SVG markup and CSS presentation.

Loading thumbnail…

Fork of HTML Starter

This example displays a static message, “Hello HTML!”, centered on the page with a large font size. It uses plain HTML and CSS, defining a `.message` class with a font-size of 13em and text-align center. The page contains no JavaScript logic, data sources, or visual encoding, serving as a minimal demonstration of structuring content with HTML and styling with CSS within a React framework.