Skip to main content
Log in
A

amiralitah

@amiralitah·36 public vizzes

Loading thumbnail…

Untitled

This interactive map of Italy visualizes random numeric values assigned to each province, rendered using the Highcharts mapChart API. The map loads topology from a Highcharts GeoJSON source via a URL fetch, and the data is joined to the map using the `hc-key` property. Users can navigate the map with built-in map navigation controls, and each province displays its name as a label, with hover states highlighted in green.

Jul 9, 2022
Loading thumbnail…

Fork of Fork of ICE 8 Making Maps

This example displays a world map with each country rendered as a green SVG path with white borders. It uses d3.json to load TopoJSON data from a GitHub gist, then extracts country features with the topojson feature function. The map projection and path generation are handled by d3.geoNaturalEarth1 and d3.geoPath, which project the geographic coordinates onto a 960×500 SVG canvas.

Jul 9, 2022
Loading thumbnail…

Fork of ICE 8 Making Maps

This example renders a world map using D3 v5 and TopoJSON, displaying country boundaries as green SVG paths with white strokes. It fetches geographic data from a GitHub-hosted `countries-110m.json` file, then uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the shapes. All countries are appended to an SVG canvas as `path` elements with a class of `country`, styled through CSS. The map fills a 960×500 viewport and demonstrates basic choropleth-free cartographic visualization.

Jul 9, 2022
Loading thumbnail…

ICE-8 Tree and Networks

This example shows an interactive tree diagram mapping notable Wimbledon players, with each leaf node labeled by the number of championships won. The visualization uses D3.js version 3.5’s `d3.layout.tree` to compute hierarchical positions and `d3.svg.diagonal` for curved links. Nodes are rendered as SVG circles with text labels, and clicking a node triggers a 900-millisecond transition, collapsing or expanding its children. The page is built with a plain HTML file and embedded JavaScript, styled with simple CSS rules.

Jul 9, 2022
Loading thumbnail…

Tree Example

This example shows an interactive tree diagram of tennis players, ranking a "Best Wimbledon Player" root node with nested children like Rafael Nadal, Roger Federer, and Andy Murray. Clicking a node toggles its children, collapsing or expanding the subtree with a 750ms transition. The visualization uses the D3.js v3 `d3.layout.tree` for hierarchical layout and `d3.svg.diagonal` for curved link paths, rendered as SVG with CSS styling for node circles and links. Node positions update smoothly via `transition` calls that animate both entering and exiting elements.

Jul 9, 2022
Loading thumbnail…

Fork of ICE 8

This example shows a basic world map with all countries rendered as green SVG paths with white borders on a light blue background. It loads GeoJSON country boundaries from a remote TopoJSON file and projects them using the Natural Earth projection. The code uses D3 v5’s `geoPath` and `geoNaturalEarth1` alongside the TopoJSON `feature` API to convert TopoJSON topology into GeoJSON features. Country paths are appended to the SVG via a data join, with no interactivity or additional styling beyond the static filled shapes.

Jul 9, 2022
Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered in SVG, with each state filled by a categorical color scale. It loads TopoJSON data from a GitHub gist and projects the geometry using `d3.geoMercator` with a custom translation and scale. The visualization leverages `d3.json` for fetching, `topojson.feature` for conversion, and `d3.geoPath` to generate paths. Hovering over a state turns it orange via CSS, while the map is titled "India Map" using a simple text element.

Jul 9, 2022
Loading thumbnail…

Fork of ICE 8 country map

This map visualization renders global country boundaries using a Mercator projection, with each country filled by a categorical color scheme. Built with React and D3 v5, the code loads TopoJSON data from a GitHub gist, processes it using the `topojson` feature API, and draws paths via `d3.geoPath` with a `geoMercator` projection. The SVG output responds to hover events by turning countries green, while a title shows each country’s interpolated value. The visualization includes a heading and uses the `d3.schemeCategory10` palette for initial coloring.

Jul 9, 2022
Loading thumbnail…

Fork of Fork of ICE 8 - Country Map

