Ding

@yunatseng·10 public vizzes

Fork of Menu: Social Media MQP

A diverging stacked bar chart shows how survey responses to social media questions split across a six-point agreement or frequency scale for each platform. Data is loaded from a CSV file, grouped by question and media name, then sorted by net positive sentiment. The visualization uses d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom to render bars and labels, with a legend built from the scale array. A dropdown menu generated from the data’s question titles lets users switch between survey questions.

Nov 4, 2023

Loading thumbnail…

Fork of Arbre_Axe_Accuracy

This visualization displays a forest of hierarchical decision trees, each representing a model with an associated accuracy score. The trees are color-coded by accuracy—red for high (≥0.8), blue for medium (≥0.6), and gray for low—allowing viewers to compare structural complexity and performance across models. The code uses D3 v5’s `d3.tree` layout to compute node positions, with the SVG rendered and animated via D3’s selection and transition methods. Multiple trees are placed horizontally within a scrollable container, and interactions highlight nodes sharing the same name across different trees.

Nov 4, 2023

Loading thumbnail…

Fork of HW02-Parallel Coordinates chart

This interactive parallel coordinates chart displays the classic Iris dataset, with each row rendered as a polyline connecting five vertical axes for sepal length, sepal width, petal length, petal width, and species class. Users can drag the dimension labels in the Sortable-enabled list above the chart to dynamically reorder the axes, prompting the `render` function to rebuild the visualization. The plot uses D3 v7 scales and `d3.axisLeft` to position axes, while line colors are assigned per species via CSS classes. It also demonstrates a declarative D3 pattern with a reusable `parallelPlot` function, and the `dropdownMenu.js` module provides a reusable select-menu component.

Nov 4, 2023

Loading thumbnail…

Fork of Make a bar chart

This example shows a horizontal bar chart ranking the top 10 most populous countries, drawing on population data from a CSV file. The chart displays country names along the y-axis and population values on the x-axis, formatted with tick labels using a compact scale. The visualization uses D3 v7’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with `axisBottom` and `axisLeft` to render axes. SVG rectangles are bound to data via `selectAll` and `enter`, with `csv()` loading the dataset asynchronously into a React-like structure.

Feb 27, 2023

Loading thumbnail…

Fork of ICE 8 - Family Tree

This visualization displays a family tree as a node-link diagram, with circles representing individuals and curved paths connecting parents to their children. The tree layout is generated from nested data using the custom `d3.stratify()` and `d3.tree()` extensions, which compute node positions based on parent-child relationships. Node colors encode generational depth, with red for ancestors, blue for the middle generation, and green for descendants, while text labels show each person’s name. The SVG rendering is implemented in React, drawing all elements within an SVG container using D3’s selection and enter/append methods to create circles, paths, and labels.

Feb 27, 2023

Loading thumbnail…

Fork of Pack Layout

This example visualizes a hierarchical dataset using D3’s pack layout, rendering circles for nodes and text labels for leaf values. The code builds a tree from an inline JavaScript object, sums leaf values with `root.sum()`, and applies a `d3.pack()` layout with a 300×300 size and 10-pixel padding. Each descendant is drawn as an `indianred` circle with white strokes and centered text, positioned via `transform` attributes. The SVG canvas is 960×500 units, and styling comes from an external CSS file.

Dec 31, 2022

Loading thumbnail…

Fork of D3: NYC Crime Visualization

This interactive visualization explores NYC crime data through a coordinated multi-view dashboard. It combines a geographic heatmap using `d3.geoMercator` and `d3.geoPath` to display precinct-level crime intensity, with a donut chart (via `d3.arc`) breaking down crime types by color. Three bar charts for age, race, and additional demographics update alongside. The SVG-based scene includes a legend, tooltip, and reset button, with all sub-graphs animated over a 24-millisecond duration. The interface supports dynamic filtering by precinct and crime type, using `d3.scaleOrdinal` and linear/band scales for color and axes.

Dec 10, 2022

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This example shows a generative art piece inspired by Sol LeWitt, featuring a grid of animated vertical rectangles that shift downward while a white circle overlays the center. A second set of horizontal rectangles is clipped by a circular mask, creating a layered geometric composition. The animation uses the Web Animations API’s `element.animate()` with random durations and translations, while SVG elements are created dynamically via `document.createElementNS`. Random RGB fills are assigned to each rectangle, and the mask is defined using SVG `<mask>` and `<circle>` elements.

Oct 18, 2022

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation and building population data across Ward 61, using colored circular markers to represent buildings and their associated waste metrics. The visualization displays building-level details such as dry/wet waste amounts and total population in popups upon clicking. Built with Leaflet for map rendering and D3.js (v5) for fetching GeoJSON data from a GeoNode server, the example layers building and gate locations over OpenStreetMap tiles. It also incorporates a mapping file that links buildings to waste collection gates, allowing for dynamic restyling of markers based on gate assignments.

Oct 16, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a single SVG circle rendered on a 960-by-900 canvas, using CSS to define stroke styles for a class called `.lines` that is not applied to any visible elements. The code employs basic SVG shapes (`<circle>`) alongside external stylesheet rules, though the circle itself remains unstyled. A linked YouTube video provides contextual commentary, while the rendering relies on native SVG markup rather than JavaScript libraries. The gallery entry highlights minimal SVG usage with CSS hooks, showing how simple geometric primitives can be embedded directly in HTML.

Oct 3, 2022