M

muzzheng

@muzzheng·23 public vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

This interactive network graph visualizes the connections between organizations within the Kenneth Rainin Foundation’s ecosystem, using colored main nodes for partner groups and smaller child nodes with leaf nodes for sub-organizations. It runs on D3 v6, employing `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to layout the hierarchy, while `d3.drag` enables node repositioning. The SVG rendering includes colored links with arrow markers, circle nodes sized by role, and text labels, with data defined in external `data.js` and `colors.js` files.

Loading thumbnail…

Untitled

This interactive force-directed network graph visualizes character relationships from Victor Hugo’s *Les Misérables*, with nodes representing characters and links showing interactions. The code uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position nodes, while SVG elements render colored circles and text labels. Dragging nodes is enabled via `d3.drag`, and link thickness reflects interaction strength from the miserables.json dataset.

Loading thumbnail…

Untitled

An interactive map of U.S. airports shows nodes linked by flight routes. Users can toggle between a geographic layout, where airports are positioned by their longitude and latitude using the `d3.geoAlbersUsa` projection and `d3.geoPath` for state boundaries, and a force-directed layout. In the simulation mode, `d3.forceSimulation` with link, many-body charge, and center forces lets users drag nodes, with elastic transitions animating the repositioning. The visualization uses SVG elements for rendering and reads airport data from a JSON file.

Loading thumbnail…

Untitled

A simple force-directed graph rendered in SVG shows four labeled nodes (H, I, J, K) connected by four links in a small network. The code uses the D3.js v3 `d3.layout.force` API with gravity, charge, and link distance settings to position the nodes dynamically, while circles and lines are styled via CSS classes. The simulation updates node and link coordinates on each tick event, with no interactivity beyond the native drag behavior attached through `force.drag`.

Loading thumbnail…

Hello World! Site Title

A force-directed graph displays four unlabeled nodes (H, I, J, K) connected by four links, using D3 v3’s `d3.layout.force` to simulate physical interactions. The SVG circles update their positions on each tick via a custom `tick` function, while link lines follow the node coordinates. The layout applies charge, gravity, friction, and link distance parameters to arrange the network.

Loading thumbnail…

Untitled

A force-directed network diagram displays six labeled nodes (nodeA through nodeF) connected by five links, all emanating from a single central node. The visualization uses D3.js version 3.4.8 with its `d3.layout.force` API to simulate physical forces, positioning nodes with gravity, charge, and distance parameters. Each node appears as a circle with a random hexadecimal fill color and a text label, rendered as SVG elements within a fixed 400x300 canvas. The graph is static, with no tick event updating positions after the initial simulation starts.

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes sociodemographic factors and discrimination impacts on Perceived Stress Scale (PSS) scores, with lines colored by event type. Users can drag axes to reorder dimensions. The visualization uses d3.v3 with SVG rendering and animation, featuring ordinal color scales, linear scales for each dimension, and d3.behavior.drag for axis interaction. Data is loaded from a CSV file containing categorical variables like sex, race, income, and education.

Loading thumbnail…

Untitled

This is a scatterplot matrix visualizing relationships among six traits from an environmental dataset, with each cell showing a plot for a pair of traits. The data points are colored by eventname using a categorical color scale, and users can click cells to filter points via a brush interaction. The visualization is built with D3 v4, using scales like `d3.scaleLinear` and `d3.scaleOrdinal`, a brush API for filtering, and SVG rendering within a React framework. The data is loaded from a CSV file, and a legend labels the three event categories.

Loading thumbnail…

Untitled

This interactive scatterplot matrix visualizes an environmental dataset, with each cell showing the relationship between two variables such as age, income, and education. Users can brush across any axis to filter the data points, which hides or highlights circles across all cells simultaneously using a brush interaction implemented with `d3.brush`. The visualization is rendered as SVG using D3 v4 within a React framework, with axes scaled via `d3.scaleLinear` and colored by categorical country data. A legend identifies the three color-coded countries: China, Brazil, and USA.

Loading thumbnail…

Untitled

This visualization presents a scatterplot matrix of environmental indicators for Brazil, China, and the USA, plotting six variables including forest cover, agriculture, and primary forest percentage. Each off-diagonal cell displays a bivariate scatterplot of two variables, colored by country, while diagonal cells show variable names. The code uses d3.brush to enable interactive filtering by dragging along any cell, which dims non-selected data points across all plots. Axes and frames are rendered via d3.axisBottom, d3.axisLeft, and SVG rect elements, with data parsed from the Env.csv file.

Loading thumbnail…

Untitled

This visualization displays the classic Iris dataset as a scatterplot, mapping sepal length and width on the x and y axes while encoding petal length through point size. Each species is represented by a distinct color and symbol shape generated via `d3.symbol` and `d3.scaleOrdinal`. A legend allows interactive filtering: clicking a species toggles the opacity of other points to highlight that group. The chart is built with D3 v4 in a React framework, rendering SVG elements with axes from `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Untitled

This example shows a scatterplot matrix comparing six environmental metrics—forest cover, agriculture, wood removal, planted forest, and primary forest—across Brazil, the USA, and China, using data from Env.csv. It displays pairwise relationships between all traits, with points colored by country and a legend identifying each nation. The visualization uses D3 v4 to render SVG shapes, scales, axes, and a brushing interaction that highlights selected data points by hiding others. Each cell is built with the `cross` function, relying on D3 scales and the `d3.brush` API for filtering.

