H

Haili0109

@haili109·20 public vizzes

Loading thumbnail…

Fork of Fork of Project Data Science

This visualization presents housing data from Hanoi, combining a scatter plot of price per square meter against distance to hospital with a bar chart of house type counts. An interval selection on the scatter plot’s x-axis filters both views by price, while a point selection on the bar chart’s color encoding filters the scatter plot by house type. Built with Vega-Lite API and d3.v7, it uses `vl.selectInterval` and `vl.selectPoint` for linked interactions. The custom color scale maps six house types, with point size encoding bedroom count. Data is loaded asynchronously from a GitHub CSV.

Loading thumbnail…

Fork of Automatic Color Schemes

This example shows how color schemes can be automatically generated from configurations of hue, saturation, and luminance, displayed as vertical gradient bars across the screen. The code uses `d3.cubehelix` to define dark and light endpoints for each hue, then `d3.interpolateCubehelix` and `d3.range` to create seven-step gradients from those endpoints. It renders the resulting colors as adjacent SVG rectangles, with each rect slightly overlapping to produce seamless transitions. A CSV file provides a selected index, though the current code only reads it without affecting the visible output.

Loading thumbnail…

Fork of Bivariate Choropleth

This example visualizes racial demographics across New York census tracts using a bivariate choropleth. The map blends green for white population density and orange for Black population density, creating overlapping color gradients that show spatial distributions of both groups simultaneously. The visualization uses `d3.json` to load TopoJSON tract boundaries and American Community Survey demographic data, then renders the map with `d3.geoPath` and SVG paths. Colors are computed via `d3.scaleLinear` with color blending from the color-blend library, and the map supports zooming through `d3.zoom`.

Loading thumbnail…

Fork of Food Production Stacked Bar Chart

This visualization displays the estimated food production for major continents in 2021, broken down by food type using stacked horizontal bars. It uses D3.js scales such as `scaleBand` and `scaleLinear`, with `axisBottom` and `axisLeft` for axes. The data comes from a Kaggle dataset on world food production, loaded as CSV and filtered to the year 2021. A color legend with mouse interactions highlights specific food categories on hover, applying a fade effect to non-selected bars.

Loading thumbnail…

Fork of Adjacency Matrix Using D3

This example presents a static adjacency matrix of a small, 20-node social network derived from the Network Repository’s high-tech firm dataset. The visualization uses a grid of colored rectangles, where cell color encodes edge weight (light gray for zero, yellow for low, orange for medium, and red for high values). The visualization is built using d3.scaleBand for axis positioning, d3.select for SVG rendering, and d3.csv to load the edge data. The code includes an interactive tooltip that appears on mouseover, showing the source, target, and value of each edge. The rendering uses an SVG canvas with row and column labels, and the tooltip is implemented using D3 transitions for opacity changes.

Loading thumbnail…

Fork of Fork of D3.js collapsible tree with boxes

This example presents a hierarchical organizational tree using D3.js v3, displaying departments, teams, and individual members as distinct nodes with labeled links indicating synchronous or asynchronous connections. The visualization uses an SVG-based collapsible tree layout, with rectangular boxes for nodes and tooltips for additional information. Rendered from JSON data, the tree employs D3's tree layout and scales node colors by depth, with D3 link generators creating curved paths between hierarchical levels. The interface supports interactive node selection and expansion, as demonstrated by the `treeBoxes` function called on load.

Loading thumbnail…

Fork of Treemap

This fork of a D3 treemap visualizes hierarchical data from a CSV file, showing the production values of countries grouped by continent as nested rectangles. Each rectangle uses color to represent its leaf node, and hovering highlights it while a title tooltip displays the country name and production value. The code uses `d3.csv`, `d3.stratify`, and `d3.treemap` to compute layout, then renders SVG rectangles and text labels with D3 v6.

Loading thumbnail…

Fork of World Countries Tree

This visualization renders the hierarchical structure of world countries as a vertical tree, grouping nations by continent and subregion. It shows the nested relationships between continents, regional divisions, and individual countries. The code uses D3 v5’s `tree` layout and `hierarchy` functions to compute node positions, with `linkVertical` generating curved paths for connections. SVG circles and text labels display each node, while the `zoom` behavior enables panning and scaling. Data is loaded from a JSON file, and styling uses the Playfair Display font with color-coded nodes and links by depth.

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This full-circle radial tree displays a hierarchical breakdown of world countries by continent and subregion, using a JSON dataset. The visualization supports panning and zooming through D3’s `d3.zoom` event handler. The layout is computed with `d3.cluster()` in a 360-degree arrangement, with curved link paths and nodes rendered as SVG circles. Text labels rotate radially to follow branch angles, with font size scaled by depth using `d3.scaleSqrt`. Distinct stroke colors and dash patterns differentiate hierarchy levels.

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical relationships between world countries, grouped by continent and subregion. Using D3.js v4, it renders a circular cluster layout where nodes are positioned by angle and radius. The visualization reads a nested JSON file and uses `d3.cluster` to compute positions, `d3.hierarchy` to process the tree structure, and `d3.zoom` to enable panning and zooming interactions. The code uses `project()` for polar-to-Cartesian conversion and styles text with different font sizes and rotations based on depth.

Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This example displays a pie chart of the top five US states by GDP using D3 v4 within a React application. The chart visualizes state rankings, with each slice labeled by state name, alongside a legend that pairs colors with state names and GDP values. The code builds the visualization by computing arc paths with `d3.arc`, generating slice data via `d3.pie`, and applying color scales with `d3.scaleOrdinal`. Data is loaded from a remote CSV file using D3's `csv` function. The SVG rendering is handled directly through D3's append and attribute methods, with a React component managing the data-fetching lifecycle.

