Skip to main content
Log in
S

shis1011

@shis1011·15 public vizzes

Loading thumbnail…

Lets Make a Face D3.js

This example demonstrates how to create a simple face using D3.js by selecting an SVG element and applying a red background color. The code uses d3.select to target the SVG container and modifies its style property, illustrating basic DOM manipulation with D3. The visualization relies on the D3 v5 library and renders entirely through SVG, though the face itself is not yet implemented. The minimal setup includes an empty SVG canvas with fixed dimensions, ready for further drawing and interaction.

Oct 13, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Oct 13, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020 using data from the United Nations World Population Prospects 2019. The bars are rendered as SVG rectangles, with population values formatted in billions via d3.format. The visualization uses React components for the axes and marks, while d3-scaleBand and d3-scaleLinear handle the positioning. The clean Poppins font and teal color scheme give the chart a modern, minimal aesthetic, with a native SVG tooltip showing exact values on hover.

Oct 13, 2020
Loading thumbnail…

HTML Starter

This example displays a simple list of car models with their prices, emphasizing one entry with a red color. The page is built with an HTML file that structures the content, and a separate CSS file using a monospace font and the `.highlighted` class to style the featured car. It demonstrates basic HTML elements like headings, lists, and classes, paired with CSS selectors for visual differentiation. No JavaScript libraries or APIs are used; the visualization is purely static markup and styling.

Oct 13, 2020
Loading thumbnail…

Cars Report

This example displays a numeric value from a small set of car records, specifically the price of the first car in the dataset. The React application imports a hardcoded JSON array of five vehicles, filters the list to cars under $2000, and formats each car’s year, make, model, and price into a readable string. The final text is rendered into a `<pre>` element on the page using the DOM API `getElementById` and `textContent`. The visualization is minimal, relying on no external charting libraries, only core JavaScript array methods and React’s data handling.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example shows a text-based report of the first car in a small dataset, displaying its make in large type on a minimal HTML page. The data is defined in a separate `cars.js` module as a JSON string parsed into an array of car objects, each containing make, model, year, and price. Using React’s component model, the `index.js` file imports that array, accesses the first entry, and sets it as the text content of an HTML `<pre>` element via `getElementById`. No external visualization libraries are used; the output is plain DOM text.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example displays the price of the second car in a small static dataset, rendering the numeric value as large text on an HTML page. It imports car records from a separate module, accesses `cars[1].price`, and writes the result into the DOM via `document.getElementById` and `textContent`. The data consists of five car objects with make, model, year, and price fields, embedded as JSON and parsed with `JSON.parse`. The visualization uses no charting library, relying solely on plain JavaScript and React’s ecosystem, with the page structure defined in `index.html` and a pre-rendered bundle.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example loads a hardcoded array of used cars from a `cars.js` file, parsing it into a JavaScript object with `JSON.parse`, and renders the text “Hello World” in a large `<pre>` element on an HTML page. The visualization uses plain React imports and direct DOM manipulation via `document.getElementById` to set the message content. It shows a minimal starter template that connects a data module to a basic HTML display, without any charting or interaction logic.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example loads a hardcoded array of used cars from a `cars.js` file, parsing it into a JavaScript object with `JSON.parse`, and renders the text “Hello World” in a large `<pre>` element on an HTML page. The visualization uses plain React imports and direct DOM manipulation via `document.getElementById` to set the message content. It shows a minimal starter template that connects a data module to a basic HTML display, without any charting or interaction logic.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example displays a static “Hello World” message in large monospace text using React without any visualization. The code imports a hardcoded array of car objects from `cars.js`—including make, model, year, and price—but never renders or processes this data. Instead, `index.js` directly sets the `textContent` of a `<pre>` element via vanilla DOM manipulation, bypassing React’s component model. The page loads through a bundled script, with the car data unused and no chart, graph, or interactive elements present.

Oct 11, 2020
Loading thumbnail…

Cars Report

This visualization displays a simple text message using a React-based setup. It loads a static dataset of car information from `cars.js` but does not render it. The page shows the text “Hello World” in a large font within an HTML `<pre>` element, styled via inline CSS. The code imports the car data, yet the display logic only sets the message element’s text content using `document.getElementById` and `textContent`. The example uses `index.html`, `index.js`, and `bundle.js` for compilation, with no data-binding or charting libraries like D3 or React components.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example displays a large, styled “Hello World” message in the browser, rendered inside a preformatted HTML element. The page uses React as the framework and vanilla JavaScript to set the text content of the element via `document.getElementById().textContent`. The source includes a minimal `index.html` with a script tag loading `bundle.js`, indicating a build process, though no data or visualization is present beyond the static text output.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example displays a large, styled “Hello World” message in the browser, rendered inside a preformatted HTML element. The page uses React as the framework and vanilla JavaScript to set the text content of the element via `document.getElementById().textContent`. The source includes a minimal `index.html` with a script tag loading `bundle.js`, indicating a build process, though no data or visualization is present beyond the static text output.

Oct 11, 2020
Loading thumbnail…

Cars Report

This example displays a minimal web page titled “Cars Report” that renders the static text “Hello D3” in large, centered type. The page is built with React, as noted in its metadata, and uses a plain HTML file with inline CSS for styling. It does not load any data or invoke visualization libraries, so no charts or interactive elements are present.

Oct 9, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in large, centered type. It serves as a foundational template for web-based projects, including a reference to the React Starter variant. The page uses plain HTML tags and inline CSS styling to set the body’s text alignment and font size. A script tag logs “Hello JavaScript!” to the browser console, showcasing basic JavaScript execution within the page. No external libraries or data sources are used; the rendering relies entirely on the browser’s default HTML processing.

Oct 9, 2020