RED98310

@RED98310·35 public vizzes

BarChart

This bar chart displays global video game sales by genre, using data from Kaggle. It shows total sales in units for categories like Action, Shooter, and Platform, with bars rendered as SVG rectangles. The chart implements axes, labels, and a mouseover interaction that changes bar color. It uses d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to construct the visualization, with animated color transitions on mouseout via D3 transitions.

Feb 28, 2021

Loading thumbnail…

BarChartPublisher

A bar chart shows global, EU, JP, NA, and other regional sales for video game publishers, with a dropdown menu to switch the displayed metric. The React app loads CSV data via `d3.csv` and renders SVG bars using `scaleBand` and `scaleLinear`. Axes are drawn with custom React components, and hovering a bar reveals a formatted sales value via an SVG `<title>` tooltip. The dataset originates from Kaggle’s video game sales list.

Feb 28, 2021

Loading thumbnail…

BarChartPlatform

This interactive bar chart displays video game sales across platforms, allowing users to switch between global, EU, JP, NA, and other regional sales metrics via a React dropdown. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes and rendering SVG rectangles. The data comes from Kaggle’s video game sales dataset, loaded via `d3.csv`, with tick formatting handled by `d3.format`.

Feb 28, 2021

Loading thumbnail…

BarChartGenre

This interactive bar chart visualizes the sales of video game genres across different global regions, using a dropdown menu to switch between sales metrics such as Global, EU, JP, NA, and Other Sales. Built with React and D3 v5, it renders SVG rectangles via the `Marks` component, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded from a CSV file using D3’s `csv` function, and the chart scales the y-axis dynamically with `scaleLinear` and `format`.

Feb 28, 2021

Loading thumbnail…

BarChartPlatform

A bar chart displays video game sales across platforms for the top 500 titles, with a dropdown to switch between global, EU, JP, NA, and other regional sales figures. Using React with D3 v5, the visualization renders SVG rectangles whose heights encode sales values, with scales from `d3.scaleBand` and `d3.scaleLinear`. Axis components draw tick marks and labels, while D3’s `csv` loads the Kaggle dataset. Tooltips, formatted via `d3.format`, appear on hover.

Feb 28, 2021

Loading thumbnail…

Fork of A Bar Chart

This fork of a bar chart visualizes the sales of video game genres across different regions, sourced from a Kaggle dataset. It displays the total sales per genre with a dropdown menu to switch between global, EU, JP, NA, and other regional sales figures. Built with React and D3 v5, the SVG rendering uses scaleBand and scaleLinear for axes, while axis components construct ticks with formatted labels via d3.format. Tooltips on each bar provide precise sales values.

Feb 28, 2021

Loading thumbnail…

Fork of Exploring survey data interactively - y-axis

This interactive bar chart explores survey data by allowing users to change the y-axis variable through a dropdown menu. The visualization initially displays average biggest expense across student subject preferences, with the option to switch between variables like sibling counts, height, health, and stress. A d3.nest() function aggregates the survey responses, while d3.scaleBand() and d3.scaleLinear() handle the axes. The chart updates dynamically using D3 v5's enter, update, and exit pattern, re-rendering both the bars and the y-axis with d3.axisLeft() when a new selection is made.

Feb 28, 2021

Loading thumbnail…

A Bar Chart

A bar chart displays total sales for 500 video game genres across global, EU, JP, NA, and other regions, with a dropdown menu to switch the y-axis metric. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for scales, renders SVG rectangles via the `Marks` component, and formats axis ticks with `d3.format`. Data is loaded from a CSV using `d3.csv`.

Feb 28, 2021

Loading thumbnail…

A Scatter Plot

