M

Mgk1255

@Mgk1255·65 public vizzes

Loading thumbnail…

Fork of Fork of ICE-6 Bar Graph

This visualization shows Amazon prices for basic monthly service across different states, using a horizontal bar chart to compare costs. The chart displays twelve states ranked by their cost per month, with bars extending from a shared origin. Built with React and D3 v5, the code uses `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. React state manages the asynchronous data loading, while SVG rectangles render the bars with gridlines and axis labels generated via D3’s tick functions.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring points by species (blue, yellow, red). It uses D3 v6 scales, axes, and SVG circles to render the data, with the interactive HTML page loading data from a remote CSV URL. The code also includes custom axis labels and larger tick text for readability.

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using blue, yellow, and red. The SVG circles also encode sepal measurements through their `rx` and `ry` attributes, though these are overridden by the fixed `radius`. Built with React and D3 v6, the code loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders axes using `axisLeft` and `axisBottom`, with labels styled via CSS.

Loading thumbnail…

Fork of ICE-6 Bar Graph

This fork of ICE-6 renders an SVG bar chart of Amazon prices in different states, showing the first 12 countries from a CSV dataset loaded via `d3.csv`. It uses React with the `useState` and `useEffect` hooks to fetch and store the data, then maps it to rectangular bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are custom-built using `d3.axisBottom`-style tick generation, though the code manually draws grid lines and labels with SVG elements. The chart is titled “Amazon Prices in different States” and displays loading text until data arrives.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dark background hosts a dense field of overlapping, semi-transparent circles whose positions and RGB fill colors are randomly generated on each render, creating a chaotic, shimmering cloud. At the center, a large Buddhist figure drawn from a detailed SVG path is displayed. The visualization is built with React, using `ReactDOM` to render the SVG elements, and the circles are generated through nested `A.map` loops with JavaScript's `Math.random()` for placement and color.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense grid of multicolored overlapping circles is rendered over a black background, with an abstract line-drawn figure overlaid on top. The circles are generated by nested map calls in React, each using a random coordinate and RGB value, while the figure uses SVG path data. The example demonstrates React's declarative SVG rendering with procedural generation, combining static vector paths with dynamic, randomized elements.

Loading thumbnail…

Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense scatter of multi-colored circles overlaps a Buddha silhouette, with each circle assigned a random position and fill color via nested array mapping in React. The SVG rendering uses a `<path>` element defining the Buddha shape, scaled and translated within the viewport. React 16.10 renders the circles and path, while SVG attributes like `cx`, `cy`, `r`, and `fill` are generated dynamically with JavaScript's `Math.random()` for opacity and color variation. The code loops through arrays to produce hundreds of overlapping points across the figure.

Loading thumbnail…

Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense cloud of 250 randomly generated, semi-transparent circles in vivid RGB colors overlaps a large, hand-drawn SVG Buddha path rendered in bold black strokes. The circles are positioned using nested `map` calls with `Math.random()` for both x and y coordinates, while the Buddha silhouette is drawn via a single complex SVG `path` element. Built with React and rendered as SVG, the visualization layers chaotic generative dots over the structured religious icon, creating a busy, colorful collage effect against a black background.

Loading thumbnail…

Fork of ICE8 - World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered as orange polygons outlined in black against a blue background. The code loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `geoNaturalEarth1`. An additional path element draws a circular outline defined through the projection. The visualization uses D3 v5 to bind country features to SVG paths, producing a static, styled geographic overview.

Loading thumbnail…

Fork of Fork of ice8

This interactive globe uses D3’s geo projections (d3.geoOrthographic, d3.geoMercator, d3.geoAlbersUsa) and d3.geoPath to render world country boundaries from TopoJSON. Users can drag to rotate the orthographic view, click a country to switch between projections, and zoom with d3.zoom. Country names come from a TSV dataset, and graticules are drawn via d3.geoGraticule. The visualization animates projection changes with SVG transitions.

Loading thumbnail…

Fork of Australia Map

A choropleth map of Australia renders electoral boundaries with a categorical color scale, displaying state names at region centroids. The visualization uses D3.js version 5 with the geoMercator projection and geoPath generator to project TopoJSON data into SVG paths. The code applies a ten-color ordinal scale based on electoral division properties, with state name labels positioned via the projection's centroid method. The React framework loads geographic data from a GitHub gist, styling state boundaries with black strokes and white fills.

Loading thumbnail…

Fork of Cars Tree

This example shows a hierarchical tree of car models organized by company, using interactive, animated SVG nodes and links that expand and collapse on click. It loads D3 v3 from a CDN and a local JSON file describing the car data, then renders the tree with custom rectangular nodes, colored by type, and green links with red arrow markers. The visualization supports zooming and panning via d3.behavior.zoom, and includes hover tooltips to display additional details for each node.

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This social network graph visualizes friend connections between named individuals in a small dataset. Interactive nodes are rendered as labeled circles with directed links showing relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes. Drag-and-drop functionality and hover highlighting are implemented via d3.drag and mouseover/mouseout events. The SVG output includes marker elements for directional arrows and text labels for node identification.

Loading thumbnail…

ICE8 - Social Network Graph

This example displays a social network graph of eight people connected by friendship links. Nodes are rendered as blue circles with white labels, while directed edges with arrowheads indicate the relationship direction and thickness reflects connection strength. The visualization uses D3 v6’s `forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, with drag interaction via `d3.drag`. Data comes from a local `data.json` file, and the SVG output updates on each simulation tick.

