L

LG0498

@LG0498·29 public vizzes

Loading thumbnail…

Social Network graph

This social network graph visualizes a small set of named individuals organized into four groups, with links between them representing connections of varying weight. The nodes are rendered as circles with lightgreen fills and labels, while links appear as black lines whose stroke width scales with the square root of each link’s weight. The layout is driven by d3.layout.force, which applies gravity, distance constraints, and charge to position nodes, and users can drag nodes interactively. The SVG is generated dynamically from the graph.json data file using d3.v4 and d3.v2 APIs.

Loading thumbnail…

Country map

This example shows a map of the United States with its individual states rendered as sky-blue filled regions and their shared borders drawn as teal lines. It uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to convert TopoJSON data from the `us-atlas` package into SVG paths. The React component `Marks` maps over the land features and renders the interiors with a mesh, while a graticule is generated but not displayed. Data is loaded asynchronously via `d3.json` and processed with TopoJSON’s `feature` and `mesh` functions.

Loading thumbnail…

Family Tree

A family tree visualization displays hierarchical parent-child relationships across four generations, with nodes colored by depth and labeled with character names. Each connection animates from a horizontal line into a diagonal link as the tree expands. The implementation uses D3 v6’s `d3.stratify()` to build the hierarchy from flat data and `d3.tree()` to compute layout positions, while SVG circles, text, and paths are rendered with transitions on `attr` for smooth node growth and link drawing.

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses filled in light green against a sky-blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The map is rendered as SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`, with the sphere drawn first as a background path using a constructed sphere geometry.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the top 10 run-scorers in a cricket dataset, highlighting each player’s share of total runs with a color-coded legend. The chart is built using D3 v5, with `d3.pie` and `d3.arc` generating the SVG segments, while `d3.scaleOrdinal` assigns colors. Data is loaded asynchronously from a CSV file via `d3.csv`. The legend displays player names and run totals formatted as thousands (e.g., “1.2K”), with values calculated from the raw data.

Loading thumbnail…

ICE-7 Resuable scatter plot

This animated scatter plot visualizes the Iris flower dataset, displaying different species as colored circles (green, indigo, and red) that cycle through various sepal and petal measurement axes every two seconds using D3.js. The visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.axisLeft/axisBottom for the coordinate system. A reusable scatterPlot function encapsulates the chart logic, while SVG circles with dynamic positioning and the setInterval timer drive the rotating axis combinations. The rendering is built with D3 v6.7.0, featuring a tech-style font and full-window responsive SVG layout.

Loading thumbnail…

ICE-7 Line chart

This line chart displays yearly run totals from a CSV file, using a blue line to show the trend over time. The D3 v5 code leverages `scaleTime` and `scaleLinear` to map data to axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator to create the path. The SVG is rendered with a grid and labeled axes, with data loaded via D3's `csv` function.

Loading thumbnail…

ICE-7 Area chart

This area chart displays yearly runs scored, with a smooth curve and a sky-blue filled region beneath the line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while axes are rendered with `axisBottom` and `axisLeft`. Data is loaded from a CSV file via `d3.csv`, with years parsed as dates and runs as numbers. The chart includes formatted tick labels and prominent axis titles, all styled with CSS.

Loading thumbnail…

Fork of ILINet Flu Surveillance Data

This visualization displays the total annual influenza cases in the U.S., with individual curves for each year from 2015 to 2019 plotted by week of the year. The chart makes it easy to compare seasonal patterns, such as the high peak in early 2018 and the extended flu season in 2019. The code uses `vega-lite-api` to define the line mark and aggregations, with the data imported via `d3.csv` from a Gist. The use of a categorical color scale for the year field is unordered, making it harder to read chronological trends since darker colors do not necessarily indicate more recent years.

Loading thumbnail…

ICE-7 Line Chart

This example shows a line chart depicting cricket run data over time, with the y-axis representing runs and the x-axis representing players. The chart uses a red gradient stroke for the line and includes labeled axes for clarity. The visualization is built with D3 v6, using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, while a `line` generator with `curveBasis` smooths the data path. Data is loaded from a CSV file via `csv()`, and the SVG rendering is styled with CSS classes.

Loading thumbnail…

ICE-7 Line Chart

A line chart visualizes a single time series of numeric measurements recorded daily from July 20 to August 2, 2019, with the y-axis labeled "Frequency." The chart uses d3.v5 with an SVG viewBox, applying d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3.timeFormat for date ticks. The data comes from a local CSV file parsed with d3.timeParse, and the single series is styled with a solid orange stroke via CSS.

Loading thumbnail…

ICE-7 Pie chart

This example shows a pie chart of the most runs scored by six cricket players, using data from the CSV file `mostruns.csv`. Each slice is colored by player name via a `d3.scaleOrdinal` and labeled with the player’s name. The chart is rendered as SVG using `d3.pie` to compute angles, `d3.arc` to generate paths, and `d3.csv` to load the data, with labels positioned via the arc centroid method.

Loading thumbnail…

Untitled

A pie chart displays the distribution of cricket statistics, with five slices representing Matches, Innings, HS, Average, and Century. Each slice is labeled with its corresponding name and colored using a categorical scale. The SVG rendering uses d3.pie to compute angles from the data values, d3.arc to generate the paths, and d3.scaleOrdinal for the color mapping. Labels are positioned via arc.centroid on a static, non-interactive chart.

Loading thumbnail…

Scatter Plot

This example visualizes the Iris dataset as an interactive 3D scatter plot, mapping sepal length, sepal width, and petal length to the x, y, and z axes. It uses Plotly's `scatter3d` trace to render markers, with colored axis backgrounds and gridlines defined in the layout. The code loads data via D3's `csv` function and passes it through custom `unpack` logic to extract columns. All plot configuration and rendering are handled by `Plotly.newPlot`.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example presents a 3D multi-series bar chart visualizing ticket prices and bookings across four quarters, with data loaded from a CSV file. The visualization is rendered using D3.js v5 alongside the d3-3d and d3-x3d libraries, which integrate with the x3dom engine for interactive 3D graphics. The chart is built by parsing CSV rows into a data structure with quarterly values, then passing it to the `d3.x3d.chart.barChartMultiSeries` component, which draws the bars in a 3D space.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This fork presents a 3D bar chart of ticket prices and booking data by location. It uses a D3 v5 bar chart component with the d3-x3d and x3dom libraries to render the scene in a web browser. The code loads data from a CSV file with d3.csv, transforms it with a custom row parser that assigns quarterly values for ticket cost and bookings, and then binds the data to the chart using datum and call. The visual is interactive and displays multiple series per location in a three-dimensional space.

Loading thumbnail…

Untitled

This example displays two sets of three-dimensional scatter points from the Plotly `3d-scatter.csv` dataset. It shows the distribution of data points in x, y, and z coordinates, comparing two distinct groups differentiated by marker style—one with translucent, bordered circles and another with solid gray circles. The code uses the Plotly JavaScript library, called via `Plotly.newPlot`, along with `d3.csv` to fetch and parse the data. The `unpack` function extracts each coordinate column for the traces. A zero-margin layout removes all surrounding space.

Loading thumbnail…

Untitled

This example shows a 3D scatter plot comparing two datasets, each displayed as a set of markers with distinct visual styling. It loads the `3d-scatter.csv` file from the Plotly datasets repository via D3’s CSV parser, then unpacks the x, y, and z coordinates for each trace using the `unpack` function. The visualization renders two `scatter3d` traces filled with circles of a fixed size, varied opacity, and either a light outline or solid gray color. The layout eliminates all margins, and the chart is drawn in the `myDiv` element using Plotly’s `newPlot` API.

Loading thumbnail…

Untitled

This example presents a three-dimensional bar chart generated with the d3-X3D library, rendering data as a multi-series bar visualization within an X3D scene. Using the `barsMultiSeries` component and a viewpoint component, the code builds the chart dynamically in a detached HTML div element with specified pixel dimensions. The scene is constructed with D3’s selection API, appending an X3D element and Scene node, and binds the provided data via D3’s `.datum()` method to drive the bar geometry. The visualization leverages React as the hosting framework, as noted in the metadata.

Loading thumbnail…

Fork of dataset

An interactive bar chart displays the top 18 most actively traded Brazilian stocks by volume, with horizontal bars representing each stock code. The visualization loads data from a local CSV file and renders as SVG using D3 v5, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The code imports these APIs from the `d3` module via UNPKG, while also demonstrating ES6 module imports through the `myMessage.js` file, which logs a button click event but does not alter the visualization.

Loading thumbnail…

3D Bar Chart

A 3D multi-series bar chart renders a randomly generated dataset as a three-dimensional scene. The code uses the D3 v5 library alongside the x3dom and d3-x3d libraries to construct the visualization, creating bars that represent multiple data series in a virtual 3D space. Data is generated via `d3.x3d.randomData.dataset2()`, and the chart is assembled using `d3.x3d.chart.barChartMultiSeries()`, which handles the geometric layout and rendering within the `#chartholder` div.