Loading thumbnail…

Untitled

A stacked bar chart displays forest area data for ten countries, with bars divided into colored segments representing different forest types (surface, forest, plantforest, primaryforest, privateforest). Users toggle a checkbox to switch between absolute values and percentages, which rescales the bar segments accordingly. Clicking a legend item filters the chart to highlight a selected forest type, animating the bars with `transition.attrTween`. The visualization uses D3 v4 with SVG rendering, reading from a CSV file, and includes interactive animations for data exploration.

Loading thumbnail…

Untitled

This example uses a parallel coordinates chart to compare countries across multiple dimensions—population, surface area, and agricultural land percentage—over several decades. Grey background lines provide context, while steel blue foreground lines highlight the highlighted data points. Brushing on any axis filters the displayed lines, showing only those that meet the selected criteria. The visualization is built with D3 v3, using `d3.scale.ordinal` and `d3.scale.linear` for axes, `d3.svg.line` for paths, and `d3.svg.brush` for interactive filtering. Data is loaded from a CSV file.

Loading thumbnail…

Exoplanets Paralle Coordinates

This interactive parallel coordinates chart visualizes a dataset of exoplanet properties, including orbital period, mass, and discovery method, across multiple axes. Users can brush along any axis to filter the displayed polyline series, which are rendered as SVG axes and an overlaid semi-transparent Canvas layer for performance. The visualization uses D3.js for scales, axes, and brushing interactions, with a custom render-queue script to manage the Canvas drawing and achieve smooth filtering.

Loading thumbnail…

Nutrient Parallel Coordinates IV

A parallel coordinates chart displays nutrient amounts across US Department of Agriculture food samples, with 25 numeric axes (fat, sugars, vitamins) plus categorical axes for food group and manufacturer. Each sample is a colored polyline, sorted by food group. Rendering splits into an SVG for axes and a Canvas overlay for the 3,000+ polylines. Built with React and d3.v4, it uses d3.scalePoint, d3.scaleSqrt, d3.axisLeft/Right, and d3.brush for interactive filtering.

Loading thumbnail…

Untitled

This parallel coordinates chart visualizes the cost-of-living index across 74 cities, comparing six dimensions such as consumer price, rent, groceries, and local purchasing power. Grey background paths show all cities, while blue foreground paths highlight those selected via interactive brush filters on each axis. Built with d3.svg, d3.scale.ordinal, and d3.svg.brush, the visualization uses SVG rendering. User interaction toggles the display of foreground lines based on brush extents, providing dynamic focus on subsets of the data.

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays perceived stress scores (pss) across different racial/ethnic groups, with each bar representing an individual response. It uses D3 v5 with SVG rendering, applying `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis grouping. The chart customizes axes by removing tick lines and domains, and formats x-axis labels with `d3.format`. Data comes from a CSV file containing survey responses with race categories and stress scores.

Loading thumbnail…

make a bar chart

This example shows a blank SVG canvas and uses D3.js to demonstrate fundamental DOM manipulation, as described in the accompanying README. The code imports `select` and `arc` from the D3 v5 library, selects an SVG element with a fixed width and height, and begins to set up a visualization. While the title suggests a bar chart, the current implementation only initializes the SVG structure with no visible data or chart elements rendered. The visualization relies on D3’s selection and arc-generation APIs, with a simple HTML page linking to D3 v5.9.2 from a CDN and a separate stylesheet.

Loading thumbnail…

Fork of CARS SCUPUBOPD

This scatter plot compares automobile horsepower and acceleration, with each data point’s size encoding model year and its color shading from black to blue representing vehicle weight. The visualization is rendered as an SVG with animated transitions using D3 v5. The code employs `scaleLinear` for all four axes, `axisLeft` and `axisBottom` for grid lines, and `format` for tick labels. Data is loaded asynchronously from a CSV file via the `csv` function, with numerical fields parsed before the `render` function generates the animated circles.

Loading thumbnail…

Fork of HTML Starter

This example displays a scatter plot of housing data, mapping living area (GrLivArea) on the x-axis against sale price (SalePrice) on the y-axis. Each data point is rendered as a small green circle using D3.js selections and the `append("circle")` method. The visualization loads a CSV dataset from a remote URL via `d3.csv`, and constructs linear scales with `d3.scaleLinear` to position the circles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`. The plot is embedded within an HTML page styled with large, centered text.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello hhHTML” in enormous, centered type styled by CSS. It demonstrates a minimal HTML page that combines static markup with a JavaScript console call. The code uses the browser’s built-in `console.log` API to output “Hello JavaScript!” to developer tools, while the page itself relies on standard HTML and CSS for layout and font sizing. No external libraries or data sources are used.

Loading thumbnail…

Cars Report

This example renders a bare HTML page with an empty script tag, displaying a static "Hello World" message. It uses no visualization libraries or data, serving only as a minimal starter template for CSS and JavaScript integration. The code defines a single unused variable `messgae` in `index.js` and relies on plain HTML structure, with no chart, dataset, or interactive behavior present.