Ketha

@tketha·16 public vizzes

ICE-8 World_Map

This example visualizes global geography using a natural Earth projection. The map displays land masses in red, country borders in yellow, graticules in green, and the sphere outline in white. The code loads world-atlas TopoJSON data, converts it to GeoJSON via topojson’s `feature` and `mesh` functions, and renders it with d3’s `geoNaturalEarth1` projection and `geoPath`. React hooks manage the asynchronous data fetching and state, while SVG paths draw the final visualization.

Apr 12, 2023

Loading thumbnail…

ICE 8 - BRAZIL - MAP

A choropleth map of Brazilian municipalities, colored by political party affiliation. The SVG renders geographic boundaries via D3 v7's geo path utilities, with each region storing its party and coordinates in SVG attributes. Hovering a region logs its IBGE code and municipality name to the console by cross-referencing a local ES6 module. The map visualizes election data through a manually configured zoom transform.

Apr 12, 2023

Loading thumbnail…

ICE 8 - Tree idiom

This interactive tree diagram displays a hierarchical structure of Indian states and their cities, using a collapsible D3.js layout. The visualization shows parent-child relationships through a classic node-and-link design, with nodes styled as circular markers and connected by curved paths. Users can click any node to expand or collapse its children, revealing the geographical breakdown. The chart is built with D3.js version 3.5, using `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and animated transitions via `transition().duration()` to smoothly reposition nodes. The SVG rendering scheme positions vertical depth levels at fixed 180-pixel intervals, with static data embedded directly in the source code.

Apr 12, 2023

Loading thumbnail…

ICE-8 Country Map

This interactive map displays European countries as white shapes with grey borders, rendered using an SVG canvas. The visualization employs d3.geoMercator for projection and d3.geoPath to convert GeoJSON features into SVG paths. It fetches geographic data from a remote URL via d3.json, then applies a Mercator projection centered on coordinates [82, 23] to render the map. The example integrates React for the page structure while relying on D3 v5 for geographic data processing and SVG rendering.

Apr 12, 2023

Loading thumbnail…

ICE-8 Social Network Graph

This network graph visualizes the social connections among nine people, loaded from a local `graph.json` file. Node size is fixed, while the thickness of each link reflects the link's weight value. The visualization uses the D3.js v4 library with the force-directed layout from the older `d3.layout.force()` API, applying gravity, distance, and charge to spatially arrange the nodes. Nodes are draggable via `force.drag()`, with SVG circles and text labels for each person's name.

Apr 11, 2023

Loading thumbnail…

Bonus ICE Scatter plot using D3.js

This example renders an interactive 3D scatter plot of AI/ML articles, using D3.js to load and parse a CSV dataset and Plotly to draw the visualization. Two sets of markers, each defined as a `scatter3d` trace, display article tags, names, and upvotes across three axes, with the second trace using grey circles. The code imports D3 v3.5.17 and Plotly 2.12.1 via CDN, and calls `Plotly.newPlot` to render the chart inside a div. The layout margins are zeroed to maximize the plot area.

Apr 4, 2023

Loading thumbnail…

ICE Bonus 3D Scatter Plot

This 3D scatter plot visualizes a cancer dataset, plotting radius, area, and cancer status as three dimensions. Two traces render the same data points with different marker styles, both using gray tones for the circles. The visualization is built with Plotly's `scatter3d` trace type, with data loaded via D3's `d3.csv` function from a GitHub-hosted CSV file. The Plotly `newPlot` function renders the chart inside an HTML div.

Apr 3, 2023

Loading thumbnail…

Bonus ICE - 3D Bar chat

This example presents a 3D bar chart visualizing the number of cancer cases for the first six months of 2022, broken down by cancer type. It uses the `d3-x3d` library to render the chart in X3D, with data loaded from a CSV file. The chart uses `d3.x3d.chart.barChartMultiSeries()` to create a multi-series 3D bar graph, with the x-axis representing cancer types and the z-axis representing months.

Apr 3, 2023

Loading thumbnail…

ICE7.1 Reusable_D3_Scatter_Plot.

This animated scatter plot visualizes Iris flower measurements, cycling through different feature combinations on the x-axis while plotting petal width against sepal length. The visualization uses D3.js v6 with SVG rendering and animation, leveraging scales (scaleLinear), axes (axisLeft, axisBottom), and data loading via d3.csv. Circles are colored by species (red, violet, orange) with a legend, and the plot updates every few seconds to display different variable pairings from the Iris dataset.

Mar 30, 2023

Loading thumbnail…

ICE-7.3 Line_World_stock_marcket

This line chart visualizes world stock market trends over time, plotting yearly values as a smooth, orange curve against a grid of axes. The data is loaded from a CSV file and rendered as an SVG element. Built with D3 v5, the example uses `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for tick marks, with labels for year and stock market value.