Loading thumbnail…

Cars Tree

This interactive visualization displays a hierarchical tree of car manufacturers and their models, with the data sourced from `data-example.json`. Built with D3 v3 and jQuery, it renders nodes as colored, clickable boxes connected by directional green links, while a tooltip reveals additional text on hover. The tree supports panning and zooming via `d3.behavior.zoom`, and node colors indicate the item type (e.g., green for type1, red for type4). All elements are animated within an SVG container.

Loading thumbnail…

Australia Map

This example presents a choropleth-style map of Australia, with each electoral region filled with a distinct color from `d3.schemeCategory10` and labeled with its name. The code uses `d3.geoMercator` to project the geographical data and `d3.geoPath` to generate SVG paths for each region. State and territory names are positioned using the centroid calculation from `d3.geoPath`. The map is rendered as an SVG, with data loaded from a TopoJSON file and processed using the `topojson.feature` API.

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered with D3.js, using an orange fill for countries and blue for the ocean background. It draws country boundaries from the world-atlas TopoJSON dataset (countries-110m.json), converting the data into SVG paths via the `geoNaturalEarth1` projection and `geoPath` generator. The code also appends a circular outline over the sphere. Topojson’s `feature` API extracts geographies, and D3’s selection methods bind the data to path elements, with styling handled by CSS classes.

Loading thumbnail…

Fork of ICE8 - World Map

This example displays a world map using the Natural Earth projection, rendering countries as yellow polygons with a light blue ocean backdrop. The visualization loads geographic data from the world-atlas package via a URL, then uses D3’s `geoNaturalEarth1` projection and `geoPath` to convert GeoJSON features into SVG paths. It relies on the TopoJSON library’s `feature` function to extract country boundaries, with each country filled and lightly stroked for distinction.

Loading thumbnail…

Fork of 3D Scatter Plot

This example shows flower measurements from a berrylily dataset plotted in three dimensions, with points colored and sized to compare calyx length, calyx width, and curlicue dimensions. The visualization uses Plotly’s `newPlot` API with two traces, one for scatter2d and one for scatter3d, to overlay different views of the same data. Data is loaded via `d3.csv` from a GitHub gist, and the plot is rendered inside a div with minimal layout margins.

Loading thumbnail…

3D Scatter Plot

This interactive 3D scatter plot visualizes the berrylily dataset, mapping sepal measurements such as calyx length and width against two different curl dimensions. The visualization displays two distinct marker types: a 2D representation of curlicue length and a 3D representation of curlicue width, using distinct magenta color schemes and opacity for comparison. Built with Plotly’s JavaScript API (`Plotly.newPlot`), it loads CSV data via `d3.csv` and defines scatter traces with custom marker styling, line colors, and symbol properties within a zero-margin layout.

