T

Tejamod

@Tejamod·23 public vizzes

Loading thumbnail…

Tree Example

This example shows a collapsible tree diagram of popular video games, organized by genre such as Battle Royale, Competitive, and Open World. The visualization uses d3.layout.tree and d3.svg.diagonal to render nodes and links as SVG elements with animated transitions. Clicking a node collapses or expands its children, with transitions handled by d3’s selection.transition. The styling uses custom CSS classes for node circles, text, and gold-colored links, with a fixed-depth layout spacing nodes horizontally by 180 pixels per level.

Loading thumbnail…

ICE 8 Network

This example displays a small social network graph of named individuals, with orange circular nodes connected by red links whose thickness indicates a weight value between connections. The visualization is built with React and rendered as SVG using D3.js version 4, specifically employing the `d3.layout.force` API to simulate the layout physics, including gravity, distance, and charge parameters. Node positions update continuously during the force simulation’s tick events, while labels and drag interactions are handled through the standard D3 selection and `force.drag` methods.

Loading thumbnail…

Japan Map

This choropleth map of Japan displays its administrative regions in warm red-orange fills against a white background. The visualization uses `d3.geoMercator` for projection, `d3.geoPath` to render geographic features, and `topojson.feature` to convert TopoJSON data. It supports zooming through the D3 zoom behavior, with pan and scale applied to a grouped SVG element. The map is built with React and rendered as SVG, using data loaded from a GitHub Gist.

Loading thumbnail…

World Map

This visualization displays a world map using an equirectangular projection, rendering countries and the globe’s sphere outline in distinct colors against a warm background. It loads geographical data from the world-atlas TopoJSON source, then uses d3.geoPath and d3.geoEquirectangular to generate SVG paths for each country. The code leverages topojson’s `feature` method to parse the dataset, and D3’s `select` and `json` handle DOM selection and asynchronous data fetching within a React framework.

Loading thumbnail…

ICE game Tree

This visualization displays a tree diagram of popular video games, organized top-down into genres like Shooter, BR, Competitive, and Open World, with specific game titles as leaves. The code uses D3 v6’s `d3.stratify()` to convert the flat data into a hierarchy, `d3.tree()` to compute layout coordinates, and SVG circles, paths, and text for rendering. Links animate via a two-step `transition()` on path `d` attributes, while node fill colors shift by generation depth using a custom `setGeneration()` function.

Loading thumbnail…

Bonus ice scatter

This 3D scatter plot visualizes video game sales data, showing Global Sales on the x-axis, Year on the y-axis, and Regional Sales on the z-axis. Two traces distinguish North American and European sales as separate scatter point sets. The visualization uses Plotly’s `scatter3d` type within `Plotly.newPlot`, with data loaded via D3’s `d3.csv` from a GitHub-hosted CSV file. Axis titles and fonts are configured through the layout’s scene object, and marker styling includes adjustable sizes, colors, and opacity levels.

Loading thumbnail…

BONUS ice 3d bar

This example visualizes video game sales data as a 3D bar chart, comparing regional and global sales across ten titles. It uses the d3-x3d library to bridge D3.js with X3DOM, rendering multi-series bars in a WebGL scene. The code loads CSV data via d3.csv, parses it into per-game sales categories, and binds it to a d3.x3d.chart.barChartMultiSeries component. The d3-3d plugin and D3 v5 scales handle the chart’s 3D layout, while the X3DOM runtime displays the interactive, rotatable scene in the browser.

Loading thumbnail…

Bonus ice interactive bar

This interactive bar chart displays global video game sales across seven titles, broken down by region (North America, Europe, Japan, Global, and Other) using a three-dimensional column layout. Built with Highcharts and its highcharts-3d module, the visualization stacks regional sales values for each game, with axis labels for game names, sales in millions, and region categories. The chart initializes via jQuery, loading data directly from hardcoded arrays in the HTML file.

Loading thumbnail…

bar chart from bonus ice

An interactive bar chart displays global sales figures for ten video games and programming languages, with hover highlighting that reveals the percentage difference between the selected bar and all others. Built with React and D3 v5, the visualization uses SVG rendering and transitions to animate bar opacity and width changes on mouse events. D3 scales (`scaleBand`, `scaleLinear`) drive the axes, while grid lines and axis generators (`d3.axisLeft`, `d3.axisBottom`) structure the layout. A dashed horizontal line and divergence labels appear on hover, with data sourced from a hardcoded sample array containing names, sales values, and colors.

Loading thumbnail…

Untitled

Interactive 3D bar charts made of cuboids render in SVG, with height mapped to randomly generated negative values. Users rotate the entire scene by dragging, which triggers recalculation of all cube faces and the sorting of drawn elements for correct depth perception. The visualization uses D3 v4 with the d3-3d plugin for 3D projection and perspective, updating positions and labels with D3 transitions. An update button randomly regenerates the dataset, animating the new bar heights over one second.

Loading thumbnail…

ice 7 pie

This pie chart visualizes the top 10 best-selling video games globally, with sales figures in millions. Each slice is sized proportionally to the game’s total sales, and the chart uses an SVG rendering with D3 v4’s `d3.arc` and `d3.pie` APIs to generate the paths. Hovering over a slice highlights it while dimming the others, and a tooltip appears showing the game name and its exact sales value. The color scheme is applied via `d3.scaleOrdinal` with the `d3.schemeCategory20` palette. The data is hardcoded in the script as an array of name-value pairs.

