Skip to main content
Log in
A

Arv1228

@Arv1228·42 public vizzes

Loading thumbnail…

Untitled

This visualization shows a labeled pie chart breaking down a dataset by category, with each slice filled with a distinct ordinal color and accompanied by its category name. Built with D3 v4, the chart loads CSV data from a GitHub gist and uses the `d3.pie` layout, `d3.arc` for both the slice paths and label positioning, and `d3.scaleOrdinal` for the color palette. The SVG output centers the pie and adds a bold title, with pink stroke outlines on each slice.

Apr 17, 2022
Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message rendered with a 13em font size. It demonstrates a basic HTML page using inline CSS for styling and relies on plain HTML markup without any JavaScript logic. The code includes no external libraries or data sources, focusing solely on static text presentation through the browser’s native rendering. The styling is applied directly within the `<style>` tag in the document’s head.

Apr 17, 2022
Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This choropleth map of the United States displays the seven-day average of positive COVID-19 test cases per state, using a logarithmic color scale from `d3.scaleThreshold` with a `d3.schemeOrRd` color range. State boundaries are drawn with `d3.geoPath` and the `geoAlbersUsa` projection. The visualization includes an interactive Voronoi overlay built with `d3.Delaunay`, which triggers hover states, while a custom `colorLegend` shows the threshold values. User-provided CSV data supplies the values, which are mapped to each state’s fill color.

Apr 17, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths in 2020 caused by air pollution, using data fetched from a CSV file via d3.csv. The chart renders colored slices with percentage labels, while a legend lists each country and its corresponding death count. The visualization uses D3 v5’s pie() and arc() functions to generate the chart geometry, and scaleOrdinal() to assign colors. Labels and legend texts are positioned using arc.centroid() within an SVG canvas.

Apr 17, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This D3.js v5 visualization presents a pie chart of the top 10 countries by deaths from air pollution in 2020, using data fetched from a CSV file hosted on GitHub. The chart displays proportional slices for each country, with a legend listing both country names and their corresponding death counts. The code uses D3’s `pie` and `arc` functions to generate the chart geometry, along with `scaleOrdinal` for color assignment. Sections are labeled via arc centroids, and the SVG rendering includes a legend built with `selectAll`, `append`, and `classed` methods.

Apr 17, 2022
Loading thumbnail…

Network graph ICE 8

This network graph visualizes friendships among eight individuals, with blue links representing connections and link thickness scaled by the weight of each relationship. The graph uses a force-directed layout created with `d3.layout.force` from D3 v4, rendering nodes as yellow circles with red text labels in an SVG container. Node positions update continuously during the force simulation’s tick events, while drag interaction is enabled via `force.drag`. The data comes from a local `data.json` file containing node names, group assignments, and link weights.

Apr 3, 2022
Loading thumbnail…

ICE 8

This example displays a world map with each country rendered as a green SVG path with a red outline. It uses a `d3.geoPath` projection with `geoNaturalEarth1` to generate the map, and fetches country boundaries from the world-atlas dataset. The `topojson` library's `feature` function extracts the geometries from the TopoJSON data, and the resulting paths are appended to the SVG canvas with a fixed blue background.

Apr 3, 2022
Loading thumbnail…

ICE8 - USA Map

This example displays a choropleth-style map of the United States with state boundaries and graticules rendered as SVG paths. The map uses the Albers USA projection via `d3.geoAlbers` and `d3.geoPath`, with `d3.geoGraticule` for the background grid. Data comes from the US Atlas TopoJSON file, processed with `feature` and `mesh` from topojson to create land and interior state borders. React manages the component state and rendering, while CSS styles the land as green and the interior borders as red.

Apr 2, 2022
Loading thumbnail…

Fork of Fork of Tree

A static hierarchical tree diagram is built from a hard-coded dataset of parent-child name pairs. Each node is rendered as a large grey circle with a red outline, labeled with the person's name. The example uses D3 version 6 to construct the tree layout via `d3.stratify` and `d3.tree`, then draws the connecting links as blue paths. The SVG markup is created directly, with animated transitions on the path and circle elements that adjust positions and sizes over a short duration.

Apr 2, 2022
Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

Apr 1, 2022
Loading thumbnail…

Fork of ICE 8: Tree and Network

This visualization displays a hierarchical tree of related names using a static dataset defined inline. It renders nodes as blue-stroked circles and red connecting paths, with text labels appearing sequentially based on each node’s depth. The code uses `d3.stratify()` and `d3.tree()` to compute layout, then draws SVG elements with `d3.select()`. Animations are applied via chained `transition().duration()` calls on paths, circles, and text, creating a staggered reveal effect. The visualization is built with D3 v6 and rendered entirely in an HTML page without external data sources.

