experiment with functions

Let's make a face with

This example demonstrates how D3.js (v6) can load and structure car data using JavaScript modules, filtering vehicles by price and formatting each entry as a readable string. The visualization renders inside an SVG container, although the primary focus is on an educational tutorial that uses `import`/`export` statements across `formatCar.js`, `generateReport.js`, and `getCars.js`. A bundled script (`bundle.js`) connects the modules to the HTML page, while the code defines a `generateReport` function that filters cars under a specified maximum price and maps them to formatted text output. The example emphasizes modular coding practices rather than interactive graphical elements.

AAbdulazizfh

car examples D3

This example demonstrates how to begin using D3 version 6 by loading a small JSON dataset of car specifications and displaying the make of the first car in the dataset. The code parses a hardcoded JSON string with `JSON.parse` and uses standard DOM methods to set the text content of an HTML element, applying CSS styling for centered, large text. The page includes a linked YouTube tutorial and loads D3 from the official CDN, but the visualization itself relies solely on native JavaScript and DOM manipulation rather than D3-specific functions.

FForemost123

Cars

This example demonstrates how to load and display semi-structured JSON data about cars using D3.js v5 and ES6 modules. The data is embedded in a JavaScript file and parsed with `JSON.parse` before being exported for use in the main application. The index page sets static text content into a preformatted element, although the exported car dataset is available for potential visualization. The code imports D3 from a CDN and styles the document using an external CSS file. No interactive or dynamic visual rendering is present in the current implementation.

EEric Booker

BBismark Kofi Owusu Sarfo

sketch with D3

This scatter plot visualizes the relationship between car price and mileage, with each circle representing a vehicle and its color indicating fuel type (Petrol, Diesel, Hybrid, or Electric). Using D3 v7, the code loads data from an external CSV file, converts numeric fields, and renders an SVG with linear scales for both axes. The visualization includes labeled axes, a title, and a custom legend built from the distinct fuel types. d3.csv fetches the data, while d3.scaleLinear and d3.scaleOrdinal handle the positional encoding and categorical color mapping respectively, with d3.axisBottom and d3.axisLeft generating the tick marks.

D3-coding-challenge#1: Read and Display JSON Data

This example demonstrates how to read and display JSON data using D3.js v7. It loads an array of car objects containing year, make, model, and price fields, then renders two lists: one showing only the car make and another displaying full descriptive sentences for each car generated by the `print_info` helper function. The code imports the data from a separate JavaScript module, formats it using `JSON.stringify`, and binds it to DOM list items through D3’s `selectAll().data().enter().append()` pattern, with styles defined in an external CSS file.

MMartin MIAO

D3-coding-challenge#1:Read cars JSON data and Display in a list

This example reads a JSON array of four cars—each with a year, make, model, and price—and renders the data as two separate HTML lists using D3 v5’s `select`, `selectAll`, `data`, `enter`, and `append` methods. The first list shows only the car makes, while the second displays a descriptive sentence for each car via the `print_info` helper. The page also uses an ES6 module (`constants.js`) to define a title, subtitle, and developer name, which are injected into header elements. All rendering targets SVG and HTML elements, with styling provided by an external Ubuntu font stylesheet.

MMartin MIAO

Cars Report

This example displays a scatterplot of car data, examining relationships between attributes like horsepower and miles per gallon. The visualization loads D3 v5 from a CDN and uses D3’s scales, axes, and SVG rendering to plot circles for each vehicle. It also demonstrates importing local ES6 modules and updating a text element with a message. The chart’s interactive behavior is not shown, focusing instead on static data encoding through positioning and color.

SShalin Shah

Cars report

This example demonstrates asynchronous data loading and D3.js v5. It displays a "Loading ..." message before fetching a hardcoded JSON array of car records via a custom `getCars` function. The code imports from d3 and local ES6 modules, though the visible output ultimately shows a static "Hi!!!!" message, with commented-out logic for filtering and formatting car data by price.

CChangbeom Shim