9176371431

@9176371431·21 public vizzes

ICE-6: Rendering Marks and Channels with React & D3

This example shows the basic monthly cost of Netflix in different countries using a horizontal bar chart rendered with React and D3. The visualization maps country names along the y-axis using `d3.scaleBand` and pricing values along the x-axis with `d3.scaleLinear`, displaying red rectangles as marks. Data is loaded from a CSV file via `d3.csv` and limited to the first 20 entries. The chart uses React hooks (`useState`, `useEffect`) to manage data fetching, while D3 generates SVG scales, axes, and grid lines for the static rendering.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6 SAI VIGNESH RAYAL

This example displays a full-screen, centered "Hello React!" message using a 13-em font size. The application is built with the React framework, specifically using `React.createElement` and `ReactDOM.render` APIs. The HTML structure loads React and ReactDOM from CDN, then mounts the JavaScript component into a root `div` element using a separate `bundle.js` file. The rendered output is a static text component with no interactive elements or data processing. This is a minimal, non-data-driven React application.

Mar 9, 2023

Loading thumbnail…

ICE-6 SAI VIGNESH RAYAL

This example renders a full-screen, centered message that reads “Hello React!” in large type. It demonstrates the basic structure of a React application by defining a simple App component and mounting it into a DOM element with the id “root.” The code uses the React and ReactDOM libraries via the production UMD builds loaded from unpkg, and renders the component using the ReactDOM.render method. The presentation is styled with plain CSS, setting the font size to 13em and centering the text horizontally. The data source is the static string inside the component, with no external data or interaction.

Mar 9, 2023

Loading thumbnail…

Fork of ICE_6

This example demonstrates how to set text content in a webpage using D3. It loads D3 v5 via UNPKG and uses the `select` function to target a `div` with the id `message`. The text comes from a local ES6 module, `myMessage.js`, which exports a string. The page then displays the message centered with large font styling from an external CSS file, illustrating basic module imports and DOM manipulation.

Mar 9, 2023

Loading thumbnail…

ICE6 : Scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, plotting flipper length against body mass for individual penguins. Each point is colored by species—orange for Adelie, red for Gentoo, and blue for the remaining species—using D3’s `scaleLinear` and `extent` functions to map data to screen coordinates. The SVG circles are positioned with `cx` and `cy` attributes, and the axes are rendered via `axisLeft` and `axisBottom` from D3 v5. The code uses D3’s `csv` loader to fetch the data and a `join` operation to bind it to circle elements.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 100 songs on Spotify as a horizontal bar chart, showing the duration of each track. The code uses React hooks (useState, useEffect) to load and manage CSV data from a GitHub gist, while D3 v5 provides scales (scaleBand, scaleLinear) and axis generation. SVG rectangles render the bars, with x-axis ticks drawn manually. The chart only plots the first 20 songs from the dataset, with tempo mapped to the y-axis and duration to the x-axis.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example uses React and D3 to render a bar chart of the top 20 songs from a CSV dataset titled "top 100 songs on spotify." The visualization maps song tempo to the y-axis and duration to the x-axis, using red rectangles displayed as SVG marks within a 960x500 canvas. The code imports the `csv`, `scaleBand`, `scaleLinear`, and `max` functions from D3 v5 to load data and compute scales, while a custom row function parses the `TotalDeaths` field. Axes are drawn with manually mapped tick marks using `<line>` and `<text>` elements, and React's `useState` and `useEffect` handle asynchronous data loading.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 20 songs from a Spotify dataset, encoding song tempo on the y-axis and duration on the x-axis with red bars. The React component loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to map values to SVG rectangles. Axis ticks are rendered manually with mapped text and line elements, while d3.max computes the domain for the linear scale. The chart uses React hooks (useState, useEffect) to manage async data fetching and conditional rendering for the loading state.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 20 countries by total deaths from a CSV dataset, rendered as a horizontal bar chart using React and D3. The code leverages `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent each bar, with axes drawn manually via `d3.axisBottom` and tick marks, all positioned using React's declarative JSX markup within an SVG container.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 20 countries by total COVID-19 deaths using horizontal red bars. It renders SVG marks with React state management, while D3 v5 scales (scaleBand, scaleLinear) and axes are computed in the render method. Data loads from a CSV via d3.csv, and the bars’ positions and lengths map country names and death counts through React’s useCallback and useEffect hooks.