Apr 1, 2022
Loading thumbnail…

Fork of Fork of ICE 8: Tree and Network

This visualization displays a hierarchical tree of family relationships using D3’s stratify and tree layout functions, with nodes represented as blue-styled circles and red connecting paths. The SVG animation runs on page load, transitioning link paths from a collapsed state to their full positions, expanding circles with a duration of 800 milliseconds, and revealing text labels sequentially based on node depth using D3 transitions with custom durations. The data is hardcoded as an array of child-parent pairs, with some empty and incomplete entries, and the rendering uses D3 v6 within a React environment, outputting to SVG with generated circles, paths, and text elements.

Apr 1, 2022
Loading thumbnail…

Fork of ICE 7

A donut chart visualizes the top 10 countries by electronic sales, with each slice's label showing the sales value in thousands and a legend listing countries and their corresponding sales figures. The chart uses D3 v5's `pie`, `arc`, and `scaleOrdinal` functions to compute slice geometry and assign a fixed color palette, rendering as SVG with `path` elements. Sales data is fetched as CSV from a GitHub gist and aggregated to calculate the total.

Mar 28, 2022
Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This scatter plot animates through different pairings of Iris flower measurements, cycling every two seconds between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with circles colored by species (setosa, versicolor, or virginica). Data comes from a CSV of the classic Iris dataset, and the transitions are driven by `setInterval` calling the plot function with new x-value accessors.

Mar 28, 2022
Loading thumbnail…

Reusable scatter plot

This reusable scatter plot animates through the Iris Dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping petal length on the y-axis. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub Gist. SVG circles are colored by species, with a legend and axes updated via the `scatterPlot` closure pattern, rendering dynamically to the full browser window.

