Lê Minh Bằng

@MinhBang1000·8 public vizzes

Fork of Data Visualization Homework 6: ThemeRiver

This example presents a ThemeRiver visualization that tracks the median price of house sales, broken down by property type and number of bedrooms, over time. It displays the data as stacked, wiggled areas to show how the price distributions evolve across the years. The implementation uses the D3.js library (version 5) to load the data, process it, and render the visualization with SVG and animations. It also integrates a color legend and a dropdown menu (if present) to facilitate interaction, using D3's `scaleTime`, `stack`, and `area` functions.

Oct 18, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This interactive stacked bar chart visualizes the 2024 Times Higher Education World University Rankings, displaying scores for teaching, research, citations, industry income, and international outlook across top universities. Built with D3 v5, the visualization uses `d3.stack` and `d3.scaleBand` to compose the bar segments, with color-coded legends that toggle categories on and off. The chart includes dropdown menus for sorting by various metrics, previous/next navigation buttons, and hover tooltips revealing detailed scores for each institution, all rendered as SVG elements with animation support.

Oct 10, 2024

Loading thumbnail…

Fork of Data Visualization Homework 4: Brushable Scatter Plot Matrix

This visualization is a brushable scatter plot matrix of the Iris dataset, showing pairwise relationships between four flower measurements. Each off-diagonal cell displays points colored by species class, while diagonal cells show histograms of individual variables, with axis labels and a color legend for the three Iris classes. Built with D3 v5, the example uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, `d3.cross` to generate cell positions, `d3.histogram` for the diagonal distributions, and `d3.axisBottom` and `d3.axisLeft` with custom tick styling to render the grid.

Oct 4, 2024

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationships between sepal and petal dimensions across three Iris species. Colored circles represent individual flowers, with distinct colors for Iris-setosa, Iris-versicolor, and Iris-virginica. The visualization is interactive, allowing users to select which measurements appear on the x and y axes through dropdown menus. Hovering over the legend highlights all points of a corresponding species by increasing their opacity. The code uses D3.js version 5, with functions like `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for rendering axes, and `transition` for smooth animations when the data is re-rendered or filtered. Data is loaded from a CSV file, and the SVG canvas is dynamically updated with new points and axes.

Sep 9, 2024

Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, sourced from the 2017 United Nations World Population Prospects. It demonstrates d3.axisBottom and d3.axisLeft with custom tick formatting, using d3.format to abbreviate population values (e.g., converting “G” to “B”). The chart uses d3.scaleLinear and d3.scaleBand with margins, removing default axis domains and styling text via CSS, while rendering to SVG.

Sep 8, 2024

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Penguins Dataset, mapping bill length to the x-axis and flipper length to the y-axis for each penguin observation. The code uses D3’s `scaleLinear` to create scales from the data extents, then renders axes via the `axisLeft` function and custom `xAxis` and `yAxis` helpers from `@curran/axis-labels`. Circles are drawn with D3’s `selectAll` and `join` pattern, with configurable radius and opacity. The visualization is built using data imported from `@curran/penguins`.

Sep 8, 2024

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that draws a diagonal green X across the full browser window. It uses D3 v5 to select the chart container and append an SVG element, then defines a `redraw` function that reads the container’s `clientWidth` and `clientHeight` via the CSS `getElementById` method. The function updates the SVG’s width and height attributes, binds two line data points, and applies stroke properties. A window `resize` event listener triggers `redraw` on every viewport change, ensuring the X always spans the current dimensions.

Sep 6, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the "Hello World" starting point for VizHub version 3, showcasing a minimal runtime environment that supports continuous hot reloading via interactive widgets. The code exports a `main` function that takes a container DIV and sets its inner HTML to display large text, with the font size adjustable in real time by Alt-dragging a numeric value in the editor. It highlights the simplified entry point and the interactive feedback loop that drives the platform's development experience.

Sep 6, 2024