This example displays a static map of the United States using state boundaries rendered as green SVG paths on a light blue background. The code employs D3 v4 with `d3.geoPath` and `d3.geoAlbersUsa` for projection, and reads TopoJSON data from the us-atlas package via `topojson.feature`. State shapes are drawn with stroke styling, and the map is centered using a manual translation offset within an SVG container.

Jul 8, 2022
Loading thumbnail…

Fork of ICE 8 - Country Map

This example displays a map of the United States with individual states rendered as green filled paths on a light blue background. It uses D3 v4 with the `d3.geoPath` and `d3.geoAlbersUsa` projection to convert TopoJSON data from the us-atlas package into SVG paths. The code loads state boundaries from a CDN, applies them via `topojson.feature`, and styles each state with a stroke and fill.

Jul 8, 2022
Loading thumbnail…

Untitled

This example displays a choropleth map of Australian states using the D3plus framework, with each state colored according to a categorical color scale based on its indexed value. The visualization loads geographic boundaries from a TopoJSON file and renders them as SVG paths, with state names positioned at each region's centroid. The code leverages the D3.js projection and path generation APIs through D3plus's geo_map type, combining data-driven styling with interactive tooltips.

Jul 7, 2022
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, with each state filled by a color from the d3 schemeCategory10 scale and labeled with its name. It uses d3.geoMercator and d3.geoPath to project and render the TopoJSON data loaded from a GitHub repository, adding interactivity through SVG title elements. The map includes an adjustment that shifts the data array and custom projection settings to frame the country appropriately.

Jul 7, 2022
Loading thumbnail…

Fork of Fork of Fork of 3D Scatter Plot with Breast Cancer

This visualization displays two scatter plots of breast cancer dataset features, including radius, texture, perimeter, and area measurements. The visualization combines a 2D scatter plot and a 3D scatter plot, both rendered using the Plotly.js library with data loaded via D3.js’s CSV parsing. The plots use marker styling with custom colors, symbol shapes, and opacity settings to distinguish between the two display modes. The 3D scatter plot explores relationships between radius, texture, and area features, while the 2D plot compares radius and texture with perimeter measurements.

Jul 7, 2022
Loading thumbnail…

Fork of Fork of Bonus ICE

This example presents a 3D bar chart of the top nine most valuable companies in the world, comparing their net worth in billions of U.S. dollars. It uses the Highcharts library with the highcharts-3d module to render the columns with depth, alpha, and beta rotation settings. The chart plots a series for United States companies with values like Apple and Microsoft, and a separate series for Saudi Arabian Aramco, using stacked columns with grouping disabled. The data and categories are defined directly in the Highcharts configuration object.

Jul 7, 2022
Loading thumbnail…

Fork of Fork of 3D Scatter Plot with Iris Dataset

A 3D scatter plot of the Iris dataset displays flower measurements across three axes, with sepal length, sepal width, and petal length in one trace, and petal width replacing the vertical axis in a second trace. The interactive visualization uses Plotly.js with a `scatter3d` and `scatter2d` type, loading data from a CSV via D3.js `d3.csv`. Markers vary in size, opacity, and color, with the layout margins set to zero for a clean presentation.

Jul 7, 2022
Loading thumbnail…

Bonus ICE

This example shows three groups of five values as 3D bars, comparing their heights across categories. The chart uses the ZingChart library, specifically the `bar3d` type with a configured `3d-aspect` setting for depth. Data is hardcoded into three series arrays, and the chart renders into a div with ID `myChart` via the `zingchart.render` method, set to a height of 400 pixels and full width. The page relies on plain HTML, CSS, and JavaScript without a framework or external data source.

Jul 6, 2022
Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes mortality rates across ten countries, with each slice's arc length proportional to the death count from a CSV file. The chart displays country labels and uses a categorical color scale from `d3-scale-chromatic`. On hover, a tooltip appears showing the percentage of total deaths, calculated from the data. The visualization is built with D3.js using `select`, `pie`, `arc`, and `sum` from the D3 module, rendering as an SVG with custom styling for hover effects.

Jul 2, 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 abbreviated death counts and accompanied by a color-coded legend. The data is loaded from a CSV file hosted on GitHub using `d3.csv`, then processed with `d3.pie` and rendered as SVG paths using `d3.arc`. Slices are colored via `d3.scaleOrdinal`, and labels are positioned using the arc generator’s `centroid` method. The legend displays each country with its corresponding death value, formatted using `d3.format`.

