D

daniel

@dudhfysibw1027·40 public vizzes

Loading thumbnail…

VCT 2023

This interactive dashboard explores statistics from VCT 2023, offering dropdown menus to switch between viewing data aggregated by agent, map, or player. It displays scatterplots of selected attributes like KD ratio, pick rate, and headshot percentage, alongside bar charts and a pie chart for win rate. Built with D3 v4, the visualization uses dynamic SVG rendering, transitions, and tooltips to show detailed values upon hover. The code demonstrates importing D3 modules for scales, axes, and dropdown menus, plus custom ES6 modules for scatterplots and menu handling.

Loading thumbnail…

test2024

This visualization displays university rankings from a CSV dataset as an interactive stacked bar chart. Users can sort universities by overall score or individual performance metrics, and choose ascending or descending order using dropdown menus. The chart renders with D3.js v4, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The bars stack five score components—teaching, research, citations, industry income, and international outlook—using D3's stack API, with SVG rendering for the final output.

Loading thumbnail…

Fork of VCT 2023

This interactive visualization explores VCT 2023 esports statistics across agents, maps, and players. Users can switch between datasets via dropdown menus, adjusting bar chart columns and scatterplot axes for the agent data. The bar plot displays sorted metric values, while scatterplots show correlations between chosen attributes with tooltips on hover. A correlation matrix option replaces the scatterplot for agents. The visualization uses D3 v4 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `dropdownMenu`, rendering SVG with animations, with data loaded from CSV files.

Loading thumbnail…

VCtAxes

This example presents a two-panel visualization of Valorant Champions Tour player statistics from a CSV dataset. A horizontal bar chart compares performance metrics for different agents, while an animated scatter plot shows the correlation between selected metrics, such as kills, deaths, and assists. Interactive dropdown menus let users switch the metric displayed in the bar chart and choose which variables to plot on the scatter plot's X and Y axes. The visualization uses D3 v7 with ES6 modules, including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `transition().duration()` for the animated circles.

Loading thumbnail…

Fork of bar_test