Loading thumbnail…

CSCE-5320 ICE-6

This bar chart shows the ten cricketers with the most runs, ranked by total score. The visualization loads data from a CSV file using `d3.csv`, sorts it to the top ten entries, and renders horizontal bars with `React` components and SVG. D3’s `scaleBand` and `scaleLinear` position the bars and axes, while `axisLeft` and `axisBottom` are used to label the player names and run values, with green gridlines drawn from `xScale.ticks()`.

Loading thumbnail…

Scatter Plot for Iris dataset

This scatter plot displays the relationship between petal length and sepal length for the Iris dataset. The visualization uses D3 v6 to load CSV data, map values to screen coordinates with linear scales, and render circles as data points via SVG. D3’s `select`, `append`, and `.join()` methods construct the chart, while the `axisLeft` and `axisBottom` functions generate labeled axes. A rotated text element provides the y-axis label, and the plot fills the browser window dynamically based on `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3’s `d3.csv` method, displaying summary statistics about the data—size, row count, and column count—in a large text message. The page also includes a decorative SVG polygon. The code fetches a remote CSV from a GitHub gist using the D3 library (v5.11.0) and formats the result with `d3.csvFormat` to compute the file size. The overall page styling uses basic CSS with a goldenrod background and centered layout.

Loading thumbnail…

CSCE-5320 ICE-5

This example displays a static house illustration built with SVG shapes such as rectangles, lines, ellipses, and a path, layered over a light green lawn and blue roof. A React and D3 v7 setup loads CSV data from a GitHub gist, calculates the formatted data size in kilobytes, and reports the row and column counts in a message area. The page styling uses CSS to center content and apply a goldenrod background, while the SVG renders directly in the browser.

Loading thumbnail…

CSCE-5320 ICE-5

This example demonstrates how to load and parse a remote CSV dataset using D3.js v5 within a simple HTML page styled with custom CSS. The page displays a light green SVG polygon and a heading, while a JavaScript script fetches the CSV from a GitHub Gist, calculates its size in kilobytes, row count, and column count, and prints this summary inside a styled `<pre>` element. The code uses `d3.csv` for data retrieval and `d3.csvFormat` to measure the data length, with the result presented as a plain text message on a goldenrod background.

Loading thumbnail…

loading and parsing CSV data with d3.js

This example demonstrates loading and parsing CSV data using d3.csv, displaying the resulting content in a styled HTML page. The code initializes d3.v7 from a CDN and includes CSS styling for heading and preformatted text elements, though the JavaScript CSV loading logic is not fully implemented in the visible files. The page renders a simple "Hello HTML!" message within a div, while the README references an additional React starter template for more complex integration.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example shows a stylized emoji-like face rendered as an SVG, featuring a gold circle head, two dark eyes, and a curved smile. The face is built using React components and D3’s `arc` generator to create the mouth path. Key layout values like eye offset, radius, and mouth dimensions are defined as constants. SVG groups with `translate` transforms position the elements relative to the center, while D3 v7 and React 17 are loaded via CDN. The rendering approach combines declarative JSX with D3’s geometry helpers for the mouth curve.