Skip to main content
Log in
J

JSR2000

@JSR2000·12 public vizzes

Loading thumbnail…

Making a Bar Chart

This example demonstrates a basic bar chart of country populations using D3.js v5 with SVG rendering. The visualization maps each country from a CSV data file to a rectangular bar, though the bars are uniformly sized rather than scaled to population values. The code imports `select`, `csv`, and `scaleLinear` from D3, loads the data asynchronously, converts population strings to numbers, and appends rectangles to an SVG container. The `scaleLinear` function is instantiated but not fully configured, and the bars are fixed at 300 by 300 pixels each.

Aug 14, 2019
Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

Aug 14, 2019
Loading thumbnail…

SVG and CSS Shapes

This example demonstrates fundamental SVG and CSS shapes, including circles, rectangles, lines, and a path, organized within a scaled group. It shows how CSS classes like `.lines` apply stroke styling to the SVG elements, while inline `fill` and `stroke` attributes override defaults for specific shapes. The visualization uses D3.js’s `select` function to update a text message in the DOM. Rendering occurs through SVG elements with transforms, such as `scale` and `translate`, to reposition groups and illustrate basic vector graphics composition.

Aug 14, 2019
Loading thumbnail…

Cars Report

This example shows a minimal web page that reads a small array of car data and displays the model name of the first record. The page renders a single text element containing “Accord” by parsing a JavaScript string with `JSON.parse` and accessing `cars[0].model`. The implementation relies on a plain HTML `<pre>` tag, a custom `cars.js` module, and a script that writes the result via the Document Object Model’s `textContent` property. No charting or visualization library is used; the focus is on demonstrating basic data ingestion and DOM manipulation.

Aug 13, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal "Hello VizHub!" message rendered as large, centered text on a deep blue background with a custom Ubuntu font. It shows how to structure a basic D3.js project using ES6 modules and external stylesheets. The code imports the `select` function from D3 v5 to target the `#message` div and sets its text content from a separate `myMessage.js` module, while `styles.css` applies the styling. It serves as a template for integrating D3 with modular JavaScript and CSS.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example displays the make of the first car in a hard-coded JSON dataset as large text on a webpage. It parses an embedded array of car objects into JavaScript using `JSON.parse` and selects the first element’s `make` property. The code then updates the DOM by setting the `textContent` of a `<pre>` element accessed via `document.getElementById`. No external visualization libraries are used, relying solely on native JavaScript and HTML.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "Hello world !!", on a webpage with oversized typography. It demonstrates a minimal VizHub project structure using JavaScript, HTML, and a data file. The application imports a hardcoded array of car objects from `cars.js` via `JSON.parse`, but the rendering logic instead selects the first car's make and overwrites it with the fixed string. The message is injected into a `<pre>` element using the DOM API `document.getElementById` and setting `textContent`, showing basic DOM manipulation without visualization libraries.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "Hello world !!", on a webpage with a large font size. It demonstrates a minimal setup for building a data-driven report using the VizHub platform. The code imports a hardcoded array of car records from a separate module, parses the JSON with `JSON.parse`, and then uses the DOM API `document.getElementById` to inject the message into a `<pre>` element. The data source is included directly in the `cars.js` file, though it is not currently visualized or referenced in the output.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example demonstrates a minimal web page that displays a static text message, "Hello world !!", extracted from a JavaScript array of car objects. The visualization reports only the first car's make from the data, though the code currently overrides it with the fixed string. The page structure uses an HTML `<pre>` element with a large font size, populated via the `document.getElementById()` API. The data is defined in a separate `cars.js` module, which is parsed using `JSON.parse` and imported through the VizHub environment.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "Hello world !!", on a webpage with oversized typography. It demonstrates a minimal VizHub project structure using JavaScript, HTML, and a data file. The application imports a hardcoded array of car objects from `cars.js` via `JSON.parse`, but the rendering logic instead selects the first car's make and overwrites it with the fixed string. The message is injected into a `<pre>` element using the DOM API `document.getElementById` and setting `textContent`, showing basic DOM manipulation without visualization libraries.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "Hello world !!", on a webpage with a large font size. It demonstrates a minimal setup for building a data-driven report using the VizHub platform. The code imports a hardcoded array of car records from a separate module, parses the JSON with `JSON.parse`, and then uses the DOM API `document.getElementById` to inject the message into a `<pre>` element. The data source is included directly in the `cars.js` file, though it is not currently visualized or referenced in the output.

Aug 13, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "Hello world !!", on a webpage with oversized typography. It demonstrates a minimal VizHub project structure using JavaScript, HTML, and a data file. The application imports a hardcoded array of car objects from `cars.js` via `JSON.parse`, but the rendering logic instead selects the first car's make and overwrites it with the fixed string. The message is injected into a `<pre>` element using the DOM API `document.getElementById` and setting `textContent`, showing basic DOM manipulation without visualization libraries.

Aug 13, 2019