S

sgzzhinde

@sgzzhinde·56 public vizzes

Loading thumbnail…

Untitled

A force-directed dependency graph visualizes relationships between Linux system components, using node size and link thickness to convey dependency weight. The interactive SVG, built with Vue and d3.forceSimulation, arranges labelled nodes with arrow markers indicating directed links, distinguishing between "depends" and "needs" relationships. Nodes are color-coded by class, and a toggleable grid background aids spatial orientation. A button switches between datasets, and the graph supports zooming and panning via d3.zoom. Data loads from an external JSON file containing named nodes, grouped values, and typed, weighted links.

Loading thumbnail…

Untitled

A force-directed dependency graph visualizes the relationships between Linux system components, with nodes colored by class and links styled by dependency type. The Vue component uses `d3.forceSimulation` with charge, collision, centering, and X/Y positioning forces to layout the SVG network, while zooming and panning are enabled via `d3.zoom`. Data is loaded from a JSON file listing nodes and typed links, rendered as circles and arrows with markers, supported by a grid pattern background.

Loading thumbnail…

Fork of Force Network

This force-directed network graph maps relationships between actors, directors, and films from a JSON dataset. It uses D3 v6's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` physics, plus `d3.drag` for interactive node repositioning. SVG rendering shows colored nodes (by group), labeled with names, and links labeled with truncated relationship types (e.g., "Acte..." for "Acted in"). Line thickness reflects edge value, and arrowheads are defined via SVG markers.

Loading thumbnail…

Fork of Knowledge Graph、1.7

A force-directed knowledge graph displays relationships between people and films, with nodes colored by type and directed edges labeled with the relationship. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, while SVG markers render arrowheads on edges. Labels follow curved link paths via `textPath`, and mouseover highlights nodes. Data comes from a static `data.json` file containing actor, director, and film entities with weighted links. The zoomable interface is implemented with `d3.zoom`, and dragging is handled through a custom drag behavior.

Loading thumbnail…

a complete barchart with animation

This example displays a complete bar chart with animated bars that grow from the bottom of the chart. The chart uses hardcoded array data and employs d3.scaleBand and d3.scaleLinear to map values to positions. Bars transition in height and position using d3’s `transition().duration()` and `delay()`, while hover, click, and double-click events change bar colors. The SVG rendering includes axes generated with d3.axisBottom and d3.axisLeft, and the code is written in plain JavaScript with d3.v5.

Loading thumbnail…

a complete barchart