Jul 2, 2022
Loading thumbnail…

Fork of ICE-7 Line chart

This line chart displays daily temperatures in New York for October 2021, with time on the x-axis and temperature in degrees Fahrenheit on the y-axis. A single smooth line traces the temperature readings, which are parsed from inline tab-separated data using `d3.tsv.parse` and `d3.time.format`. The visualization uses D3 v3 scales and axes to map dates and values, with a legend and hover interaction that appears to track the mouse position over the line. The SVG rendering includes an axis label and a styled line path.

Jul 2, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot, built with D3.js, visualizes breast cancer tumor data from a CSV file, cycling through different feature pairs on the x-axis. It shows the relationship between various cell measurements, with data points colored by cancer stage (orange for stage one, blue for stage two, black for stage three). The visualization uses an SVG with a custom `scatterPlot` function and a `setInterval` animation to swap the x-axis variable, while a legend and axis labels clarify the mapping.

Jul 2, 2022
Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of the ICE 7 Line Chart visualizes car sales in Texas from September 2010 to 2020, with a focus on yearly sales trends. The chart renders an SVG line plot using d3.v5, with d3.scaleTime and d3.scaleLinear mapping the parsed date and numeric sales CSV data. d3.axisBottom and d3.axisLeft generate the axes, while d3.line constructs the path, which is styled with a custom stroke. The data is loaded asynchronously from a GitHub gist using d3.csv.

Jul 2, 2022
Loading thumbnail…

Multi Line Chart

A multi-line chart displays up to ten time series from CSV data, with each series rendered as a separate SVG path and color-coded via CSS classes. Built with React and D3 v5, the visualization uses `d3.csv`, `d3.timeParse`, `d3.scaleTime`, and `d3.line` to map dates to x-coordinates and measurements to y-coordinates. Axis ticks are formatted with `d3.timeFormat` and labeled with the y-axis title "Frequency." Series labels appear at the right end of each line, and the chart is fully responsive via a `viewBox` attribute.

Jul 2, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This chart visualizes car sales in Texas from 2010 to 2020, combining a smooth line for the trend and a filled area beneath it to emphasize volume. The data is loaded from a CSV file and parsed with d3.timeParse. Using d3.scaleTime and d3.scaleLinear, the code generates axes with d3.axisBottom and d3.axisLeft, while d3.line and d3.area with curveBasis produce the curved paths. The SVG rendering includes a styled area fill and a thick purple line, with gold tick labels and a bold axis label.

Jul 2, 2022
Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart visualizes mortality rates across Asian countries in 2020. The SVG rendering uses d3.csv for data loading, with d3.scaleTime and d3.scaleLinear mapping dates and country counts. D3’s line and area generators with curveBasis create the smoothed orange-filled path, while custom axes and tick formatting display the parsed time series data.

Jul 2, 2022
Loading thumbnail…

Fork of Pie Chart

This visualization displays mortality rates across countries in the United States using a pie chart, with colored segments and a legend showing each country’s death count. The chart is built with D3 v5, using the `pie` and `arc` generators to create the segments, and `scaleOrdinal` to map colors to data categories. It loads CSV data from a remote URL, processes the values, and renders the pie and legend as SVG elements, with text labels positioned via `arcGenerator.centroid`.

Jul 2, 2022
Loading thumbnail…

Untitled

This example shows the mortality rates of several Asian countries and regions in a pie chart titled “Mortality in Asia,” with each slice labeled by its numeric death rate. The chart is rendered using Google Charts’ corechart package, loaded via the `google.charts.load` API, with data passed through `google.visualization.arrayToDataTable`. The code creates a `PieChart` and draws it into a fixed-size `<div>` element using React, though the visualization itself is a static HTML/JavaScript page.

Jul 2, 2022
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays 2022 US auto sales by brand, sourced from a gist-hosted CSV file, with each brand's market share represented as a colored slice. The chart uses D3 v5 APIs `d3.select`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths, while a hand-built legend shows the brand name, its percentage of total sales, and sales value in thousands. The accompanying D3 code loads the CSV via `d3.csv` and computes totals to format the percentage and value labels.