This visualization displays university ranking data as an interactive stacked bar chart, showing scores across teaching, research, citations, industry income, and international outlook for each institution. Users select a sorting metric and order from dropdown menus, which reorders bars and changes the stacking priority. The chart uses D3 v4 with `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `stack` to render SVG rectangles, while the `dropdownMenu` module handles menu interactions. Data comes from a local CSV file with Times Higher Education rankings.

Loading thumbnail…

Fork of preprocess

This interactive dashboard compares player performance across agents, maps, and individual players in a competitive FPS game. It presents three linked views controlled by dropdown menus: a bar chart, an animated scatter plot, and a pie chart. The visualization loads data from CSV files and uses D3 v7 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `pie`. The scatter plots use D3 transitions for animated point placement, and dropdown menus are built with a custom ES6 module.

Loading thumbnail…

preprocess

This interactive D3.js dashboard lets users explore esports performance data through dropdown menus that switch the dataset displayed, comparing agents, maps, and players. It shows scatter plots of selected metrics (e.g., K/D ratio vs. pick rate) and bar charts, with animated transitions on data changes. The example uses D3 v7 APIs like `scaleLinear`, `axisBottom`, and `transition().duration()`, along with local ES6 modules for reusable plotting and dropdown components. Data comes from CSV files loaded via `d3.csv`.

Loading thumbnail…

preprocess

This interactive dashboard visualizes Valorant player statistics with a bar chart and animated scatter plot. Users can switch the bar chart metric and select X/Y axes for the scatter plot via dropdown menus built with D3 selections and a custom ES6 module. The bar chart uses d3.scaleLinear and d3.scaleBand to display agent comparisons, while the scatter plot uses d3.scaleLinear domains, d3.axisBottom, d3.axisLeft, and transition delays for animated circles. Data is loaded from CSV files using d3.csv, with SVG rendering.

Loading thumbnail…

Fork of Fork of Customizing Axes

This example presents an interactive analysis of agent performance metrics from Valorant esports match data, displayed through a bar chart and scatter plot. Users can dynamically change the metric displayed on each chart using dropdown menus. The visualization is built with D3 v7, utilizing `scaleLinear` and `scaleBand` for the bar chart and `scaleLinear` with `extent` for the scatter plot. Data is loaded from a local CSV file and rendered as animated SVG circles and rectangles.

Loading thumbnail…

Fork of Customizing Axes

This example customizes a horizontal bar chart of the top 10 most populated countries. It uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population data loaded from a CSV. Axis lines and ticks are selectively removed, tick labels use a custom `.3s` format replacing “G” with “B”, and a title and axis label are added. SVG rectangles are rendered for each bar, with styling from an external CSS file.

Loading thumbnail…

Fork of HTML Starter

This is a minimal HTML starter example that displays the message "Hello HTML!" centered on the page. The page uses plain CSS for styling, setting the font size and text alignment, while the accompanying JavaScript file imports the D3 library but does not execute any visualization code. The page serves as a basic template for HTML and CSS projects, with the D3 import ready for future use. No data visualization is actually performed in this example.

Loading thumbnail…

Fork of Fork of Customizing Axes

This dashboard lets users explore player statistics from professional VALORANT matches through interactive bar and scatter plots. Using D3.js v4, it loads match data via `d3.csv` and renders SVG charts with animated transitions. Dropdown menus allow switching between metrics like KD, kills, and win rate for both visualizations. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for point colors, while the bar chart sorts agents by the selected metric.

Loading thumbnail…

Fork of Customizing Axes

This visualization presents a comparative analysis of player performance in a gaming context, featuring both a bar chart and an interactive scatter plot. The bar chart displays aggregated performance metrics per agent, while the scatter plot allows users to explore correlations between different statistics like kills, deaths, and assists. Users can dynamically switch which metric is displayed on the bar chart and both axes of the scatter plot via dropdown menus. The visualization is built using D3 version 7, leveraging APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements and manage the interactive updates. The data is loaded from CSV files containing player match statistics.

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This interactive scatterplot matrix visualizes correlations among eight physical measurements of abalone from the UCI dataset, with a color scale from white to steelblue indicating correlation strength and direction. A dropdown menu lets users filter the data by sex (Male, Female, Infant). The visualization uses D3 v5 with `scaleBand` and `scaleLinear` for axes, `arr.correlationMatrix` from the jeezy library to compute correlations, and SVG rendering to draw the grid of colored cells with correlation values and a color legend bar.

Loading thumbnail…

Fork of bar_test

A grouped bar chart displays university ranking data, with each institution’s score broken into five stacked components (teaching, research, citations, industry income, and international outlook). Users can reorder the bars by selecting a different score metric or sorting order from dropdown menus, built with a custom `dropdownMenu` module. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, `stack`, and `axisBottom`, rendering SVG rectangles with mouseover tooltips showing school names and component scores. Data comes from a CSV file containing Times Higher Education rankings.

Loading thumbnail…

Fork of HTML Starter

This visualization shows a world map with countries colored by population using a threshold scale, rendered as SVG paths via `d3.geoPath` with a Mercator projection. The choropleth uses a quantized color range from light to dark blue, and hover interactions trigger tooltips built with `d3-tip`, displaying each country’s name and population. Data comes from a TopoJSON file and a TSV of population figures, both loaded asynchronously with the queue library.

Loading thumbnail…

bar_test

This visualization displays the scores of world universities across multiple metrics, presenting them as stacked horizontal bars. Users can sort the data by overall score or individual metrics and toggle between ascending and descending order via dropdown menus built with the `dropdownMenu` utility. The chart uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map university names, score values, and color-coded metric segments. Data is loaded from a CSV file containing ranked university performance statistics, and the SVG rendering updates dynamically with each selection change.

Loading thumbnail…

Fork of Pie Chart

This example visualizes the basic subscription cost of Netflix in different countries using a pie chart, with a legend listing each country and its corresponding price. The chart is rendered as SVG using D3 v5, with the pie layout (`d3.pie`), arc generator (`d3.arc`), and ordinal color scale (`d3.scaleOrdinal` with `schemeCategory10`). Data is loaded asynchronously from a CSV file via `d3.csv` and sorted descending by cost before rendering. The visualization includes mouse-over logging of each segment's value and uses custom number formatting to display dollar amounts.

Loading thumbnail…

Fork of first boxplot

This visualization shows a single boxplot of a small dataset, with the median line, interquartile range box, and whiskers extending to the most extreme non-outlier points. Outliers beyond the 1.5×IQR fence are rendered as small circles. The chart is built with D3 v5, using `d3.scaleLinear` for the y-axis, `d3.quantile` to compute quartiles and median, and `d3.axisLeft` for the tick labels. The box, whiskers, and outlier circles are drawn as SVG elements within a React application.

Loading thumbnail…

Untitled

This example shows violin plots of sepal length distributions for three iris species, using a kernel density estimate to depict the shape of each group's data. The code loads the Iris dataset via `d3.csv`, then applies `d3.nest()` to group by species and computes densities with a custom `kernelDensityEstimator` using the Epanechnikov kernel. It renders the resulting smoothed areas as SVG paths with `d3.area()` and `d3.curveCatmullRom`, positioned using `d3.scaleBand` and `d3.scaleLinear` scales.

Loading thumbnail…

Untitled

A violin plot displays the distribution of sepal length for three Iris species, with each species represented by a mirrored density curve. The chart is rendered as an SVG using D3 v4, loading data from a CSV file. The code uses `d3.histogram` to bin values, `d3.nest` for grouping by species, and `d3.area` with `d3.curveCatmullRom` to draw the smoothed violin shapes. Axes are created with `d3.axisLeft` and `d3.axisBottom`, and a linear scale maps bin counts to widths.

Loading thumbnail…

Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing how each flower’s sepal and petal measurements vary across three species. Users can drag any vertical axis horizontally to reorder the dimensions, with all connecting polylines smoothly updating via D3 transitions. The visualization uses D3 v5’s `scaleLinear`, `scaleOrdinal`, and `scalePoint` for positioning, while axes are rendered with `axisLeft` and drag behavior is implemented through `d3.drag()`. Data is loaded from a CSV file and plotted as semi-transparent SVG paths colored by species.

Loading thumbnail…

Scatter Plot

An interactive scatter plot of the Iris dataset lets users explore relationships between different measurements. Two dropdown menus dynamically change which numerical columns are plotted on the X and Y axes. The visualization is built with D3.js, using scales for axes and ordinal color mapping for the categorical species. Circles animate into position with a staggered delay, and axes and labels update based on the selected data columns.

Loading thumbnail…

Parallel Coordinate Plot

This parallel coordinate plot displays the classic Iris flower dataset, visualizing 150 samples across four measurements (sepal and petal length and width). Each flower species (setosa, versicolor, virginica) is drawn as a colored polyline using D3’s `line()` generator, with colors mapped via `scaleOrdinal`. The axes are interactive: dragging any vertical axis reorders the dimensions, and the lines and axes animate smoothly using a custom `transition` that applies a five-millisecond duration. The visualization is rendered as SVG, with axis labels and a legend for the three species.

Loading thumbnail…

Fork of Scatter Plot

A scatter plot visualizes house sale prices over time, with each data point colored by property type and bedroom count. Interactive dropdown menus let users choose which columns to map to the X and Y axes. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for grid lines, and d3.transition with attribute tweening for animated circle placement. Data comes from a CSV file containing sale dates, median prices, property types, and bedroom counts.

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows the commit history of D3 packages as a streamgraph, where each colored layer represents a repository and its thickness reflects the number of weekly commits, smoothed with `array-blur`. Layer order follows the first commit date, revealing the monolithic `d3` repository’s early dominance and the later explosion of packages around the 4.0 release. The code uses `d3.stackOffsetWiggle`, `d3.area`, and `d3-area-label` for the streamgraph rendering, with data loaded from a JSON file of all D3 commits. SVG output includes interactive links to each GitHub repository.

Loading thumbnail…

scatterplot

This scatterplot matrix visualizes the Iris dataset, showing pairwise relationships between sepal and petal measurements, with histograms along the diagonal and color-coded points by species. The plot uses d3.brush for interactive brushing and selection across cells, while d3.histogram generates the diagonal distributions. SVG rendering with d3.scaleLinear, d3.scaleOrdinal, and axis components handles scaling and annotation. The interface allows brushing to highlight subsets across all scatterplots simultaneously, with non-selected points dimmed via a hidden class.

Loading thumbnail…

Fork of Scatter Plot

A scatter plot matrix displays pairwise relationships among four Iris flower measurements, with off-diagonal cells showing colored points by species and diagonal cells presenting histograms of each variable. The visualization uses D3 v4 with SVG rendering, employing d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.histogram to construct the grid. Color encoding via d3.scaleOrdinal distinguishes Iris-setosa, Iris-versicolor, and Iris-virginica using the classic Iris dataset loaded from a CSV file.

Loading thumbnail…

Fork of Fork of Scatter Plot

This visualization presents an iris dataset scatter plot matrix, with off-diagonal cells showing colored scatter plots of trait pairs and diagonal cells displaying histograms of individual traits. The scatter plots use colored circles to distinguish the three iris species. Built with D3 v4, the code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.brush`, and `d3.histogram` to render the SVG-based matrix, with axes and frames styled via CSS.