A complete barchart displays an array of nine numeric values as vertical bars with value labels above each bar. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleBand` for the x-axis positions and `d3.scaleLinear` for the y-axis scale. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. Each bar is drawn as a `rect` element with blue fill, and text labels are positioned using the band scale’s step size.

Loading thumbnail…

d3 axis

This example shows a simple bar chart with a bottom axis, where each green rectangle’s width corresponds to a value in a static array. The chart uses d3.axisBottom with a d3.scaleLinear to map data values to pixel widths, and the axis is positioned below the bars via a margin offset. Rendering is done in SVG, with rectangles and the axis group appended to the root svg element. The code explicitly calls the axis generator with .call(xAxis) to draw ticks and labels.

Loading thumbnail…

use the scaleLinear() to draw barchart2

This example demonstrates how to draw a simple bar chart using D3.js version 5’s `scaleLinear()` function to map data values to pixel widths. A hardcoded array of five numeric values is transformed into green rectangular bars, each with a fixed height and spacing, rendered as SVG within a React-equipped HTML page. The code explicitly creates a linear scale with a domain from zero to the maximum data value and a range of 0 to 400 pixels, then applies that scale to each rectangle’s width attribute via D3’s data join and selection methods.

Loading thumbnail…

use the scaleLinear() to draw barchart1

This example uses a linear scale to draw a simple bar chart from a small array of numeric values. The d3.scaleLinear() function maps the domain from zero to the maximum data value into a pixel range from 0 to 800, determining each bar’s width. The code appends SVG rectangles, vertically spaced with a fixed height, and fills them green. It relies on D3 v5 selections and the SVG rendering approach within a React framework, with data hardcoded in the script.

Loading thumbnail…

using of scale, scaleLinear(), scaleOrdinal()

This example demonstrates how D3 scaling functions map input domains to output ranges for both numeric and categorical values. A `scaleLinear()` maps values 0–3 to a pixel range of 0–300, logging transformed results to the console. A `scaleOrdinal()` assigns colors from an array to categorical domain values, and the code appends four div elements to the DOM, coloring each with a different color via D3 selections. The page is a minimal HTML document using d3.v5 and relies on CSS styling through inline `.style` calls.

Loading thumbnail…

d3 select this

This example demonstrates basic D3.js selection and DOM manipulation using the v5 API. It shows how to bind an array of numeric data to paragraphs, conditionally style elements with `d3.select(this)`, and explore methods like `append()`, `insert()`, and `remove()`. The code uses D3's data join pattern with `.enter()` and `.append()`, and directly modifies inline styles for each paragraph based on index. It also illustrates the difference between appending and inserting nodes relative to existing elements, with explicit selector targeting in the insertion operation.

Loading thumbnail…

d3 update() exit()

This example demonstrates how D3's update and exit states work when binding data to existing DOM elements. It shows four paragraph elements for dog, cat, pig, and rat, which are then bound to a two-item dataset using `d3.select('body').selectAll('p')` and `.data(dataset)`. The update state calls `.text()` to display values, while the exit state uses `.exit()` to label elements that no longer have corresponding data, showing their index positions. The code explicitly avoids calling `.remove()` on the exiting elements, leaving them visible for inspection in the browser.

Loading thumbnail…

d3 update() enter() exit()

This example demonstrates how D3’s data join updates existing DOM elements and adds new ones. The page initially contains three `<p>` elements for dog, cat, and pig. The code binds an array of five numbers to these paragraphs using `d3.select` and `selectAll`, then calls `data()` to get the update set. Using `update.text()`, it rewrites the existing paragraphs with their new values and indices. The `update.enter()` method appends two new `<p>` elements, each filled with the remaining data values via `append` and `text`. The example showcases D3’s declarative enter/update/exit pattern for syncing data to HTML.

Loading thumbnail…

d3 data() para (array)

This example demonstrates how the D3 `data()` method binds an array of strings to a selection of four `<h3>` elements, mapping each array entry to a corresponding DOM element. The code uses D3 v5 and the selection’s `.text()` callback to display each lyric along with its index, showing that the array order directly matches the element order in the page. The data array contains four bird-themed phrases, and the text update occurs without any animation or additional D3 layout features, focusing solely on the fundamental data join.

Loading thumbnail…

d3 datum()

This example demonstrates how the `datum()` method binds a single piece of data to multiple DOM selections at once. The page contains four empty `<h3>` elements, and the script selects them all with `d3.selectAll('h3')`, then calls `datum('i am a little bird')` to attach the string to each element. Using the `.text()` method with an accessor function, it renders both the bound value and the element’s index, showing that the same data is shared across all selected nodes. The code uses D3 v5 and plain JavaScript in a simple HTML file.

Loading thumbnail…

Hello d3 selector

This example demonstrates how to select and update DOM elements using D3.js selectors within a minimal HTML page. It shows three heading elements—`h3` tags, an element with an `id` of `h4`, an element with a `title` attribute of `author`, and a `h3` with a `class` of `date`—each receiving distinct text content. The code uses `d3.select` and `d3.selectAll` to target elements by tag, ID, attribute, and class, then sets their text with `.text()`. The data source is the hardcoded string values within the script, not the accompanying CSV file.

Loading thumbnail…

Untitled

This example shows an interactive force-directed graph of hierarchical data from a JSON file, where nodes represent categories and files, and links show parent-child relationships. Users can collapse or expand nodes by clicking, which restarts the layout simulation. The visualization uses the `d3.layout.force` API to compute node positions and link distances, with node size mapped from the data’s `size` attribute. Rendering is done via SVG, with circle styling and text labels per node, and the color function distinguishes collapsed, expanded, and leaf nodes.

Loading thumbnail…

record links graph_1.5

This example visualizes a directed graph of film-related records, showing relationships between actors, directors, and films. A force-directed layout with arrow markers displays links and labels for relationship types. The code uses `d3.forceSimulation` for physics-based positioning, with SVG rendering. Node groups are distinguished by color via `scaleOrdinal`. The data comes from `data.json` and includes both node and link arrays with metadata like relationship and type.

Loading thumbnail…

Untitled

A force-directed network graph of character co-appearances from *Les Misérables* is shown. The layout separates nodes by community group with color, and hovering a node highlights only that node's neighborhood, dimming other links and text labels. The code uses `d3.forceSimulation` for both the main graph and a secondary label layout, plus `d3.drag`, zoom via `d3.zoom`, and SVG circles and lines. Node labels are positioned with a custom spring-like offset calculation based on text bounding boxes.

Loading thumbnail…

Fork of Knowledge Graph、1.6

A force-directed knowledge graph maps Tom Hanks’s filmography through connections between actors, directors, and films. Node colors reflect entity groups, while curved, arrowed links labeled with relationships such as “Acted in” or “Directed” show the nature of each connection. The visualization uses d3.forceSimulation with link, charge, collision, and center forces, plus d3.zoom for pan and zoom. Data comes from a local JSON file, rendered as SVG with marker-based arrows and text paths for labels.

Loading thumbnail…

Untitled

Five circles sit on a shared horizontal axis, each sized by a value from the current dataset. A button switches between two data arrays, triggering a one-second transition that repositions circle radii and x-coordinates. Using D3.js v6 with SVG and animation, the code employs data joins, `enter`/`exit` selections, and `transition` to update the visualization. An axis line and a title label (highlighting the active dataset) complete the chart, which renders entirely in the browser.

Loading thumbnail…

Bowl of Fruit-Hover to Select

D3 v5 renders five apples as SVG circles that smoothly grow into place, then shrink and vanish when items are removed. Hovering highlights a fruit with a black stroke while updating the `selectedFruit` state. The code uses the general update pattern with `data()` joins, `merge()`, `exit()`, and `transition()` for animation, alongside ordinal scales for color and radius mapping.

Loading thumbnail…

Fork of Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection with animated transitions as apples and lemons appear, change, and disappear over time. Users click any fruit to highlight it with a black stroke. The visualization uses SVG circles with a D3 v5 data join, updating enter, update, and exit states via transitions on circle radius and position, with `scaleOrdinal` mapping fruit types to colors and sizes.

Loading thumbnail…

Bowl of Fruit- General Update Pattern with singular elements

A bowl of fruit demonstrates the D3 general update pattern for data joins that change over time. The visualization renders apples and lemons as colored circles with a text label, positioned in a row above an SVG bowl shape. The code uses `selection.data()`, `selection.enter()`, and `selection.exit()` to handle updates, with the `fruitsBowl` function managing enter and exit selections. As timeouts modify the fruit array, elements are added, removed, or updated, showing how D3 v6's `merge()` handles singular elements. The example uses `scaleOrdinal` for color and radius mapping.

Loading thumbnail…

Fork of Bowl of Fruit- General Update Pattern with animation

A fork of the Bowl of Fruit example demonstrates the D3 general update pattern for dynamic data changes over time. Five apples render as SVG circles with colored fills and text labels, transitioning through three state changes: removing a fruit, replacing an apple with a lemon, and filtering out another item. Using d3.scaleOrdinal for color and radius, the code binds data to groups, appending and merging enter selections while handling exit removals, with each update triggered by setTimeout calls.

Loading thumbnail…

Bowl of Fruit- General Update Pattern with animation

A bowl of fruit demonstrates D3’s general update pattern as apples and lemons enter, update, and exit with animated transitions. The SVG circles change position, radius, and fill color over time using `d3.scaleOrdinal` for color and size, while a key function tracks each fruit by unique ID. The code applies `transition().duration(1000)` to animate entering and exiting circles, merging enter and update selections with `merge()`, and removing exit selections after shrinking their radius to zero.

Loading thumbnail…

World Population

This area chart shows global population growth from 1960 to 2015, with a smooth curve and individual data points marking each year. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the filled path, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks. Population values are formatted in billions using `d3.format`. Data comes from the CSV file `world-population-by-year-2015.csv`.

Loading thumbnail…

Fork of a week in san francisco

This line chart shows temperature variations over a week in San Francisco, using a smooth area fill and circular points for each hourly reading. The visualization loads CSV data from an external URL, parses timestamps and numeric values, then renders an SVG chart with d3.scaleTime, d3.scaleLinear, axis generators, and an area generator with curveBasis for smoothing. Grid lines and labeled axes clarify the timestamp and temperature scales, while the title and styling come from custom CSS.

Loading thumbnail…

a week in san francisco

This visualization displays a week of temperature data for San Francisco as a smooth line chart with overlaid circular markers. The chart uses D3 v6’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render an SVG path. Data is loaded asynchronously from a CSV via `d3.csv`, with timestamps parsed into `Date` objects. The axes include labeled ticks and grid lines, and the chart is styled with CSS for circles, text, and the line path.

Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each semi-transparent blue circle represents a car, with axes labeled and grid lines extending across the chart. Built with D3.js, the visualization uses scaleLinear, axisBottom, axisLeft, and SVG circles to render the data, with titles and tick marks styled via CSS.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the 10 most populous countries, using a linear x-scale for population values and a point y-scale for country names. The code builds the visualization with D3 v6, using `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the axes and SVG circles for each data point. Population data from the 2018 United Nations World Population Prospects is loaded via `csv`, then scaled to thousands. The plot includes axis labels and a title, with country names positioned along the y-axis.