Loading thumbnail…

Fork of 3D Bar chart

This example shows a 3D multi-series bar chart visualizing monthly sales rates for different fruits. The chart renders colored bars across twelve months (Jan–Dec) for each fruit, with axes and depth perspective created using the d3-x3d library, which bridges D3 to X3DOM for WebGL-based 3D scenes. Data is loaded as CSV and parsed into per-fruit monthly values, then fed into the `d3.x3d.chart.barChartMultiSeries()` component. The code also pulls in d3-3d and d3.v5 for additional D3 utilities, with the visualization embedded in a simple HTML page.

Loading thumbnail…

3D Bar chart

This example displays monthly sales rates for different fruits as colored 3D bars, with one cluster per fruit and twelve bars per cluster representing January through December. The visualization uses the d3-x3d library to bridge D3.js version 5 with X3DOM for WebGL rendering. Data is loaded from a CSV file via `d3.csv`, then parsed into nested objects where each fruit has an array of month-value pairs. The chart is configured using `d3.x3d.chart.barChartMultiSeries`, which automatically generates scalable vector graphics coordinates and 3D geometry, while axes and scales are handled internally by the chart component.

Loading thumbnail…

Fork of Fork of 3D Scatter Plot with Iris Dataset

This example visualizes the classic Iris dataset as an interactive 3D scatter plot, displaying two traces that map sepal and petal measurements against different axes. The plot uses Plotly’s `Plotly.newPlot` function to render scatter3d markers with adjustable size, opacity, and color, while D3’s `d3.csv` loads the dataset from a GitHub gist. The layout removes all margins, focusing attention on the three-dimensional point distribution.

Loading thumbnail…

Fork of Fork of ICE-7 Line Chat

A line chart depicts the monthly cost of a mobile price over time, with the data sourced from a CSV file. The visualization uses D3 v5's `scaleTime` and `scaleLinear` to map dates and costs, `axisBottom` and `axisLeft` for axes, and the `line` generator to draw the path. The SVG rendering includes styled tick marks and axis labels, with dimensions set in the HTML.

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart visualizes the monthly cost of mobile phones over time, using a smooth spline curve and a filled gray region beneath the line to emphasize the trend. The chart is rendered as an SVG within a React application, with data loaded from a remote CSV file. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to construct the visualization, with axis labels and tick formatting customized via `d3.format`.

Loading thumbnail…

Fork of Fork of Fork of ICE7

This animated scatterplot explores measurements of Gladious flowers from a CSV dataset, cycling through four column pairings to reveal how calyx and corolla dimensions relate. Colored circles distinguish between three species—abbreviatus, abyssinicus, and acuminatus—with a static legend and rotating axis labels. The visualization uses D3 v6 with `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the x-axis value. SVG circles are drawn with custom radii and fill colors, while a custom `scatterPlot` function manages the axes.

Loading thumbnail…

Fork of Fork of ICE-7 Pie Chart

A pie chart shows the total library size of films and events for the top eleven countries on Amazon Prime, sorted descending, with a legend listing each country and its value. The visualization uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` with `schemeCategory10` for color encoding, rendering as SVG. Data is loaded from a CSV file hosted on GitHub containing ICE-7 statistics, and the chart displays slices with a fixed outer radius of 150 pixels.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its death count in thousands and accompanied by a color-coded legend listing country names and values. The visualization loads CSV data from a GitHub gist using d3.csv, then uses d3.pie to compute arc angles and d3.arc to render SVG paths. d3.scaleOrdinal assigns colors to slices, while d3.format formats tick labels. The chart is built with D3 v5, rendering entirely in SVG within a static HTML page.

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot- ICE7