Jul 1, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Breast Cancer dataset, with points transitioning every two seconds between four numeric attributes: area, texture, perimeter, and radius standard error. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined to data and updated via a `setInterval` callback that swaps the x-value accessor. The reusable chart pattern, defined in `scatterPlot.js`, accepts configurable width, height, margins, and radius, with animations handled through D3’s data join.

Jul 1, 2022
Loading thumbnail…

Untitled

This example shows a real-time interactive visualization of network activity, with nodes and links that respond to user clicks and drags. The code uses D3’s `forceSimulation` and `forceLink` to compute physics-based layouts, while CSS and raw JavaScript handle rendering and event handling directly in the HTML. Data is generated procedurally as random nodes and edges, illustrating a basic node-link diagram without external datasets. The page also references a separate React starter template, but the core behavior here relies on plain DOM manipulation and D3’s force layout.

Jun 30, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot animates through different x-axis variables from the Iris Dataset, cycling between petal width, sepal width, petal length, and sepal length every two seconds via `setInterval`. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `selectAll('circle').data(marks).join('circle')` updates the SVG circles. The reusable chart pattern from Bostock’s "Towards Reusable Charts" is implemented through getter-setter functions in `scatterPlot.js`.

Jun 29, 2022
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most valuable companies, with market values in billions and a green axis label and title. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes. The chart is drawn as SVG rectangles, with the y-axis line and ticks removed, and the x-axis tick format converts values from gigabytes to billions. A React starter is also referenced in the README, though the main implementation relies on plain D3 v5.

Jun 26, 2022
Loading thumbnail…

Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x and y axes while coloring each circle by species (setosa, versicolor, or virginica). It uses D3 v6 with scales (d3.scaleLinear), axes (d3.axisBottom, d3.axisLeft), and data loading via d3.csv. The React and SVG rendering are not explicitly used; instead, the code appends circles directly to an SVG element in the DOM. The dataset is fetched from a GitHub gist and parsed to numeric values before plotting.

Jun 26, 2022
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. Built with React and rendered as an SVG, it uses D3.js functions like `scaleLinear`, `extent`, and `format` to construct the axes and scale the data. The chart includes styled tick marks, axis labels, and circular data points, with tooltips that display the formatted x-axis value on hover. Styling is applied via CSS with the Poppins font, and the data is loaded asynchronously from a CSV file using D3's `csv` method.

Jun 26, 2022
Loading thumbnail…

Fork of HTML Starter

This example renders a full-page message reading “Hello HTML!” in large, center-aligned text. The page is built with a minimal HTML document that uses embedded CSS to set the font size and alignment of the message div, while JavaScript is absent from the visible behavior. The code relies solely on native HTML and CSS styling, with no external libraries or data sources. The design demonstrates a bare-bones layout approach common to starter templates, serving as a simple foundation for web-based visualizations.

Jun 26, 2022
Loading thumbnail…

ICE_5 CSCE Data Visualization 5320 _ Ali Tahririan

This gallery example presents a static, embedded SVG illustration of a home cinema scene. The artwork is rendered directly within the HTML file, using an inline SVG tag that contains numerous `path`, `circle`, and `polygon` elements to draw the room, screen, seating, and decorative figures. The visualization is complemented by a dynamically animated background defined in CSS, which creates a slow color gradient shift using `@keyframes` and `background-position` properties. The code incorporates a link to a GitHub page for additional context, but no data sources are processed or displayed.

Jun 23, 2022
Loading thumbnail…

Introduction to VizHub and Making a Face with D3.js

This example shows a cartoon face built with D3.js v7 and React, rendered as SVG in a 900×500 viewport. It uses D3’s `arc()` generator to create the mouth and a mustache shape, while circles form the head, eyes, and colored cheeks with explicit coordinates and radii. The code loads React 17 and D3 from CDNs, defines the face as a React component, and mounts it via `ReactDOM.render`. The styling includes a light green stroke for the head and varied fill colors for facial features.

Jun 18, 2022