Loading thumbnail…

customizing Axes

A bar chart displays population counts for the ten most populous countries, using data from the 2017 UN World Population Prospects. The chart customizes axes by removing domain lines, adding a population axis label, and formatting tick labels with d3.format to abbreviate numbers (e.g., converting G to B). Built with D3 v6, it uses scaleLinear and scaleBand for scales, axisLeft and axisBottom for axes, and SVG rendering.

Loading thumbnail…

Knowledge Graph

This knowledge graph visualizes the relationships between actors, directors, and films from a JSON dataset. Nodes represent individuals and movies, while directed links with arrowheads display relationships such as "Acted in" or "Directed," with labels positioned along each edge. The layout is computed using `d3.forceSimulation` with forces for linking, charge, collision, and centering, rendered as an SVG with interactive pan and zoom via `d3.zoom`. Node drag behavior and a color scale for groups enhance exploration of the network.

Loading thumbnail…

Fork of Knowledge Graph

This example shows a directed knowledge graph of robot components, organized into five color-coded teams, with arrows representing different types of process flows between nodes. Built with D3.js v5 and rendered as SVG, the visualization uses a custom arrowhead marker for directed links and scales node colors via a sequential palette. The code constructs the graph with `d3.select`, `svg.append`, and the `scaleOrdinal` color scale, mapping categorical team assignments to visual properties.