This visualization shows an animated scatter plot of iris data, cycling through four different yield measurements on the x-axis while the y-axis remains fixed. Colored circles represent three sites (StPaul, Duluth, and Morris) with distinct colors, and the chart includes a legend, axis labels, and a title. The plot updates every few seconds using `setInterval`, swapping the x-value mapping among the dataset columns. It uses D3 v6 with the `csv` loader, `scaleLinear`, `axisLeft`, `axisBottom`, and custom reusable chart functions from `scatterPlot.js`, rendering SVG elements with animated transitions.

Loading thumbnail…

Fork of Fork of Fork of ICE7

This animated scatterplot explores measurements of Gladious flowers from a CSV dataset, cycling through four column pairings to reveal how calyx and corolla dimensions relate. Colored circles distinguish between three species—abbreviatus, abyssinicus, and acuminatus—with a static legend and rotating axis labels. The visualization uses D3 v6 with `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the x-axis value. SVG circles are drawn with custom radii and fill colors, while a custom `scatterPlot` function manages the axes.

Loading thumbnail…

Fork of Fork of ICE7

This animated scatterplot visualizes measurements of gladiolus flower species, comparing petal dimensions across four feature pairs. The visualization cycles through different x-axis variables—corolla width, calyx width, corolla length, and calyx length—while keeping y-axis fixed to calyx length. Data points are colored by species, with red, blue, and yellow marking three distinct gladiolus varieties. Built with D3 v6, the example uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for axes, `setInterval` for animation, and SVG circles with custom `rx` and `ry` attributes to render elliptical markers. The code appears to fork an existing D3 scatterplot example, adapting it to flower morphology data from a CSV source.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot of the Iris dataset cycles through four different x-axis measurements—petal width, sepal width, petal length, and sepal length—at regular intervals, while the y-axis remains fixed on sepal length. Points are colored by species (orange, blue, and white circles). Built with D3 v6, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` within a reusable `scatterPlot` module, updating axes and rendering via SVG on a black background with a custom legend and title.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, showcasing the relationships between sepal and petal measurements. The visualization cycles through different x-axis variables (petal width, sepal width, petal length, and sepal length) at intervals, animating the data points accordingly. Points are colored by species—orange for setosa, blue for versicolor, and white for virginica—with a legend and axis labels. Built with D3 v6, the code uses `csv` for data loading, `select` for SVG manipulation, and a custom `scatterPlot` module with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for chart rendering.

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart shows the monthly cost of mobile devices over time, using a smooth curved line with a gray filled region beneath it. The visualization loads CSV data and applies D3 v5’s `scaleTime` and `scaleLinear` for the axes, with `line` and `area` generators using `curveBasis` for smoothing. The SVG rendering includes custom axis labels and gridlines, and the data is parsed with `d3.timeParse` before being passed to the chart.

Loading thumbnail…

Fork of ICE-7 Line Chat

This line chart visualizes the cost of mobile devices over time, with months on the x-axis and cost on the y-axis. Built with D3 v5, the SVG graphic uses time and linear scales, along with `axisBottom` and `axisLeft`, to render the axes. The line path is generated via D3's `line` function, and the data is loaded from a CSV file hosted on GitHub. The chart includes grid lines and axis labels, with the line drawn in black.

Loading thumbnail…

Fork of ICE-7 Pie Chart

This static pie chart visualizes the distribution of films and events across the Amazon Prime library by country, showing the total library size for the top 11 countries. The chart uses d3.pie and d3.arc to generate SVG paths, with d3.scaleOrdinal and schemeCategory10 for color encoding. A legend displays each country name and its numeric total value. The data is loaded as CSV from a GitHub gist, and mouseover events log the library size to the console, though no interactive tooltip is rendered.

Loading thumbnail…

Fork of ICE7

This visualization displays a scatterplot of gladiolus flower measurements, with colored circles representing species and axes that cycle through different corolla and calyx dimensions every few seconds. The animation updates the x-axis variable in sequence while keeping the y-axis fixed, and a legend identifies each species by color. The code uses D3 v6 modules like `scatterPlot`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, while `setInterval` drives the periodic axis changes. Data is loaded from a remote CSV file, and the points are rendered as SVG circles with custom radii.

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes mobile phone prices over time, with a smoothed line tracing cost trends and a gray filled region beneath the curve to emphasize magnitude. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axis mapping, `line` and `area` generators with `curveBasis` for interpolation, and `axisBottom`/`axisLeft` for labeled axes. Data is loaded from a remote CSV via `d3.csv`, with dates parsed using `d3.timeParse` and the SVG rendered through a React-based bundle.