Loading thumbnail…

Fork of Assignment 2 - Pie Chart

This pie chart visualizes the population distribution across continents. The chart uses a color-coded legend and labels each slice with its population count in thousands. The visualization is built with D3 v5, using the `pie`, `arc`, and `scaleOrdinal` APIs to generate and style the slices. It loads data from a local CSV file and renders the chart as an SVG, with a custom legend showing each continent and its corresponding value.

Loading thumbnail…

Fork of Interactive Stacked Bar Chart

This interactive radial stacked bar chart displays the estimated religious breakdown of the most populous 20 countries in 2010, based on data from the Pew Research Center. Users can select a country from a dropdown menu to view its population distribution across six religious categories, with hover interactions on the legend highlighting specific religions. Built with D3.js, the visualization uses `scaleBand` and `scaleRadial` to map religions to angular segments and population to radial distances, while `d3.stack` processes the grouped data for layered arcs rendered as SVG paths with animated transitions.

Loading thumbnail…

Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes the population distribution of religions across countries, with each country represented as a circular segment divided into stacked sections by religion. The visualization uses d3.arc for the radial wedges, d3.scaleBand for angular positioning, d3.scaleRadial for radius mapping, and d3.scaleOrdinal for color encoding. An interactive d3 menu component filters the chart by country, and d3.Transition animates updates when selections change. Data comes from a CSV file containing country, religion, and population figures, rendered as SVG.

Loading thumbnail…

Fork of HeatMap: Career Data

This fork of a D3.js heatmap visualizes career data from a CSV file, using an inferno color scale to encode values. The chart displays groups along the x-axis and variables on the y-axis, with each cell’s color intensity reflecting its numeric value. Built with D3 v4, it employs `d3.scaleBand`, `d3.scaleSequential`, and `d3.interpolateInferno` for axes and color mapping. Interactive tooltips show exact cell values on hover, while the SVG rendering includes axis labels and a title.

Loading thumbnail…

Fork of d3 time series streamgraph

This streamgraph visualizes Google search trends for five video game franchises—Super Mario, Pokémon, The Legend of Zelda, Call of Duty, and Grand Theft Auto—from 2014 to 2024. Using D3.js, the chart employs a silhouette offset (`d3.stackOffsetSilhouette`) to create symmetric area layers, with color assigned via a ColorBrewer Set3 palette and a legend from the d3-legend library. The x-axis shows time in years, while the y-axis represents relative popularity. Data is loaded from a CSV, simplified from the original Google Trends dataset.

Loading thumbnail…

Fork of Making A Bar Chart

This example shows the weights of ten animal species in a bar chart, with each bar representing a species from the provided CSV data. The x-axis displays species names with rotated labels, while the y-axis shows weight in kilograms. The code uses d3.csv to load data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric axis, and d3.axisBottom and d3.axisLeft to render the axes. SVG rectangles are appended to the chart with steelblue fills, and margins are applied to position the visualization within the SVG canvas.

Loading thumbnail…

Fork of Simple Bar Chart

A fork of a simple bar chart visualizes the animal counts from the included Animal.csv file, with each animal category represented as a bar. The chart displays counts for species like Tiger, Lion, and Deer, with values ranging up to 20. The implementation uses D3's `scaleBand`, `scaleLinear`, and `axisLeft` functions, along with the `@curran/axis-labels` library for axis labels. The visualization reads data from the local CSV and renders it within an SVG, using a join approach to create the bar marks.

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes student grades across five subjects, encoding each value as a colored, rounded rectangle. Rendered as an SVG using D3.js v4, it employs `d3.scaleSequential` with an interpolateCool color scheme, `d3.axisBottom` and `d3.axisLeft` for categorical axes, and interactive tooltips triggered by mouse events. The data comes from a CSV file containing grades for ten students across five subjects.

Loading thumbnail…

Fork of Scatter Plot with Color

This fork of a scatter plot visualizes the Iris Dataset, showing sepal length against petal length. Each point is colored by species—setosa, versicolor, or virginica—with a custom color legend on the right. Using D3 7.8.5, the code employs `scaleLinear` for axes, `scaleOrdinal` with a custom color array for categorization, and `selection.join` to manage SVG elements. The axes and color legend are separate modules utilizing `axisLeft`, `axisBottom`, and `colorLegend` functions.