Loading thumbnail…

data binding

This example demonstrates data binding in D3 by mapping 100 randomized nodes to circles in an SVG, with each node assigned one of three categories that determines its color and target x-position. The code uses `d3.selectAll` and `data` to join nodes to circles, `enter` and `merge` to handle new elements, and `exit` to remove unused ones. A `d3.forceSimulation` with `forceX`, `forceManyBody`, and `forceCollide` animates the nodes toward categorical clusters, updating circle positions on each tick. The data originates from a local `cars.json` file with character names and attributes.

Loading thumbnail…

21_color and size legends - General Update Pattern Special Cases

This example demonstrates the general update pattern for creating and updating color and size legends in D3.js. The color legend uses `d3.scaleOrdinal` to map categorical values like apple, lemon, lime, and orange to distinct colors, with circles and text labels arranged vertically. The size legend uses `d3.scaleSqrt` to map a numeric domain to circle radii, filtering ticks and reversing their order. Both legends are rendered as SVG groups within an SVG canvas, using selection, enter, update, and exit methods for dynamic updates.

Loading thumbnail…

data binding

This example demonstrates data binding in D3 v5 by loading a JSON file with character details and rendering each entry as a paragraph. It shows how `d3.json()` returns a promise, using `.then()` to handle the data, then applies the data join pattern with `selectAll`, `.data()`, `.enter()`, and `.append()`. The code binds each object from `cars.json`—containing name, age, and location fields—to a `<p>` element, displaying the character’s name and location via the `.text()` callback. The example relies on D3’s core selection and data-binding APIs.