Loading thumbnail…

ICE-7 Line Chat

This line chart displays mobile phone prices over time, with months on the x-axis and cost on the y-axis. D3 v5 renders the visualization as an SVG, using `scaleTime` and `scaleLinear` for axes, `line` for the path, and `axisLeft`/`axisBottom` with gridlines. Data is loaded from a CSV via the `csv` method, and month values are parsed with `d3.timeParse`.

Loading thumbnail…

ICE-7 Pie Chart

This pie chart shows the number of films and events in Amazon Prime’s library across different countries, using data from the ICE-7 CSV file. The chart displays the top 11 countries by total library size, with each slice colored via `d3.scaleOrdinal` and `schemeCategory10`. Mouseovers log values to the console. The visualization uses `d3.pie` and `d3.arc` to generate SVG paths, while a custom legend lists country names and values using `d3.select` and `data` joins. The dataset is loaded asynchronously with `d3.csv`.

Loading thumbnail…

ICE7

This interactive scatterplot visualizes the morphological characteristics of gladiolus flowers, with each data point encoded as an ellipse whose fill color represents species (red, blue, or yellow) and whose rx/ry values reflect separate sepal measurements. The visualization cycles through four different measurement axes every few seconds, updating the x-axis scale and redrawing circles in an animated loop. Built with D3 v6, the example uses `d3.csv` to load data from a gist, custom SVG shapes with `attr('rx')` and `attr('ry')` for ellipse dimensions, and `setInterval` to trigger axis rotations. A static legend and rotated axis labels accompany the plot.

Loading thumbnail…

Fork of Pie Chart

This pie chart shows the total number of movies and shows in Netflix’s library for the top 10 countries, with a legend displaying each country’s name and its corresponding count. The visualization uses d3.pie and d3.arc to generate the slices, d3.scaleOrdinal with schemeCategory10 for coloring, and SVG for rendering. Data is loaded via d3.csv from a GitHub gist, sorted descending, and truncated to ten entries before being drawn.

Loading thumbnail…

ICE-7

This animated scatterplot cycles through the four Iris flower measurements on the x-axis while keeping sepal length fixed on the y-axis. Colored circles (orange, blue, and white) represent the three species, with a static legend and title overlaid on a red background. The visualization uses D3 v6 APIs such as `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, and updates the x-axis every few seconds via `setInterval`. Data originates from a GitHub-hosted CSV file of the classic Iris dataset.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This animated scatter plot from D3.js (v6.7.0) visualizes the classic Iris flower dataset, cycling through four numeric attributes (petal width, sepal width, petal length, and sepal length) every two seconds. Each point represents a flower specimen, colored by species: blue for setosa, red for versicolor, and yellow for virginica. The reusable `scatterPlot` module builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG circles with white strokes. The animation employs `setInterval` to reassign the x-axis mapping and redraw the marks, driven by data fetched via `csv` from a GitHub Gist URL.

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using blue, yellow, and red. The SVG circles also encode sepal measurements through their `rx` and `ry` attributes, though these are overridden by the fixed `radius`. Built with React and D3 v6, the code loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders axes using `axisLeft` and `axisBottom`, with labels styled via CSS.

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each species color-coded (blue, yellow, red) and circle size proportional to sepal dimensions. Built with D3 v6 in a React context, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG axes. Data is loaded via `d3.csv` from a GitHub gist, and `selectAll().join()` creates the circles with `r`, `rx`, and `ry` attributes for square-like markers.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width while coloring points by species (setosa, versicolor, virginica). The code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles as SVG elements using `d3.selectAll` and `join`. Axes are created with `d3.axisLeft` and `d3.axisBottom`, with custom red axis labels. The visualization uses a React framework shell but relies on vanilla D3 v6 for rendering directly into the DOM.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This chart displays the monthly cost of Amazon Prime in twelve different countries, using a horizontal bar graph where bar length corresponds to cost. Built with React and D3 v5, it fetches CSV data from a GitHub gist and renders an SVG. The visualization manually constructs scales with `scaleBand` and `scaleLinear`, and draws gridlines, axis ticks, and rectangles using SVG primitives.

Loading thumbnail…

Fork of Fork of ICE-6 Bar Graph

This visualization shows Amazon prices for basic monthly service across different states, using a horizontal bar chart to compare costs. The chart displays twelve states ranked by their cost per month, with bars extending from a shared origin. Built with React and D3 v5, the code uses `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. React state manages the asynchronous data loading, while SVG rectangles render the bars with gridlines and axis labels generated via D3’s tick functions.