Mar 28, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays electronic sales in America from 2001 to 2011, using a smooth curve to represent the trend and a red fill beneath the line. The visualization is rendered with SVG via D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.line` with `curveBasis`. Data is loaded from a CSV file and parsed with `d3.csv`, while axis labels and tick formatting are handled by `d3.axisLeft` and `d3.axisBottom`.

Mar 27, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization charts the sales of cars in India from 2009 to 2019, combining a smooth black line and an orange area beneath it to show the trend over time. It uses d3.csv to load the data, d3.line and d3.area with curveBasis to generate the paths, and d3.scaleTime and d3.scaleLinear for the axes. SVG rendering with tick marks and axis labels clarifies the year and sales scales.

Mar 27, 2022
Loading thumbnail…

ICE 7 question 3

A red line chart displays total electronic sales per year from 2001 to 2009. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render the SVG. Data comes from a CSV file loaded via `csv`, with the x-axis formatted using `d3.timeParse`. Gridlines and axis labels for "years" and "totalsales" support readability.

Mar 27, 2022
Loading thumbnail…

Fork of Fork of Line Chart

This line chart visualizes annual U.S. automotive sales from 2005 to 2022, with year on the x-axis and sales volume on the y-axis. The chart is rendered as an SVG using D3 v5, with the `d3.line` generator creating the red path and `d3.scaleTime` and `d3.scaleLinear` mapping the data coordinates. Grid lines and axis labels are added via `d3.axisBottom` and `d3.axisLeft`. The data is loaded from external CSV files using `d3.csv`, with the main dataset fetched from a GitHub gist.

Mar 27, 2022
Loading thumbnail…

Fork of Line Chart

This fork of a line chart displays annual US auto sales from 2005 to 2022 as a single red stroke over a time-series x-axis and linear y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to map year and sales data to SVG path coordinates, with grid lines from tick marks. Data is loaded via `d3.csv` from two Gist URLs, featuring yearly sales by brand and total US automotive sales. The chart includes styled axis labels, a title, and a legend-free line path rendered with SVG elements.

Mar 27, 2022
Loading thumbnail…

ICE 7

This example shows the top 10 countries by electronic sales as a pie chart with a legend. Each slice is labeled with its sales value in thousands, and the legend lists country names alongside corresponding values. The code uses d3.csv to load data from a gist, d3.pie and d3.arc to generate the segments, and d3.scaleOrdinal to map sales amounts to colors. Text labels are positioned via arcGenerator.centroid, and the legend is built with appended rectangles and text elements.

Mar 27, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the top 10 heroes in the Tollywood industry as an interactive SVG pie chart, with each slice labeled with the hero’s movie count and a corresponding legend listing names and values. The chart uses `d3.csv` to load data from a GitHub Gist, `d3.pie` and `d3.arc` to compute and draw the arcs, and `d3.scaleOrdinal` to map movie counts to a custom color array. It also employs `d3.select` and `d3.format` for SVG rendering and axis-tick formatting, respectively.

Mar 27, 2022
Loading thumbnail…

Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart, with a legend listing each brand and its sales value in thousands. The code loads CSV data from a GitHub gist using `d3.csv`, then builds the chart with `d3.pie` and `d3.arc` for segment geometry. A `d3.scaleOrdinal` maps sales values to a custom color palette, and SVG paths and text elements render the chart and legend. The visualization uses D3 v5 and is drawn entirely in SVG.

Mar 27, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its death count in thousands and a corresponding legend listing country names and values. The visualization uses d3.csv to load data from a GitHub gist, then applies d3.pie, d3.arc, and d3.scaleOrdinal with hardcoded colors to generate the SVG paths and text labels. Legends are manually positioned within the SVG using d3 selectors and attribute transforms, while d3.format formats the numeric labels.

Mar 27, 2022
Loading thumbnail…

Fork of Fork of Pie Chart ICE 7

This chart displays the top 10 Tollywood heroes by movie count, with each slice of the donut proportional to the number of films and labeled with a formatted value. A legend on the right pairs each hero's name with a color swatch and the same numeric count. Built with D3 v5, the visualization fetches CSV data from a GitHub Gist and uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate the SVG paths and color mapping, while custom text elements render the labels and legend.

Mar 27, 2022
Loading thumbnail…

Fork of Pie Chart ICE 7

This visualization displays the top 10 heroes in Tollywood and their ages as a pie chart, with each segment labeled by the number of movies (in thousands) and accompanied by a color-coded legend listing hero names. The chart is rendered using d3.pie and d3.arc to generate SVG paths, with d3.scaleOrdinal mapping section colors. Data is loaded asynchronously from a CSV file via d3.csv, and text labels use d3.format to abbreviate values. The layout includes a centered pie and a right-side legend, both built with D3 selections.

Mar 27, 2022
Loading thumbnail…

Pie Chart ICE 7

A pie chart visualizes the top 10 Tollywood heroes and the number of movies they have appeared in, with each slice color-coded and labeled, alongside a legend showing hero names and raw values. The chart uses D3 v5's `pie`, `arc`, and `scaleOrdinal` to generate the SVG sectors and colors, while `d3.csv` fetches the dataset from a GitHub Gist. Text labels are positioned using `arcGenerator.centroid` to place numbers at the slice centers, and the surrounding HTML/CSS styles the page title and typography.

Mar 27, 2022
Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message rendered with a 13em font size. It demonstrates a basic HTML page using inline CSS for styling and relies on plain HTML markup without any JavaScript logic. The code includes no external libraries or data sources, focusing solely on static text presentation through the browser’s native rendering. The styling is applied directly within the `<style>` tag in the document’s head.

Mar 27, 2022
Loading thumbnail…

Fork of Pie Chart

This example displays 2022 US auto sales by brand as a pie chart with a corresponding legend. It loads CSV data from a GitHub gist via the d3.csv method, then processes it using d3.pie and renders SVG paths with d3.arc. A d3.scaleOrdinal maps brand sales to a fixed color palette, while text labels show each brand’s cumulative year-to-date sales in thousands. The visualization uses D3 v5 and SVG, with styling defined in an external stylesheet.

Mar 27, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the top 10 countries by deaths from air pollution in 2020, using a CSV dataset loaded via D3’s `csv` function. The chart encodes each country’s death count as a slice, with proportional arc lengths and per-slice labels showing values in thousands. A legend pairs each country with its corresponding color and numeric value. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute arcs, assign colors, and format tick labels, rendering the result as SVG elements.

Mar 27, 2022
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and petal width for individual flowers while encoding species through color. It renders SVG circles using D3 v6, with scales from `d3.scaleLinear` and axes generated by `d3.axisLeft` and `d3.axisBottom`. The code loads CSV data via `d3.csv`, parses numeric fields, and positions marks based on the dataset’s sepal measurements. Axis labels indicate petal length on the x-axis and sepal length on the y-axis, offering a direct comparison of these floral traits.

Mar 6, 2022
Loading thumbnail…

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

This example displays a bar chart of the top 10 most popular heroes, sourced from a CSV file. It uses React for state management and declarative rendering, while D3 v5 scales and axes generate the visualization. The chart positions bars with `d3.scaleBand` and `d3.scaleLinear`, and renders ticks and labels manually for both axes.

Mar 6, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how a simple VizHub project is structured by rendering the text “Hello VizHub!” in the center of the page. It uses D3 v5’s `select` method to target the `#message` div and set its text, while a local ES6 module exports the message string. The code also shows how to import D3 from UNPKG and include external CSS, serving as a minimal template for understanding module imports and DOM manipulation with D3.