Loading thumbnail…

Interactive Force Directed Layout

Interactive Force Directed Layout uses the GoJS library with a custom ContinuousForceDirectedLayout that runs continuously while dragging nodes. Users can push and pull nodes around the diagram, with selected nodes remaining fixed while others respond to spring and electrical charge forces. The layout reuses an optimized ForceDirectedNetwork, invalidating and recomputing positions during drag operations. A data-driven node template binds text labels to circle-shaped vertexes, with links displaying arrowheads and radial-gradient label backgrounds.

Loading thumbnail…

Event Handling-- mouseover, mouseout, still has bug

This example demonstrates interactive data points on a scatterplot, where hovering with the mouse highlights a circle by changing its fill to orange, doubling its radius, and displaying its x and y coordinates as a nearby text label; moving the mouse away reverts these changes. Users can also click anywhere on the SVG to add a new circle at that location, appending the coordinates to the dataset. The visualization uses d3.v5 with SVG rendering, employing d3.scaleLinear for axes and d3.axisTop and d3.axisLeft for tick marks. Event handling relies on the `.on('mouseover')` and `.on('mouseout')` methods, though the code contains a typo, `'mouiseout'`, in the click handler, which prevents proper mouseout behavior for newly added points.

Loading thumbnail…

Event Handling

This example demonstrates mouse event handling with D3 v5 in an SVG rendering. The code appends a red circle inside each square div and toggles the background color between steelblue and orange on mouseout and mouseover events using d3.select and the .on method. It also logs d3.event and d3.mouse(this) to the console to expose pointer coordinates during interaction.

Loading thumbnail…

Event Handling

This example demonstrates mouse event handling with D3 v5 in an SVG rendering. The code appends a red circle inside each square div and toggles the background color between steelblue and orange on mouseout and mouseover events using d3.select and the .on method. It also logs d3.event and d3.mouse(this) to the console to expose pointer coordinates during interaction.

Loading thumbnail…

force graph with zoom and drag

This example demonstrates a force-directed graph that can be zoomed and dragged. A circle within an SVG group responds to mouse interaction, with the SVG changing its cursor style to indicate draggable zones. The visualization uses D3 v6 to create three separate SVG elements, applies a linear color scale mapping scores to colors like lime, yellow, and red, and employs a power scale for sizing nodes. A zoom effect is implemented via `d3.zoom()`, which updates the SVG’s transform attribute on zoom events.

Loading thumbnail…

test svg basic

This example shows a basic bar chart built with D3.js, displaying three data values (5, 10, and 12) as orange rectangles with white numeric labels. The visualization uses the D3 selection and data join pattern, appending SVG groups that are translated vertically for each bar. Rectangles are sized using a scale factor of 60 pixels per unit, while text elements position labels at the end of each bar. The code loads D3 v6 and demonstrates fundamental SVG rendering with `d3.select` and `d3.append`.

Loading thumbnail…

test svg basic

This example shows a simple SVG scene with an orange rectangle, a white-bordered ellipse, and the text “i am here” positioned on a 640×480 canvas. The visualization is built using D3.js version 6 and D3 version 3.5.17, with SVG elements created and styled through D3 selections. The code appends a group element, then an ellipse, and a text label, using attributes like `cx`, `cy`, `rx`, and `ry` for positioning. The rendering relies on basic SVG geometry and static styling rather than data-driven behavior.

Loading thumbnail…

test getting data from json format

This example builds a basic force-directed graph from hardcoded JSON-like link data, mapping source and target names into node objects. It renders SVG lines for links and grouped circles with text labels for nodes, using D3 v6 and legacy v3. The code demonstrates data binding and entry selection, though it lacks simulation physics and mouse interaction despite the title suggesting JSON retrieval.