Loading thumbnail…

Fork of ICE-6 Bar Graph

This fork of ICE-6 renders an SVG bar chart of Amazon prices in different states, showing the first 12 countries from a CSV dataset loaded via `d3.csv`. It uses React with the `useState` and `useEffect` hooks to fetch and store the data, then maps it to rectangular bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are custom-built using `d3.axisBottom`-style tick generation, though the code manually draws grid lines and labels with SVG elements. The chart is titled “Amazon Prices in different States” and displays loading text until data arrives.

Loading thumbnail…

ICE-6 Bar Graph

This horizontal bar chart compares basic monthly Amazon service prices across twelve countries. The visualization uses React for component management and D3 v5’s `scaleBand`, `scaleLinear`, and `csv` loader to fetch and map the data. SVG rectangles encode each country’s cost, with red gridlines and tick labels generated via D3’s axis utilities. The data originates from a gist CSV containing per-country pricing, loaded asynchronously and sliced to the first twelve entries. The chart updates dynamically once the data is parsed, displaying a clean, minimal layout with a loading state beforehand.

Loading thumbnail…

Fork of React Starter

This example displays the text “Hello React!” as a large, centered message using the React library. The `App` component returns a `<div>` element with a CSS class that sets the font size and text alignment. ReactDOM’s `render` method mounts this component into the `#root` div, while React and ReactDOM are loaded from unpkg CDN resources. The page structure is defined in `index.html`, with the JavaScript logic contained in `index.js`.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that renders a centered message on a web page. It shows how to load D3 from a CDN, use ES6 module imports, and combine local JavaScript modules with the library. The code uses `d3.select` to target the `#message` div and sets its text content to the string exported from a separate local module. The example also includes basic CSS styling to control font size and text alignment, highlighting the integration of multiple file types in a single VizHub project.

Loading thumbnail…

Fork of HTML Starter

This example displays a simple HTML page with the text “Hello HTML!” centered on the screen. The text is styled using CSS with a font size of 13em and a centered alignment. The page uses a bare minimum HTML structure, with no external libraries or JavaScript logic beyond the inline CSS styling. The rendering approach is straightforward, relying on the browser’s native HTML and CSS capabilities to display the static message.

Loading thumbnail…

ICE-6

This example visualizes the monthly cost of business internet plans across 12 countries using a horizontal bar chart rendered as SVG. The chart uses D3’s `scaleBand` and `scaleLinear` for positioning and sizing bars, with React managing state and rendering. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the top 12 rows are selected. Axes are drawn manually with D3 ticks and gridlines, while the bars appear in blue without labels.

Loading thumbnail…

Fork of Fork of Cat smiley

A cat smiley face is drawn as a stylized SVG composition, featuring a yellow circular head, red eyes with black pupils, orange accents, and a black arc-shaped mouth. The visualization is built with React and D3.js v7, using D3’s `arc()` API to generate the curved mouth, eye, and ear paths. The code assembles these geometric shapes—circles, ellipses, lines, and paths—into a single centered group, with explicit stroke and fill attributes defining the color palette. Rendered at 850 by 455 pixels, the static image uses no external data, relying entirely on hardcoded coordinates and parameters.