Mar 30, 2023

Loading thumbnail…

ICE-7- Pie Chart for Amazon Data

This example visualizes country-wise Amazon costs using a pie chart, displaying the top 10 countries by cost with color-coded slices and a legend listing each country’s cost in dollars. The chart is rendered as SVG using D3 v5, with `d3.pie()` to compute arc angles, `d3.arc()` to generate path segments, and `d3.scaleOrdinal()` with `schemeCategory10` for colors. Data is loaded from a CSV hosted on GitHub Gist and sorted before rendering. Interactive mouseover events log the selected country’s cost to the console.

Mar 29, 2023

Loading thumbnail…

ICE-7.4 Area_World_stock_marcket

This area chart displays the world stock market index over time, with years on the x-axis and market values on the y-axis. The orange-filled curve uses d3.area with curveBasis, while axes and labels are generated with d3.axisLeft and d3.axisBottom. The data comes from a CSV file, rendered as SVG using D3 v5’s scaleTime, scaleLinear, and select APIs.

Mar 29, 2023

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Breast Cancer Wisconsin dataset, showing the relationship between the radius and texture mean of cancer cells. Each point is colored blue or yellow to indicate a malignant or benign diagnosis, with axis labels for both dimensions. The visualization is built using D3 v6 within a React framework, loading CSV data via `d3.csv` and rendering SVG circles with `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom`. It uses JavaScript’s `innerWidth` and `innerHeight` to size the chart responsively.

Mar 22, 2023

Loading thumbnail…

ICE-6 Bar Graph

A horizontal bar chart displays the top 25 countries by 2022 population, sorted by the dataset's original order from a CSV file. The chart uses red gridlines and a linear x-axis scale for population values, with each bar's length proportional to the country's population. Built with React and D3 v5, it loads data via `d3.csv`, renders SVG rectangles, and applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with axis ticks and labels generated manually.

Mar 20, 2023

Loading thumbnail…

This is ICE5

This interactive data visualization presents a colorful, abstract digital landscape composed of layered, gradient-filled polygons. The piece demonstrates the integration of web technologies, with a striking gradient title and a repeating radial pattern in the subtitle. Rendered as an SVG, the main visual is a complex geometric composition built from a base64-encoded image data source, displayed within a fixed viewBox. The example showcases the use of HTML, CSS (including gradient text effects), and JavaScript, with D3.js v5 loaded for potential data manipulation and SVG rendering.

Mar 4, 2023

Loading thumbnail…

ICE4_Viz_Ketha

A generative SVG visualization renders a large field of semi-transparent red polygon-patterned circles across a peachy background. The circles are positioned using nested array maps with random calculations, stacked in a three-level loop. Overlaying this field is a single complex SVG path, drawn from a long string of cubic Bézier curve commands, scaled and translated to showcase intricate vector linework. The composition combines the React-rendered SVG elements with a defined pattern fill, demonstrating layered generative and hand-coded vector graphics.

Feb 28, 2023