Loading thumbnail…

ice 7 line

This line chart visualizes global video game sales from 2003 to 2014, plotting annual total sales in millions against the year. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with axes generated by d3.axisBottom and d3.axisLeft. A d3.line generator draws the path, colored blue, over the SVG canvas. Data is loaded asynchronously via d3.csv from a public GitHub Gist, with parsed numerical sales and date objects.

Loading thumbnail…

ice 7 scatter

The visualization plots video game sales data from a CSV file, showing the relationship between sales figures and release year as animated scatter points. It cycles through different sales metrics—Global, NA, and EU—every two seconds using `setInterval`, updating the x-axis mapping via `scatterPlot()` from D3.js. The chart uses `scaleLinear` and `extent` for scales, with `axisLeft` and `axisBottom` for axes, rendered in SVG. Animated transitions between metrics reveal shifting sales distributions over time.

Loading thumbnail…

ice 7 Pie Chart

This example presents a pie chart of global video game sales, visualizing the market share of ten games as percentages of total sales. The chart uses SVG rendering with D3.js v5, fetching data from a CSV file via the `csv` function. It leverages `d3.pie` and `d3.arc` to generate segments, `scaleOrdinal` for color mapping, and custom text labels for percentages. A legend, added manually, lists game names alongside their sales figures in millions, with all values formatted using `d3.format`.

Loading thumbnail…

ice 7 scatter

This scatter plot visualizes global video game sales across years, with each circle representing a game and colored by genre. Hovering over a point reveals the game’s name via a tooltip. Built with Vega-Lite’s API (vl.markCircle), it encodes year and global sales on the x- and y-axes. The code uses vega-tooltip for interactivity, d3.csv to load the game sales dataset, and custom styling from a config file to adjust font sizes and axis colors.

Loading thumbnail…

ICE 7 Area

This area chart shows global video game sales from 2003 to 2014, with the y-axis measuring sales in millions and the x-axis tracking years. The visualization uses D3 v5’s `line` and `area` generators with `curveBasis` to create a smooth line above a turquoise filled region, while axes are drawn with `axisBottom` and `axisLeft`. Data is loaded from a CSV file containing yearly sales figures, and a custom `scaleTime` converts year values into positions along the timeline.

Loading thumbnail…

Untitled

This example visualizes PlayStation 4 game sales with a pie chart, ranking titles like Grand Theft Auto V and Call of Duty: Black Ops 3 by global sales figures. It uses the Google Charts loader to load the corechart package and constructs the data table via `google.visualization.arrayToDataTable`. The chart is rendered into a fixed-size div using `google.visualization.PieChart`. The data appears as a static inline array, with each slice sized proportionally to the sales value listed.

Loading thumbnail…

ice 7

This example visualizes video game sales data from a CSV file, showing a scatter plot where each circle represents a game’s release year against its platform. The visualization cycles through different dimensions—marks, year, and global sales—every five seconds, updating the x-axis mapping dynamically. Built with D3.js, it uses `scaleLinear` for axes and `axisLeft`/`axisBottom` for rendering. The reusable `scatterPlot` module follows the Towards Reusable Charts pattern, with SVG circles for marks and animated transitions driven by `setInterval`.

Loading thumbnail…

ice 6

This horizontal bar chart displays the global sales of the top 11 video games, using orange bars to compare their performance. The visualization is built with React and D3 v5, leveraging `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG for rendering. Data is loaded asynchronously from a CSV file via `d3.csv`, with sales values parsed and then filtered to the first 11 entries. Tick marks and labels are manually generated from the scales, while axis lines are omitted for a cleaner design.

Loading thumbnail…

ice 6 scatter

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (gold for setosa, purple for virginica, skyblue for versicolor). The SVG rendering uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to set scales and axes, while circles are positioned with `cx` and `cy` attributes. The code assigns non-standard `rx` and `ry` attributes to each circle based on sepal dimensions, though these do not affect the circle’s display radius. Data loads via `d3.csv` from a remote CSV, with axis labels styled in large fonts.

Loading thumbnail…

ICE 5 Teja

This visualization reports basic statistics about a video game sales dataset. It displays a header, a link to the raw CSV file, and a message box showing the dataset's size in kilobytes, row count, and column count, all computed using the `d3.csv` and `d3.csvFormat` APIs. The page also embeds a static SVG image of a game console. The layout uses D3 v7 for data fetching and formatting, rendering the summary text into a styled `<pre>` element.

Loading thumbnail…

ICE 5 Teja

This gallery example displays summary statistics for a CSV file containing video game sales data, presenting the file size in kilobytes, row count, and column count. The visualization uses a simple HTML layout with styled heading and preformatted text elements, alongside an embedded SVG image from a GitHub gist. The code loads the remote CSV using the `d3.csv` method and computes the text summary using `Math.round` and the `d3.csvFormat` function, with the D3.js v7 library imported from a CDN.

Loading thumbnail…

._.

This piece depicts a cheerful, cartoonish face formed from basic geometric shapes, with a large yellow circle for the head, small black eyes, a smiling arc for a mouth, and golden lines suggesting hair or eyebrows. Built using React and SVG, it leverages D3's `d3.arc` to generate the curved mouth and the eyelids, which are positioned using transform rotations and translations. The central design is achieved by grouping all elements and translating them to the canvas center, with CSS removing page margins for a clean presentation.