void-LSTM

@void-LSTM·10 public vizzes

Harry Potter movies

A grouped bar chart animates the eight Harry Potter films, comparing their budgets and box office profits in millions. Bars grow sequentially over two seconds using D3 transitions, with movie titles as the color legend and tooltips displaying details like runtime and release year. The visualization uses D3’s scaleBand and scaleLinear for axes, with data from the movie CSV.

May 23, 2022

Loading thumbnail…

Fork of Religions of Largest 20 Countries

A stacked bar chart displays the estimated 2010 religious breakdown of the world’s 20 most populous countries, with each bar segmented by religion. Hovering over a segment shows a tooltip with the exact population, while hovering over the legend highlights bars for that religion and fades others. The visualization uses D3 v3’s `d3.layout.stack`, `d3.svg.axis`, `d3.legend.color`, and `d3-tip` for interactivity. Data originates from Pew Research’s Global Religious Landscape, processed into a CSV and rendered as an animated SVG.

May 21, 2022

Loading thumbnail…

Fork of Reusable Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts, with each bar representing a month’s total kWh usage broken down by bill year. An interactive menu switches between accounts. Built with d3.stack, d3.scaleBand, and d3.scaleLinear, it renders SVG bars with tooltips showing per-year and total consumption, plus a linked legend. Data is loaded from a CSV via d3.csv, and the chart is implemented as a reusable function.

May 21, 2022

Loading thumbnail…

StackBarChart

This stacked bar chart visualizes fruit quantities across four months, with each bar segment representing apples, bananas, cherries, or dates. The visualization uses React with SVG rendering and leverages D3’s `d3.stack()` with a default offset to compute the stacked series, alongside `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeSet3` distinguishes categories, while the x-axis labels are formatted using the Moment.js library. Data is hardcoded in the script, and axes are generated through a custom `naiveAxes()` function.

May 19, 2022

Loading thumbnail…

Fork of Version two: Top Athletes

This interactive bar chart displays the top 40 athletes by medal count, with each bar representing an athlete and its length indicating the number of medals won. Hovering over a bar reveals a tooltip showing the athlete’s full name, medal type, event, and year. Built with the Vega-Lite API, the visualization loads Olympic Games data from a local CSV file via `d3.csv`, and uses `vl.markBar()` to encode the categorical athlete names on the y-axis and the aggregated medal count on the x-axis. The chart also uses `vl.tooltip()` for detail-on-demand and custom axis styling from a shared config object.

May 19, 2022

Loading thumbnail…

Fork of Clustered Bar Chart - Credit Card Utilization by Attrition Status

This interactive clustered bar chart visualizes credit card utilization trends from the Bank Customers Dataset, comparing average transaction amounts, credit limits, or revolving balances across demographic categories. The x-axis menu selects grouping variables like income, education, or marital status, while the y-axis menu chooses the metric to aggregate. Bar colors distinguish existing versus attrited customers, with hover tooltips revealing sums and sample counts. Built with D3 v7, the visualization uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, `rollups` for summary statistics, and `transition` for animated updates when menu selections change.

May 19, 2022

Loading thumbnail…

地图动态变化

This example visualizes dynamic changes on a map by animating stacked bar charts over time, with each bar segment representing a different fruit category. The visualization uses SVG rendering within a React framework, combining geographic data from a TopoJSON file with temporal data series. The code employs d3.stack() to structure the hierarchical data, d3.scaleLinear() for scaling, and d3.v5 along with topojson for map projections. Transitions animate the chart changes, though the map itself appears static in the provided implementation.

Apr 28, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Apr 25, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" centered on the page. It uses plain CSS to set the font size and alignment, with JavaScript and HTML providing the structure. The implementation relies on a standard HTML document with a `<style>` block and a `<div>` element, demonstrating a minimal setup for web-based visualization without external libraries.

Apr 18, 2022

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates the basic building blocks of SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It shows how a group element can apply shared fill and stroke properties, while a separate class targets line and path elements for custom stroke width and color. The code uses plain HTML, CSS, and JavaScript within a React framework, rendering via SVG. The shapes are manually positioned with fixed coordinates on a 960 by 500 canvas, with no external data source.

Apr 15, 2022