This scatter plot visualizes video game sales across regions, showing each game’s release year on the x-axis and its sales figures on the y-axis, with points colored by genre. A dropdown menu lets viewers switch between regional and global sales attributes. The visualization uses React with D3 v6 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`) and SVG rendering. Hovering over the color legend filters the displayed points by genre, while a native SVG `<title>` element provides tooltips on each circle. Data comes from a Kaggle dataset of video game sales.

Feb 27, 2021

Loading thumbnail…

A Bar Chart(Platform)

This interactive bar chart displays video game sales across platforms, with a dropdown menu to switch between global, EU, JP, NA, and other regional sales figures. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, and SVG rects for bars with native tooltips. The data is loaded via D3’s `csv` from a GitHub-hosted Kaggle dataset of the top 500 games.

Feb 26, 2021

Loading thumbnail…

Fork of A Bar Chart(Platform)

This interactive bar chart displays video game sales across different platforms, allowing users to switch between global, EU, JP, NA, and other regional sales metrics via a React dropdown menu. The visualization uses d3.scaleBand and d3.scaleLinear to map platforms and sales values to SVG rectangles, with axes rendered through custom React components and d3 formatting. Data comes from a Kaggle video game sales dataset, loaded asynchronously via d3.csv and processed through React's useState and useEffect hooks.

Feb 26, 2021

Loading thumbnail…

Fork of A Bar Chart(Publisher)

This interactive bar chart displays global video game sales by publisher, with a dropdown menu to switch between sales regions (Global, EU, JP, NA, Other). The React-based visualization uses D3 v5 scales and axes (scaleBand, scaleLinear) to render SVG rectangles, with tooltips via SVG `<title>` elements. Data originates from Kaggle’s video game sales dataset, loaded as CSV using D3’s `csv` parser.

Feb 26, 2021

Loading thumbnail…

A Bar Chart(Publisher)

This bar chart displays the sales of video games by publisher, allowing users to select among global, EU, JP, NA, and other regional sales data from a dropdown menu. The chart uses D3 v5 scales and axes to map publisher names along the x-axis and sales values on the y-axis, with each publisher represented as a rectangular mark. Interactive elements include the dropdown for changing the sales metric and tooltips revealing exact values. The underlying data is loaded from a CSV file hosted on GitHub, processed with D3’s `csv` function, and the entire visualization is built using React components and SVG rendering.

Feb 26, 2021

Loading thumbnail…

Fork of A Bar Chart(Platform)

Feb 26, 2021

Loading thumbnail…

A Bar Chart(Platform)

This interactive bar chart displays global video game sales across platforms, with a dropdown menu to switch between sales regions including North America, Europe, Japan, and other markets. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, with axes generated through custom components. Sales data is loaded from a Kaggle dataset via d3.csv, and each bar includes a tooltip showing the formatted sales value.

Feb 26, 2021

Loading thumbnail…

Bar Chart

This bar chart visualizes global video game sales by genre, showing that Action leads with 563 million units sold, followed by Shooter and Platform. Built with D3 v6, the SVG chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisLeft and d3.axisBottom for labels. Bars render with a steelblue fill and transition to orange on mouseover via d3.select and d3.transition, with data loaded from a CSV file.

Feb 26, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a bar chart of global video game sales by genre, with bars rendered as SVG rectangles whose heights are scaled by sales figures. The code loads CSV data using `d3.csv` and manages state with React hooks (`useState`, `useEffect`), while `d3.scaleBand` and `d3.scaleLinear` map genres and sales values to pixel positions. The chart is drawn entirely through React components that return SVG elements, demonstrating a hybrid approach where D3 handles data processing and scales, while React handles the DOM rendering.

Feb 25, 2021

Loading thumbnail…

Fork of D3 Starter

This example displays a bar chart of video game genres from a CSV dataset, plotting each genre’s global sales using a D3 scaleBand for the x-axis and a scaleLinear for the y-axis. The React component loads data via d3.csv, maps sales values to numbers, and renders SVG rectangles with heights proportional to sales. The code uses D3 v6’s scaleBand, scaleLinear, max, and csv functions alongside React hooks like useState and useEffect to manage data fetching and state. The chart is static, with no axes or labels, and uses a dataset hosted as a GitHub gist.

Feb 25, 2021

Loading thumbnail…

Fork of React Starter

This bar chart displays global video game sales by genre, with bars extending horizontally from the y-axis. The React application loads CSV data from a GitHub gist, parsing it with D3's `csv` function. It uses `scaleBand` for the categorical genre axis and `scaleLinear` for the sales values, rendering the chart as SVG elements within a React component. State management and data fetching are handled through React hooks `useState` and `useEffect`.

Feb 25, 2021

Loading thumbnail…

bar chart

This example shows the global sales of video games grouped by genre as a static bar chart. The code loads CSV data from a GitHub gist, parses the `Global_Sales` column into numbers with `d3.csv`, and renders bars using React and SVG. The `xScale` uses `scaleBand` for each genre, while `yScale` uses `scaleLinear` with the maximum sales value mapped to the chart’s height, although the bars are drawn with their y-position fixed at zero.

Feb 25, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes from dropdown menus. The visualization uses React with d3.scaleLinear for positioning, d3.csv for data loading, and d3.format for axis tick labels. Rendered as SVG, the plot displays circles for each data point with axis labels and tick marks styled by the Poppins font.

Feb 25, 2021

Loading thumbnail…

menus with react

A pet-selection menu demonstrates stateful user input in a React component. The app shows a static list of six animal options in a native HTML `<select>` element, initially set to "hamster" via `useState`. Built with React and rendered through `ReactDOM.render`, the `Dropdown` component receives the options and selected value, then invokes `onSelectedValueChange` to update the displayed choice in response to user interaction. The interface is styled with large fonts for labels and the dropdown.

Feb 25, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart, with country names on the y-axis and population values on the x-axis, formatted in billions. The visualization is built with React components and D3.js v5, using `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and SVG `rect` elements to render the bars. Data is loaded from a CSV file of the United Nations World Population Prospects 2019 via D3’s `csv` function, and tooltips appear on hover via native SVG `title` elements.

