Skip to main content
Log in
A

alihakan34

@alihakan34·15 public vizzes

Loading thumbnail…

Making A Bar Chart

This example displays a simple bar chart of population data for ten countries, with each bar’s height fixed at 300 pixels while its width remains constant, as the code currently only sets the bar dimensions without encoding values. The visualization uses D3 v5’s `select`, `csv`, and `scaleLinear` APIs to load the `data.csv` file, parse the population numbers (multiplied by 1,000), and log the scale domain, but the bars are not yet positioned or scaled to reflect the data. Rendering is done via SVG within an HTML page, with CSS styling applied to rectangles and text elements.

Jul 4, 2019
Loading thumbnail…

Making A BarChart

Three static rectangles are appended to an SVG as placeholders for a bar chart, with each rectangle sized at 300 by 300 pixels. The chart reads population data from `data.csv`, converting values to actual populations by multiplying by 1,000. It uses `d3.csv` to load the data and `select` and `selectAll` from D3 v5 to manipulate the SVG elements. The rendering logic does not map data values to bar heights or widths, leaving the visualization incomplete.

Jul 4, 2019
Loading thumbnail…

D3.js

This example uses D3.js version 5 to draw a simple yellow face with black outlines on an SVG canvas. It demonstrates basic SVG shape creation by appending a large circle for the face, two smaller circles for eyes, and an arc path for a mouth, all transformed to center within a 960×500 viewport. The code highlights direct manipulation of SVG attributes like `r`, `cx`, `cy`, and `fill`, and constructs the mouth using an arc generator with specified inner and outer radii and angular ranges.

Jul 4, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes and style them using pure SVG and CSS. It shows circles, rectangles, lines, and a polyline path, with solid fills and black strokes. The SVG elements are grouped and transformed using `scale` and `translate` operations. CSS classes, such as `.lines`, add stroke styling and round line joins to paths. The rendering relies on inline SVG attributes and a linked stylesheet, producing a simple gallery of colored shapes on a fixed 960x500 canvas.

Jul 4, 2019
Loading thumbnail…

HTML Car Reports

This gallery example, titled HTML Car Reports, displays a static, hard-coded list of used cars and their asking prices. The page presents a simple report with a highlighted entry and uses basic CSS for styling, including a monospace font and blue text for emphasis. It contrasts this direct HTML markup with structured car data defined as a JSON array in the accompanying JavaScript file. The example demonstrates a fundamental data-visualization concept: presenting raw data values as a straightforward text-based report rather than a graphical chart, with the list defined directly in the HTML body.

Jul 4, 2019
Loading thumbnail…

Cars Report

This example displays the first car from an in-memory JavaScript array—a Porsche 911—as large text on a styled page. It demonstrates basic ES6 module imports and DOM manipulation, fetching the car data from `cars.js` and writing it into the `#message-element` paragraph using `document.getElementById` and `textContent`. The page styling comes from CSS with a Google Fonts import and a dark blue background.

Jul 4, 2019
Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON array as a large, styled headline. It imports the car data from a separate module and uses JavaScript to update the text content of an HTML element. The visualization relies on a basic script that parses the JSON and manipulates the DOM, with CSS providing the visual presentation. The code demonstrates a simple integration of data handling and display within a single-page interface.

Jul 4, 2019
Loading thumbnail…

Cars Report

This example displays a single car make from a small embedded dataset, rendering the text “Porsche” on a dark blue webpage. The code imports a hardcoded array of car objects from `cars.js` using ES6 modules, then accesses the first element’s `make` property. Index.js updates the DOM by calling `document.getElementById` and setting `textContent` on a `<pre>` element. The page relies on basic JavaScript and CSS, with no external visualization libraries.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset, rendering “Porsche” prominently in the browser. The page uses a dark blue background and large Ubuntu typography via CSS. The code imports a JSON array from `cars.js`, parses it with `JSON.parse`, and updates the DOM by setting `textContent` on an element selected with `document.getElementById`. No external visualization libraries are used; the approach relies solely on vanilla JavaScript and ES6 modules.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays a single car manufacturer's name, "Porsche," as large, white text on a dark blue background. A hardcoded array of car objects, defined in `cars.js`, provides the data, with the first record's `make` property selected for display. The page uses `document.getElementById` within `index.js` to update the text content of a predefined `<pre>` element, while `styles.css` applies the Ubuntu font and overall page styling. The visualization is minimal, focusing on a direct data-to-text output rather than a chart.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays the first car make from a hardcoded dataset of five vehicles, rendering "Porsche" in large white Ubuntu text on a dark navy background. The visualization uses a `cars.js` module containing an array of car objects with make, model, year, and price properties, which is imported into `index.js` and accessed to populate the HTML element. The page layout is defined in `index.html` with a styled `<pre>` tag, while `styles.css` applies the color scheme, font, and centering. The code demonstrates basic ES6 module imports and DOM manipulation without additional libraries.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays the first car make from a hardcoded dataset of five vehicles, rendering "Porsche" in large white Ubuntu text on a dark navy background. The visualization uses a `cars.js` module containing an array of car objects with make, model, year, and price properties, which is imported into `index.js` and accessed to populate the HTML element. The page layout is defined in `index.html` with a styled `<pre>` tag, while `styles.css` applies the color scheme, font, and centering. The code demonstrates basic ES6 module imports and DOM manipulation without additional libraries.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays the first car make from a hardcoded dataset of five vehicles, rendering "Porsche" in large white Ubuntu text on a dark navy background. The visualization uses a `cars.js` module containing an array of car objects with make, model, year, and price properties, which is imported into `index.js` and accessed to populate the HTML element. The page layout is defined in `index.html` with a styled `<pre>` tag, while `styles.css` applies the color scheme, font, and centering. The code demonstrates basic ES6 module imports and DOM manipulation without additional libraries.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays the make of the first car in a static JavaScript array, rendered as large, styled text on a dark background. The page initially shows "Hello" before JavaScript updates the message element. It uses core HTML DOM APIs to replace the text content, while CSS imports the Ubuntu font and sets the visual theme. The data source is a hardcoded array of car objects.

Jul 3, 2019
Loading thumbnail…

Cars Report

This example displays the first car make from a hardcoded dataset of five vehicles, rendering "Porsche" in large white Ubuntu text on a dark navy background. The visualization uses a `cars.js` module containing an array of car objects with make, model, year, and price properties, which is imported into `index.js` and accessed to populate the HTML element. The page layout is defined in `index.html` with a styled `<pre>` tag, while `styles.css` applies the color scheme, font, and centering. The code demonstrates basic ES6 module imports and DOM manipulation without additional libraries.

Jul 3, 2019