Loading thumbnail…

hw3_submit

This visualization displays a correlation matrix for the abalone dataset, using color and text to show correlations between numerical attributes like Length, Diameter, and various weight measurements. A color legend with a diverging scale from pink to steel blue accompanies the matrix. The visualization uses D3 v5 and the jeezy library's `arr.correlationMatrix` API to compute correlations, rendering the matrix with SVG elements and adding a dropdown menu to filter data by sex.

Loading thumbnail…

Fork of Fork of Hello VizHub

A scatterplot matrix displays correlations between physical measurements of abalone, with cells colored from pink to steel blue based on positive or negative correlation strength. Users select a sex category (Male, Female, Infant) from a dropdown menu to update the matrix for that subset. The visualization uses d3.scaleLinear for color mapping, d3.scaleBand for axes, and renders as SVG with correlation values labeled in each cell. A color legend bar on the right uses d3.axisRight. The data comes from the `abalone.data` file.

Loading thumbnail…

backup

A correlation matrix heatmap displays pairwise correlations among seven physical measurements of abalone (Length, Diameter, Height, and various weights) from the `abalone.data` file. Users select a subset (Male, Female, or Infant) via a dropdown menu. The visualization uses D3 v5 and the jeezy library's `arr.correlationMatrix` to compute correlations, with `scaleBand` for axes and a diverging `scaleLinear` color scale (pink to steel blue) mapping correlation values.