Loading thumbnail…

test with d3 basic

This example demonstrates basic D3.js syntax for DOM manipulation and data handling. A static HTML page contains paragraphs styled with pink CSS, and D3 selection methods change paragraph text color to red while table cells turn yellow. The JavaScript also uses D3 functions like `min`, `max`, `sum`, and `mean` on numeric arrays, with output logged to the console. A separate script imports D3 utilities and binds data from a CSV file to page elements, though the visible page shows only the static table and styled paragraphs.

Loading thumbnail…

Knowledge Graph

A force-directed knowledge graph visualizes dependencies among robot components, with each node colored by team and arrowed links indicating relationships such as "Next" or "Go to." The simulation uses `d3.forceSimulation` to position nodes and render SVG lines and markers. Data includes component roles, runtimes, and inter-team connections. Initial layout anchors subgraphs in a bounded area, while node categories and team assignments drive the color scale via `d3.scaleOrdinal`.

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn on a Canvas using 2,000 points generated by a phyllotaxis algorithm, which are rendered as small circles. The visualization demonstrates interactive pan and zoom via `d3.zoom` and drag-to-move individual points with `d3.drag`, all applied directly to the canvas context. The code uses D3 v5’s `select`, `zoomIdentity`, and transform methods to update point positions during interactions, with a fixed radius of 2.5 for each point.

Loading thumbnail…

Force Network

A force-directed network chart maps the connections between actors, directors, and films from a local JSON dataset. Nodes are colored by group and sized uniformly, while links represent professional relationships such as "Acted in" or "Directed." Built with D3 v6, the visualization uses `d3.forceSimulation` with link, charge, collision, and center forces, and renders nodes and edges as SVG elements. Node positions update on each simulation tick, and nodes are interactive via `d3.drag`.

Loading thumbnail…

making a bar chart!

This bar chart shows the population of the 10 most populous countries in 2018, using data from the United Nations World Population Prospects 2017. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the categorical y-axis of country names. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with tick formatting converting values to billions. Rectangles represent each country’s population, and the chart includes axis labels and a title.

Loading thumbnail…

making a bar chart!

This bar chart displays the population of the ten most populous countries, based on 2018 data from the United Nations World Population Prospects. It shows each country’s population as a horizontal bar, ordered from largest to smallest. The visualization uses D3 v6 with the `scaleLinear` and `scaleBand` APIs to map population values and country names to screen coordinates, and employs `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file, with population values multiplied by 1000 to reflect actual figures. The chart is rendered as an SVG, with bars styled in steel blue.

Loading thumbnail…

Let's make a face with D3.js

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

Loading thumbnail…

Let's make a face with D3.js

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple text-based report of used cars filtered by price, displaying results as a pre-formatted string on a webpage. It shows how asynchronous data loading and modular JavaScript functions work together to generate dynamic content. The code uses the `fetch`-like pattern through a custom `getCars` Promise that resolves car data after a delay, then applies `filter` and `map` with the `formatCar` function. The data originates from a hardcoded JSON array, while the DOM receives updates via `textContent`, with no external visualization libraries involved.

Loading thumbnail…

HTML Cars Report

This example demonstrates a JavaScript-based workflow for loading car data and generating a filtered text report. It displays a list of cars, highlighting those priced under a specified maximum, by mapping and filtering an array of car objects. The code uses the `getCars` function with a Promise to simulate data fetching, and the `formatCar` and `generateReport` modules to process and format the results. The output is rendered into a pre-formatted HTML element (`#message-element`), updating the page after a two-second delay. No external visualization libraries are used; this relies solely on core JavaScript array methods and DOM manipulation.

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" in a large, centered web page, with a corresponding message logged to the browser's developer console. It uses a simple `index.html` file with inline CSS to style the text, and a JavaScript block to demonstrate basic console output. The page also references a separate `index.js` file that uses the `select` and `csv` functions from the `d3` library to load and log a movie dataset, though this functionality is not directly visible on the page itself. The provided `data.csv` file contains movie information for potential charting.