Feb 23, 2021

Loading thumbnail…

Bar Chart

This example demonstrates a minimal bar chart implementation using HTML, CSS, and JavaScript, with the page title "Bar Chart" and the body styled for large centered text. It renders a static "Hello HTML" message rather than an actual chart, serving as a bare-bones template for web-based visualization. The code uses vanilla JavaScript within an inline `<script>` tag, with no external libraries or data sources specified, and appears to be a starting point for building interactive charts.

Feb 23, 2021

Loading thumbnail…

a scatterplot

This scatterplot displays the top 30 best-selling video games, plotting each game’s name along the y-axis against its global sales on the x-axis using circles. The visualization uses d3.csv to load local sales data, then employs d3.scalePoint for the categorical game names and d3.scaleLinear for sales magnitudes, with d3.axisLeft and d3.axisBottom rendering the axes. The SVG is generated through D3 v6 selections, incorporating margins, tick marks, and a formatted sales label, with the data sourced from Kaggle’s video game sales dataset.

Feb 23, 2021

Loading thumbnail…

Fork of a bar chart

This visualization shows the top 30 best-selling video games by global sales, using a fork of a classic bar chart with thin orange bars and labeled axes. The data is loaded from a CSV file containing game names and sales figures. The code uses D3 v6 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to render an SVG chart. It highlights popular titles like Wii Sports and Super Mario Bros., with a custom title and axis labels styled via CSS.

Feb 23, 2021

Loading thumbnail…

a bar chart

This horizontal bar chart ranks video game titles by global sales in units, sourced from a Kaggle dataset. Built with D3 v6, it maps the numeric sales field to a linear x-scale and the game names to a categorical y-scale band. The SVG rendering uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to draw the axes, with orange rectangles encoding each game’s sales value.

Feb 22, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in large, centered type using CSS. It pairs this with a JavaScript script that logs “Hello JavaScript!” to the browser’s console via `console.log`. The page uses plain HTML, CSS, and JavaScript, with no external frameworks or data sources, serving as a bare-bones template for web development.

Feb 22, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

Feb 22, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. React renders SVG elements, while d3-scale’s `scaleBand` and `scaleLinear` position bars and axes. `d3.format` abbreviates population values, and hover tooltips appear via native SVG `<title>` elements. The chart includes labeled axes and a teal color scheme.

Feb 22, 2021

Loading thumbnail…

svg

This example demonstrates how the D3 version 6 library is loaded and initialized within a minimal HTML page, where a single `<pre>` element awaits output from a JavaScript bundle. The code explicitly imports D3 via the `d3.v6.min.js` script tag and relies on the `bundle.js` file to execute any data-processing or visualization logic. While the page structure is visible, the actual rendering or charting commands are not presented in the shown files; instead, it serves as a foundational template for integrating D3's modules such as `d3.select` or `d3.scale` in a version 6 environment.

Feb 22, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in large centered type, with a JavaScript console message. It shows how CSS styling and inline JavaScript can be combined in a single file without external dependencies. The page uses a `<style>` block for body text alignment and font sizing, and a `<script>` tag that calls `console.log` to output “Hello JavaScript!” to the browser’s developer tools. The rendering relies purely on standard HTML, CSS, and vanilla JavaScript, serving as a basic template for web-based visualization projects.

Feb 22, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a basic setup for building a D3 visualization in VizHub. It loads the D3 library from an external CDN and imports ES6 modules locally, showing how to combine these approaches. The code renders a static message, "hello world," into a div element using the D3 v5 library. It uses the standard D3 selection and DOM manipulation APIs, with the `index.js` file handling the text assignment, while the HTML structure and stylesheet are provided in separate files.

Feb 22, 2021

Loading thumbnail…

Vedio Games Bar Chart

This example visualizes video game data as a bar chart, with bars rendered in blue that highlight yellow on hover. The SVG chart is built using D3 version 6, with data loaded from a CSV file via `d3.csvParse`. The code defines scales and axes in the script, though the specific axis and bar positioning setup is incomplete. The implementation uses `d3.select` and `svg.append` to create the chart structure, and includes tooltip and axis placeholders. The static bar sizing is set to 500 by 100 pixels.

Feb 21, 2021

Loading thumbnail…

hello

This example shows a minimal HTML page that displays the text “hi” in large, centered type. It demonstrates the basic structure of a webpage using CSS for styling and JavaScript for interactivity. The page logs “Hello JavaScript!” to the browser’s console via `console.log`, while the body content is styled with a 13em font size and centered alignment using CSS. No external libraries or frameworks are used, relying solely on plain HTML, CSS, and vanilla JavaScript.

Feb 21, 2021