P

Platoch

@Platoch·23 public vizzes

Loading thumbnail…

ICE 8: My Network

A network diagram shows the social connections of a user named Platini, with a central node linking to six contacts and two additional links between those contacts. The graph uses a force-directed simulation to position the nodes, which are rendered as gold circles with text labels. Implemented with D3 v6, the code employs `select`, `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to run the physics and update SVG circle, text, and line elements on each tick. Data is defined programmatically in JavaScript using node and link arrays.

Loading thumbnail…

ICE 8: Family Tree

This visualization displays a family tree as a vertical dendrogram, using a JSON hierarchy rooted at "Paul" with color-coded nodes—black for the root, red for his children, and blue for grandchildren. Built with D3 v5, the code applies the `tree` layout and `hierarchy` function to position nodes, while `linkVertical` generates the connecting paths. Node labels are rendered as SVG text elements, with styling controlled by external CSS, and the entire graphic scales to the full browser viewport.

Loading thumbnail…

ICE 8: World Map

This example visualizes a world map using a Natural Earth projection, displaying country boundaries, graticule lines, and a blue sphere outline. It uses React with hooks to fetch TopoJSON data from the world-atlas package, then leverages `d3.geoNaturalEarth1` and `d3.geoPath` to project and render geographic features as SVG paths. The code separates land shapes, interior country borders, and graticules into distinct visual layers, with countries filled in teal and boundaries drawn in dark green.

Loading thumbnail…

ICE 8: World Map

This world map visualizes country boundaries and landmasses using data from the World Atlas TopoJSON, rendered with a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output includes graticules drawn with `d3.geoGraticule` and interior borders styled as a mesh using `topojson.mesh`, all layered in a React component. The map emphasizes clean visual styling with distinct fills for land, ocean, and graticule lines, assembled from the `countries-50m.json` dataset.

Loading thumbnail…

ICE8: Bangladesh Administrative Informations

This interactive map displays administrative data for Bangladesh, showing each of the seven major divisions. Hovering over a district reveals a tooltip with its name, population, area, and population density. The map is rendered as an SVG using D3.js (v5) with a Mercator projection, and path data is generated from TopoJSON using the `topojson` library’s `feature` function and D3’s `geoPath`. The visualization supports zoom and drag interactions via D3’s `zoom` and `event` APIs, and it shades district boundaries with a subtle green fill.

Loading thumbnail…

Platoch World Map

A static world map displays country boundaries and graticules using a natural Earth projection, styled with teal landmasses and gray interior borders against a light sphere. The visualization loads TopoJSON world-atlas data and converts it to GeoJSON features via the `topojson` library’s `feature` and `mesh` functions. React renders SVG paths generated with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code also includes a video embed and a loading state while fetching the remote dataset.

Loading thumbnail…

Platoch Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how different flower species cluster across multiple feature combinations. The visualization cycles through three different x-axis measurements—petal width, sepal width, and sepal length—against a fixed y-axis of petal length. Each data point is rendered as a circle colored by species (setosa, versicolor, or virginica), with a legend identifying the categories. The implementation uses D3 v6, including `scaleLinear`, `axisLeft`, `axisBottom`, and a custom reusable `scatterPlot` function that manages the SVG rendering and handles the animation via `setInterval`.

Loading thumbnail…

ICE7 Area Chart

This area chart visualizes Cameroon’s population from 1960 to 2020, using a smooth curve to show growth over time. The SVG rendering relies on d3.area, d3.curveBasis, and d3.scaleTime for the x-axis, with d3.scaleLinear for the y-axis. Data is loaded via d3.csv from a GitHub Gist, and axes are drawn using d3.axisLeft and d3.axisBottom with gridlines.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris Dataset as a scatter plot, animating between four measurement variables every two seconds. It uses D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader. The reusable chart pattern, inspired by Bostock’s “Towards Reusable Charts,” configures width, height, margins, and radius via getter-setter methods. SVG circles and axes update in-place through `selection.join`, while `setInterval` cycles the x-axis variable among petal width, sepal width, petal length, and sepal length.

Loading thumbnail…

ICE7 Line Chart

The ICE7 Line Chart visualizes COVID-19 case counts in Cameroon from March 1 to March 30, 2020, using a red line to show exponential growth over time. The chart includes labeled axes for date and case numbers, with gridlines and a clear title. The visualization is rendered as an SVG using D3 v5, leveraging `scaleTime` for the temporal x-axis and `scaleLinear` for the y-axis, with `axisBottom` and `axisLeft` for tick marks. Data is loaded from an external CSV file via `d3.csv`, and the line path is generated using the `line` generator.

Loading thumbnail…

ICE7 Pie Chart

This pie chart displays the revenue distribution of the ten best-selling beauty products, with proportional slices colored via d3.scaleOrdinal. The visualization loads data from Data.json, converts revenue values to numbers, and renders SVG paths using d3.pie and d3.arc. A legend, built with SVG rects and text elements, lists each product alongside its revenue formatted with d3.format.

Loading thumbnail…

3d Bar Chart

This 3D bar chart visualizes sales data across regions and product categories using a custom perspective projection to render extruded bars with visible top, front, and side faces. Built with D3.js and React, it loads CSV data and animates bar transitions when the dataset updates. The visualization uses SVG polygons generated by a custom `bar3d` function with a configurable camera position, while axes, hover states, and color changes enhance interactivity.

Loading thumbnail…

Bonus ICE Bar Chart

This example visualizes the revenue data from a CSV file as a 3D cube-based bar chart using Plotly. The chart’s `cubes3d` trace type maps product names to the x-axis and revenue values to both the y and z axes, with semi-transparent markers. It combines D3.js for CSV parsing and layout configuration, while Plotly.js handles the 3D rendering in an SVG container. The data originates from a GitHub-hosted CSV, and the visualization demonstrates a custom axis margin setup.

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes the Iris dataset, showing the relationship between sepal length, sepal width, and petal length on the x, y, and z axes. Built with Plotly's `scatter3d` trace type, the chart renders interactive markers with adjustable size, opacity, and line styling. The implementation loads CSV data via D3's `csv` method and uses `unpack` to extract each attribute before passing the coordinates to `Plotly.newPlot`.

Loading thumbnail…

Iris 3D Scatter Plot

This example visualizes the Iris dataset as an interactive 3D scatter plot using Plotly's `scatter3d` trace. It plots sepal length, sepal width, and petal length on the three axes, with each flower represented by a single marker point. The visualization loads data from a local CSV file using D3’s `csv` function and renders the plot inside a dedicated `div` element. The code defines a single trace with fixed marker styling, including size, color, and opacity, and applies minimal plot margins through the layout object.

Loading thumbnail…

ICE6 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length versus sepal length for 150 flower samples. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded from a CSV file using `d3.csv`, with axis labels and margins configured for readability. The plot shows a clear positive correlation between the two measurements, with points clustering into distinct groups based on flower species.

Loading thumbnail…

ICE6 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. The visualization encodes each data point as a colored circle, with distinct hues representing Iris-setosa, Iris-versicolor, and Iris-virginica, alongside a legend and axis controls. Built with D3 v7, the code uses `d3.scaleLinear` for coordinate mapping, `d3.extent` for domain calculation, and an `axisBottom`/`axisLeft` configuration to render the plot’s axes. Data is loaded from the included `iris.csv` file, with points positioned using `xScale` and `yScale` transforms within a predefined margin layout.

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

Loading thumbnail…

D3 Scatter Plot

A D3 scatter plot displays the Iris Dataset, plotting petal length on the x-axis against sepal length on the y-axis. Built with d3.v6, it uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.extent` to compute the domains. Circles are rendered via SVG elements in the HTML body. The chart includes `d3.axisLeft` and `d3.axisBottom` for tick labels.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries for 2019, rendered as SVG within a React application. The chart uses React for component structure and state management, with D3's `scaleBand` and `scaleLinear` to map country names and population values to visual positions. Axis ticks are generated via `xScale.ticks()`, and population data is loaded asynchronously from a CSV file using D3's `csv` function. The bars are drawn as `rect` elements, with axis tick marks and labels created from the scales.