Mar 6, 2022
Loading thumbnail…

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

This visualization displays a horizontal bar chart ranking the top 10 most populous countries in 2019. It uses React for component structure and state management, with D3 v5 libraries for data loading via `d3.csv` and for building the scales (`d3.scaleBand`, `d3.scaleLinear`) and axes. The chart is rendered as an SVG, with each bar’s length encoding population size and the country labels positioned along the y-axis. The data is sourced from a Gist-hosted CSV file containing the 2019 population estimates.

Mar 6, 2022
Loading thumbnail…

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

This bar chart displays the top 10 most populated countries in 2019, with country names on the y-axis and population values on the x-axis. The visualization uses React hooks (`useState`, `useEffect`) to load data from a CSV file via `d3.csv`, then renders SVG marks directly through React components. Scaling is handled with `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the quantitative axis, while grid lines and tick labels are generated manually using `xScale.ticks()`.

Mar 6, 2022
Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. It renders the visualization as SVG elements, with bars encoded by population size. The code uses `csv` to load data from a GitHub gist, `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` to compute the domain.

Mar 6, 2022
Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 most populous countries in 2019. The chart renders SVG rectangles scaled by population using D3’s `scaleLinear` and `scaleBand`. It loads CSV data via `d3.csv`, uses React hooks (`useState`, `useEffect`) to manage state, and manually draws axes and gridlines with D3’s `scaleLinear.ticks` and React JSX, without relying on `d3.axisLeft` or `d3.axisBottom`.

Mar 5, 2022
Loading thumbnail…

Fork of Smiley Face Part I

A yellow circle with a blue outline and two black eyes forms half of a smiley face inside an SVG. A curved mouth arc, drawn as a path, completes the lower portion of the face. The visualization uses React for rendering the SVG elements and D3's `arc` generator to compute the mouth path, with an inner and outer radius and start/end angles. The remaining shapes are simple SVG circles positioned with fixed offsets, all centered within a 960 by 500 viewport.

Mar 1, 2022
Loading thumbnail…

ICE 5.js

This example demonstrates how to fetch and load remote tabular data using D3.js within a React-generated HTML page. The visualization showcases uploaded SVG artwork — a detailed illustration with various geometric shapes and curves — while a `<pre>` element displays metadata about the loaded Pokémon dataset, including its size in kilobytes, row count, and column count. The code uses `d3.csv()` to asynchronously retrieve the CSV file from a GitHub gist and `d3.csvFormat()` to calculate the data's string length. The page styling is handled with standard CSS, and the D3 v7 library is loaded via a CDN.

Feb 27, 2022
Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js in a React framework, displaying the data’s size, row count, and column count in a styled pre element. It also renders a static SVG image of a city alongside the text output. The code uses the `d3.csv` method to fetch a remote CSV file from a GitHub gist and the `d3.csvFormat` function to compute the data’s size in kilobytes. The visualization is rendered with SVG and styled using embedded CSS within the HTML page.

Feb 27, 2022
Loading thumbnail…

Fork of Smiley Face Part I

This example shows a simple smiley face rendered in a browser using React and D3.js. The face consists of a yellow circle with a blue stroke, two black eyes, and a mouth drawn as an arc. The code uses D3’s `arc` generator to create the mouth path, while React manages the SVG elements for the face, eyes, and stroke. The SVG canvas is 960 by 500 pixels. The visualization demonstrates basic geometric shapes and D3’s arc API within a React component.

Feb 21, 2022
Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example displays a yellow emoji-like face with two eyes and a curved mouth, rendered as SVG in a React component. The face is constructed using D3’s `arc` generator to create the mouth path, while circles define the face and eyes. Positioning relies on a central `<g>` transform, with D3 and React loaded via UMD scripts from unpkg. The code demonstrates clean refactoring by extracting constants for dimensions and offsets, and shows how to embed D3 shapes within React’s JSX syntax.

Feb 21, 2022