I m Learning D3

100%

I m Learning D3

✓ Published0🌍 Public

Last edited Apr 6, 2020

Created on Mar 30, 2020

Forked from Let's make a face with D3.js

This example displays the make of the first car from a hardcoded JSON array, rendered as text in an HTML `<pre>` element. It uses a React setup with an imported `cars.js` module that parses the JSON data, and `index.js` accesses `cars[0].make` to set the message via `document.getElementById`. The page is minimal, with SVG markup commented out, and styling in `styles.css` hides overflow.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example displays the make of the first car in a hardcoded JSON dataset by writing it into a page element. It imports the parsed `cars` array from a separate module, accesses `cars[0].make`, and sets it as the text content of a `<pre>` element using the DOM API’s `textContent` property. The page includes a minimal HTML structure with a placeholder element and loads the bundled JavaScript.

Ssiddharth171

83% match

Loading thumbnail…

cars report

This example displays the make of the first car from a two-record JSON dataset, rendering the text “Honda” in a large HTML `<pre>` element. The code imports the car array from `cars1.js`, accesses `cars[0].make`, and writes it to the DOM using `document.getElementById('message_element').textContent`. The visualization uses vanilla JavaScript with no external libraries, relying on a parsed JSON constant defined in the `cars1.js` module and a minimal React README for context. The page is built with a static `index.html` and a bundled script.

BBhavyatulasi

82% match

Loading thumbnail…

JavaScript101

This example demonstrates a minimal D3 version 6 setup by rendering a hardcoded message extracted from a JSON array of car data. It shows how to import and parse local data through ES modules, specifically using `cars.js` and `carsJSON` with `JSON.parse`. The code uses `document.getElementById` to set the text content of a `<pre>` element in `index.html`, displaying only the make of the first car. The visualization relies on standard DOM manipulation rather than D3’s data-binding or scales.

JJoshuoYang

82% match

Loading thumbnail…

Data VIsualization

This example shows the make of the first car from a small JSON dataset, displaying "Honda" as plain text in a preformatted element. The data is parsed from a template literal using `JSON.parse` and rendered through a React starter structure. The code imports the `cars` array from `cars.js` and uses `document.getElementById` to inject the text content into the page, relying on the bundled script from `bundle.js`. No interactive or graphical visualization is present; it is a minimal static text output.

Wwiwinsrimulyani

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

80% match

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small static dataset, rendering the text into a large `<pre>` element. The code imports car data from a JSON string parsed into an array in `cars.js`, then uses plain DOM manipulation via `document.getElementById` to update the page content. Built with React, it relies on a bundled JavaScript output and a simple HTML shell, with no interactive charts or visual encoding beyond the displayed label.

SShriram Bhosle

80% 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

80% match

Loading thumbnail…

Cars Report

This example displays the make of the first car from a small embedded dataset, rendering the text "honda" inside a `<pre>` element on an HTML page. The code imports car data from a separate `cars.js` module, where the data is stored as a JSON string and parsed into an array of objects. It uses React and JavaScript to access the first record and update the page’s DOM via `document.getElementById`, setting the `textContent` of the message element. The visualization demonstrates a minimal data-to-text output without any charts or graphical rendering.

Aakshayms0

80% match