Loading thumbnail…

First steps in parsing data

This example demonstrates how to parse a remote CSV file and display basic summary statistics about the dataset. The code loads sales data from a Gist-hosted CSV using `d3.csv`, then computes total and mean sales values with `d3.sum` and `d3.mean`. It also reports memory usage via `d3.csvFormat`, row and column counts, and column names. The results are rendered as plain text in a `<pre>` element on an HTML page styled with CSS, alongside a static basketball image.

Loading thumbnail…

First steps in parsing data

This example illustrates the initial steps of parsing a CSV dataset using D3, displaying basic summary statistics about the loaded data. It fetches a remote CSV file containing ice core data, then computes and displays the memory footprint of the formatted data, the number of rows and columns, and the column names. The code uses the `d3.csv` function to load and parse the data, and `d3.csvformat` to format it for size estimation. The resulting summary is rendered as text within a custom HTML element, styled with CSS.

Loading thumbnail…

Platoch Assignment

This visualization renders a simple cartoon face using React and D3’s `arc` import. It draws a yellow circular head, white elliptical eyes, black pupils, blue eye outlines, and a salmon-colored mouth via SVG shapes. The code uses React’s declarative JSX syntax with inline D3 utilities, while coordinates and radii are computed from fixed width and height constants, and the page is set up with UMD builds from unpkg.