Loading thumbnail…

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

This example shows the cost of a basic Netflix subscription in twelve countries using horizontal bars, with countries labeled along the vertical axis and cost values on the horizontal axis. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, then creates SVG bar marks with `scaleBand`, `scaleLinear`, and `max` for layout. Axis ticks are rendered manually from `xScale.ticks()` and `yScale.domain()`, while each rectangle’s width encodes the numeric cost channel.

Loading thumbnail…

ICE 5

This example displays a base64-encoded JPEG image embedded within an inline SVG pattern, filling the entire 527×304 pixel canvas. The image is rendered using the `xlink:href` attribute inside an SVG `<image>` element, which is referenced through a `<pattern>` and applied to a `<rect>` via `url(#pattern0)`. The markup is assembled in a React component, with styling for a black background and white text applied via CSS. D3 v5 is loaded from a CDN, though the visualization itself relies solely on static SVG elements rather than dynamic data bindings or interaction.

Loading thumbnail…

Untitled

This example presents a minimal interactive visualization built with React and D3, rendered as a scatterplot. It uses the force simulation from D3 (`d3.forceSimulation`) to position nodes dynamically, with the simulation’s tick event updating the SVG circles via React’s state management. The chart displays a static dataset of points without external files, relying on D3’s `scaleLinear` for axis mapping and `d3.axisBottom` for x-axis ticks. The layout is styled with basic CSS, and the code is structured as a single React component.

Loading thumbnail…

Fork of Cute smiley

This example renders a cartoon smiley face using React and D3.js in an SVG. The face is composed of a yellow circle with black stroke, blue eyes with white and black pupils, red ellipses for cheeks, black ears, and an arc-based red smile. The `d3.arc` API generates the mouth, eye, and ear paths, with transforms positioning each facial feature relative to the center. All styling and layout is hard-coded in JavaScript.

Loading thumbnail…

Cute smiley

A cheerful smiley face rendered with React and D3 v7, drawn entirely with SVG shapes. The face features a yellow circular head, blue eyes with white-outlined pupils, red mouth and nose, plus black eyebrows and ears constructed using D3 arc generators. Positioning and transforms place each facial feature symmetrically around the center. The visualization demonstrates combining React components for structure with D3's arc API for generating the curved shapes, all styled with explicit fill and stroke attributes.

Loading thumbnail…

Fork of Cat smiley

A bright yellow cat smiley face is drawn with SVG shapes, featuring red eyes with white highlights, black pupils, a black crescent mouth, and purple ears. The face is composed using D3.js arc generators, including `d3.arc()` for the mouth, eyes, and ears, alongside basic SVG circles, ellipses, and lines for details. The React application renders the graphic, which is styled with thick black strokes and a yellow fill, creating a playful, cartoonish appearance.

Loading thumbnail…

Fork of Fork of smiley face

This example renders a smiley face in an SVG canvas using React and D3. A large green circle forms the head, with two smaller black circles placed for eyes. A D3 arc path, created with the `arc` API and transformed to the center, draws the mouth as a curved black stroke. The React app uses `ReactDOM.render` to build the static SVG, with dimensions set to 960 by 500 pixels.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This visualization displays a yellow smiley face that adapts to the browser window size, centering itself with eyes and a large circular head. The face is built entirely from SVG circles, with the head radius calculated from the window height and eye positions offset from the center. The code uses React components and ReactDOM to render the SVG elements, calculating dimensions from `window.innerWidth` and `window.innerHeight`. The face includes a yellow filled head with a black stroke, two black eye circles, and no mouth, as the mouth element is commented out in the source.

Loading thumbnail…

Fork of Smiley Face Part II

A React and SVG implementation renders a resizable smiley face that fills the browser window. The code calculates dimensions from `window.innerWidth` and `window.innerHeight`, centering the face via a `<g>` transform, and draws yellow and black circles using React elements. It references static numeric constants for eye placement, mouth radius, and stroke width, though the mouth itself is not drawn in the visible code. React DOM mounts the component to the page, producing the face without any external data or interaction.