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

100%

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

✓ Published3🌍 Public

Last edited Feb 19, 2022

Created on May 29, 2019

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.

AI-generated description

This simple code reads JSON data of four cars, each of which includes car manufacturer name, car model name, car making year and car price in US dollar, and then display it in a list on canvas.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

91% match

Loading thumbnail…

Cars Report

This example displays a short list of used cars with their make, model, year, and price, sourced from a static JSON array defined in `cars.js`. The visualization renders the data as plain text on a webpage, with a large "Hello" message styled via CSS. It uses D3 v5, loaded from a CDN, but the code primarily relies on standard JavaScript `JSON.parse` and DOM manipulation rather than D3-specific data-binding or layout methods.

Yylzami40

82% match

Loading thumbnail…

Cars Report

This example displays a single car make—Honda—in large text on a dark page, sourced from a JSON array of five car objects with year, make, model, and price fields. The code imports the `cars` data from `cars.js`, logs the first car’s make to the console, and updates the HTML element with the ID `message-element` using `document.getElementById().textContent`. The visualization relies on a simple DOM manipulation approach rather than D3, though the project metadata lists D3 v5 as available. The styling uses the Ubuntu font from Google Fonts with a high-contrast color scheme.

SSameer.

81% match

Loading thumbnail…

cars report

This example displays the make of the first car in a small JSON dataset as plain text on a webpage. It loads D3 via UNPKG and uses local ES6 modules to import and parse the car data with `JSON.parse`. The index.js file selects a DOM element by ID and sets its text content, while CSS styles the message with a large font size. The visualization demonstrates basic data loading, module imports, and DOM manipulation with D3 v5.

Mmanishabehera

81% match

Loading thumbnail…

Cars Report

This example displays a list of five used cars with their make, model, year, and price, extracted from an inline JSON array. The page renders the text “Hey there” in a large `<pre>` element by using D3 v5’s selection and DOM manipulation via `d3.select` and `.text()`. The data is imported as a JavaScript module from `cars.js`, while the HTML loads D3 from a CDN and references a bundled script.

Ggpfstuff

81% match

Loading thumbnail…

Cars Report

This example displays the make of the first car from a small inline dataset, rendered as large text in a dark themed report. It demonstrates basic ES6 module imports and data handling in D3 v5. The code parses a JSON string into a `cars` array using `JSON.parse`, then accesses `cars[0].make` to update the page. The single message replaces the content of a `<pre>` element via `document.getElementById`, with styling applied through an external Ubuntu font stylesheet.

Nnils

81% match

Loading thumbnail…

Cars Report

This example displays the makes of cars from a small, hard-coded dataset defined in `cars.js` as a JSON array and parsed with `JSON.parse`. The visualization focuses on a single data point, retrieving the `make` of the second car (BMW) and displaying it as large text in the browser. It uses D3 v5 from a CDN to load the page, while the message is set directly via JavaScript DOM manipulation with `getElementById` and `textContent`, styled with an external CSS file that applies the Ubuntu font.

SShivrangi

80% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset as a large text message on a web page. The data, defined in a local `cars.js` ES6 module, contains three car records with year, make, and price fields. The visualization imports this data using the `import` statement and uses standard JavaScript DOM manipulation to set the text content of the `#message-element` HTML element. The page loads D3 version 5 from a CDN, though the visible code does not call any D3 functions.

MMartin Casey

80% match