Mar 9, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 20 countries by total deaths, based on a Spotify top 100 songs dataset. It uses React with hooks (`useState`, `useEffect`) to load CSV data via `d3.csv`, and renders SVG marks with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes gridlines, axis ticks, and red rectangles as bars, with all marks and channels manually positioned inside a transformed SVG group.

Mar 9, 2023

Loading thumbnail…

Fork of React Starter

A minimal React application renders a single static message, "Hello React!", centered on the page with a font size of 13em. The code uses `ReactDOM.render` to mount the root `<App />` component into the `#root` element, with styling defined in the `index.html` `<style>` block. It imports React and ReactDOM from the UMD production builds via unpkg, while the entry point `index.js` defines the functional component. No interactivity, data fetching, or visualization logic is present; the example demonstrates the basic boilerplate for a React project.

Mar 9, 2023

Loading thumbnail…

IC-6

This example displays the text “Hello React!” centered on the page, styled with a large font size. It demonstrates a minimal React application where the UI is defined in JSX and rendered into the DOM. The code imports React and ReactDOM, defines a simple functional component, and uses `ReactDOM.render()` to mount it to the `#root` element, relying on the UMD builds of React and ReactDOM hosted via unpkg.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the basic cost of Netflix subscriptions across the top 15 countries, using a horizontal bar chart where bar lengths encode cost values. The chart is built with React and D3 v5, with the React component managing state and rendering SVG elements, while D3’s `scaleBand` and `scaleLinear` handle positioning, and `csv` loads the data. The code manually generates axis ticks and grid lines instead of using D3’s axis components, and updates the visualization reactively when new data arrives.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the basic cost of Netflix subscriptions in 15 countries using horizontal bars scaled by d3.scaleLinear and d3.scaleBand. The React component loads CSV data from a gist via d3.csv, slices it to 15 rows, and renders SVG rectangles with manual axis tick generation for both scales. The code uses React hooks (useState, useEffect) and d3.v5 APIs including axisLeft, axisBottom, and max, with the chart drawn inside an SVG group transformed by margins.

Mar 9, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example uses a horizontal bar chart to display the basic cost of Netflix in fifteen countries, loaded from a remote CSV file. React manages the application state and renders the SVG marks, while D3’s `scaleBand` positions the categorical country labels and `scaleLinear` maps the continuous cost values to bar widths. The code manually constructs tick marks and gridlines using `xScale.ticks()` and `yScale.domain()`, drawing each rectangle bar and axis text as React components within an SVG container.

Mar 9, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

Mar 9, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a bar chart of the basic cost of Netflix subscriptions in different countries, with a title and a root container. Built using React and D3 v5, the code renders marks and channels via React’s component model, leveraging `ReactDOM.render` to inject the chart into the DOM. The D3 library is imported to handle data-driven graphics, while the styling is minimal, focusing on the chart’s representation of country-specific pricing.

Mar 9, 2023

Loading thumbnail…

ICE-6:

This example shows the basic cost of Netflix subscriptions across different countries, with the primary visualization rendering a standalone message rather than a chart. The interface displays a centered heading and uses React to render a simple "Hello React!" component inside the root div. The implementation relies on React 16.9 and ReactDOM to manage the component lifecycle, while D3 v5 is loaded but not yet applied to any data or visual encoding. The page structure is minimal, with no explicit data loading, geographic mapping, or interactive elements visible in the provided code, leaving the cost comparison unimplemented beyond the title.

Mar 3, 2023

Loading thumbnail…

ICE_6

This example displays a single, large “Hello React!” message centered on the page. It demonstrates a minimal React rendering pipeline: the `index.js` file defines a simple functional component that returns a styled `<div>`, and it uses `ReactDOM.render` to inject that component into the `#root` element defined in `index.html`. The page loads React and ReactDOM from CDN links (react and react-dom production builds) and then executes the compiled `bundle.js` output.

Mar 3, 2023

Loading thumbnail…

ICE_6

This example displays a bold, centered message reading "Hello VizHub!" using D3.js version 5, loaded directly from the UNPKG CDN. The visualization demonstrates how to import D3’s `select` function to target the `#message` div and set its text content. It also showcases the use of local ES6 modules, with the message string defined in a separate `myMessage.js` file and imported via `import { message }`. The page’s styling comes from a linked `styles.css` file, which sizes the text at 12em and centers it horizontally. The example serves as a minimal proof-of-concept for combining external libraries, local modules, and CSS in a single VizHub project.

Mar 3, 2023