Loading thumbnail…

make a bar chart

This example displays a horizontal bar chart of population by country for the top ten most populous nations. Built with D3 v7 using a data-driven approach, it loads population figures from a local CSV file and renders SVG bars with custom scales. The code demonstrates key D3 API usage including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart layout. The bars are colored steel blue via CSS, and population values are converted from strings to numbers during data preparation.

Loading thumbnail…

Fork of test

This example displays a correlation matrix for the mtcars dataset, with each cell showing the correlation coefficient between two variables, either as a numerically labeled square or a colored circle. The color scale encodes the strength and direction of correlation, ranging from red for negative through white for zero to dark blue for positive values. The visualization uses D3.js version 3 with an ordinal scale for positioning and a linear color scale, rendering as SVG. A vertical color legend with axis is included on the right side.

Loading thumbnail…

test

This example shows a correlation matrix for the mtcars dataset, displaying pairwise Pearson correlation coefficients between variables as both numeric values and colored circles. Negative correlations appear in red, positive correlations in blue, and the diagonal labels each variable. The visualization is rendered as an SVG using D3 v3, with a diverging color scale mapping values from -1 to 1. A legend on the right shows the color gradient. The data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Parallel coordinate

This interactive parallel coordinate plot visualizes the Iris dataset, with each flower’s measurements (sepal length, sepal width, petal length, petal width) drawn as colored polylines across four vertical axes. Users can drag the axes to reorder dimensions dynamically, and dropdown menus allow swapping any axis to a different dataset column, updating the chart with d3 transitions. Built with D3 v7, it uses d3.scalePoint, d3.scaleLinear, and d3.axisLeft, with SVG rendering and d3.drag for axis repositioning.

Loading thumbnail…

312551091 of Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying relationships between sepal and petal measurements with circles colored by iris species. Users can dynamically switch which numerical columns appear on the x- and y-axes via dropdown menus. The visualization uses D3 v7 modules including `scaleLinear`, `axisBottom`, and `axisLeft`, as well as a custom dropdown module and an animated `transition` that staggers circle appearances. The SVG rendering includes labeled axes, colored ordinal scales, and an interactive menu interface.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populated countries, with population values scaled in billions and abbreviated tick labels. The chart customizes its axes by removing domain lines and tick marks from the y-axis, while the x-axis uses a custom tick format that converts G (giga) to B (billion). Built with D3 v7, the visualization loads data from a CSV file and renders to SVG, using scales like `scaleLinear` and `scaleBand` alongside `axisLeft` and `axisBottom` to position bars and labels.

Loading thumbnail…

make a smile face

A yellow smiley face is drawn in the center of an SVG canvas using D3 v7. The face includes a circular head, two black eyes, and an arc-based mouth created with the `d3.arc` generator. Two rectangular eyebrows are added, and the right eyebrow animates by repeatedly transitioning its vertical position via `transition.attr` over two-second durations, causing a winking effect while the rest of the face remains static.

Loading thumbnail…

Cars Report

This example displays a simple text report of cars priced under $2,000, using D3 v5 to load and parse a local JSON dataset. ES6 modules import the car data and a formatting function, while the report is generated by filtering the array and joining formatted strings. The output appears in a pre-styled HTML element, demonstrating modular code organization and data processing without any chart rendering.