Skip to main content
Log in
L

lamiyaa

@lamiyaa·19 public vizzes

Loading thumbnail…

CO2-buttons

This interactive line chart tracks CO2 emissions per capita from 2000 to 2008 for Germany, France, and the United States. A dropdown menu lets users switch between countries, triggering a smooth transition that updates both the line and its accompanying dots. The visualization loads data from a CSV file using d3.csv and renders an SVG with D3 v4, relying on d3.line for the path, scaleLinear for axes, and .transition().duration(1000) to animate the changes.

Oct 7, 2019
Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Oct 7, 2019
Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Oct 7, 2019
Loading thumbnail…

CO2

This visualization displays global CO2 emissions from 2000 to 2014, showing a steady decline in values over time. The data is loaded from a CSV file using the D3 v4 and v5 libraries, with each value converted to a numeric format. The page, structured around an HTML container, fetches the dataset and logs it to the console, though the chart itself is not yet rendered. The example relies on D3’s `csv` method for data parsing and demonstrates a foundational step in building a time-series bar or line chart.

Oct 6, 2019
Loading thumbnail…

Untitled

A line chart shows the annual value of CO2 emissions from 1995 to 2014, with each year represented by a white circle with a teal outline. The circles change their stroke to black on hover, and a tooltip displays the exact value for each point. The visualization uses D3 v4 to read the CSV data, build a time-scale X axis and a linear Y axis, and draw a smoothed curve using `d3.line()` with `curveBasis`. The SVG output includes axes, circles, and the path, while the tooltip is appended as an HTML div in the page.

Oct 6, 2019
Loading thumbnail…

Making a bar Chart

This bar chart displays population figures for the world’s most populous countries, with each rectangle sized by its corresponding population value from the included CSV file. The visualization uses D3 v5’s `csv` method to load the data and `selectAll` with data joins to append SVG `rect` elements to the page. Although the chart scales the rectangles to a fixed width and height, it does not yet map values to axes or a proper scale, leaving the bars as placeholders for a complete chart. The project relies on D3 utilities like `scalelinear` and the SVG rendering approach.

Oct 6, 2019
Loading thumbnail…

Making a bar Chart

This example shows a simple bar chart of population data for the ten most populous countries, from China to Mexico, using D3.js version 5. The visualization renders rectangular bars via SVG, with each bar’s height and width set to a constant 300 pixels, regardless of the population value. The code loads data from a CSV file using `d3.csv`, converts the population strings to numbers, and appends the rectangles to the SVG container. The chart does not yet map data to scales or axes, displaying only the raw bars.

Oct 6, 2019
Loading thumbnail…

Lets make a face with D3.js

A yellow circle forms a face with black eyes, rectangular eyebrows, and a semicircular arc mouth rendered as SVG shapes. The right eyebrow animates between two vertical positions using `transition().duration()`, while the mouth uses the `arc()` generator from d3-shape with specified inner and outer radii. The code imports `select` and `arc` from D3 v5, appends elements to an SVG canvas sized 960 by 500, and centers the face using fixed pixel coordinates. No external data is loaded; all shapes are directly defined in the script.

Oct 6, 2019
Loading thumbnail…

Lets make a face with D3.js

This example draws a smiling face in SVG using D3.js, composing a yellow circle for the head, two black circles for eyes, rectangles for eyebrows, and an arc-based path for a mouth. The rendering approach relies on D3 selections and the `arc` generator from D3’s shape module. The right eyebrow animates upward and returns to its original position using chained `transition().duration()` calls over two seconds each, while all other elements remain static. The face is centered at (480,250) on a 960×500 SVG canvas.

Oct 6, 2019
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered with CSS styling and inline presentation attributes. A transform scales the entire group, while a nested group translates shapes and applies fill and stroke properties. The `.lines` class sets stroke width and color, with path-specific rules for rounded line joins and caps. It uses raw SVG elements in HTML with a linked stylesheet, showing how CSS can control vector graphics without any JavaScript libraries.

Oct 6, 2019
Loading thumbnail…

Shapes with SVG and CSS

Two SVG circles appear on a blank canvas, the first filled with the default black and the second with red, each positioned by explicit `cx`, `cy`, and `r` attributes. The example demonstrates basic shape rendering through inline SVG elements within an HTML document, styled via a linked `styles.css` that currently only resets the body margin. Rendered directly in the browser, it shows how static vector graphics can be embedded without any external JavaScript libraries, relying solely on native SVG syntax and minimal CSS.

Oct 6, 2019
Loading thumbnail…

HTML Cars Report

This example displays a simple list of four used cars with model years, names, and prices. The report uses plain HTML list items within an unordered list, with the first 2012 Nissan Leaf entry highlighted in red via a CSS class. Styling relies on monospace font and a large 3em font size from the linked styles.css file. The page is a static HTML document with no JavaScript libraries or data-fetching APIs.

Oct 6, 2019
Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report by filtering a list of vehicles under a certain price threshold and formatting each entry as a single line. The page displays a loading message while awaiting data, then shows the report in a large, monospaced `<pre>` element. The code uses JavaScript ES6 modules, Promises (`setTimeout`), and array methods (`filter`, `map`, `join`) to handle the data flow. A static JSON array embedded in the `getCars.js` file serves as the data source, simulating an asynchronous API call. The rendering relies solely on DOM text content manipulation.

Oct 6, 2019
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message on a dark blue background using D3.js. The code employs `d3.select` to target the `#message` div and set its text content from an imported ES6 module, while styling relies on a Google Fonts stylesheet. It demonstrates basic DOM manipulation with d3.v5 and modular JavaScript structure for a minimal visualization setup.

Oct 6, 2019
Loading thumbnail…

Hello World

This example displays a simple "Hello World!" message centered on a dark blue page, demonstrating the basic structure of a VizHub visualization. It uses D3 v5’s `select` method to target a div element by its ID and set its text content from an imported ES6 module. The styling is applied via an external CSS file that imports the Ubuntu font from Google Fonts, setting a large font size and a contrasting background. The code also illustrates modular JavaScript with separate files for the main logic and exported message constant.

Oct 6, 2019
Loading thumbnail…

Hello World

This example displays a simple "Hello World!" message centered on a dark blue page, demonstrating the basic structure of a VizHub visualization. It uses D3 v5’s `select` method to target a div element by its ID and set its text content from an imported ES6 module. The styling is applied via an external CSS file that imports the Ubuntu font from Google Fonts, setting a large font size and a contrasting background. The code also illustrates modular JavaScript with separate files for the main logic and exported message constant.

Oct 6, 2019
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message on a dark blue background using D3.js. The code employs `d3.select` to target the `#message` div and set its text content from an imported ES6 module, while styling relies on a Google Fonts stylesheet. It demonstrates basic DOM manipulation with d3.v5 and modular JavaScript structure for a minimal visualization setup.

Oct 6, 2019
Loading thumbnail…

Hello VizHub

This example displays a single static message, "Hello VizHub!", centered on a dark blue page with large, light-colored Ubuntu text. It demonstrates the basic structure of a VizHub project: an HTML page imports D3 v5 and a bundled JavaScript file, while the main script uses D3's `select` function to set the text content of a div element. The message itself comes from a separate ES6 module, `myMessage.js`, showcasing modular code organization and the use of a Google Fonts stylesheet for styling.

Oct 6, 2019
Loading thumbnail…

Hello VizHub

This example displays a single large “Hello VizHub!” message centered on a dark blue background using the Ubuntu font. It demonstrates a minimal D3.js setup, importing the `select` function to target the `#message` div and set its text content. The message string comes from a separate ES6 module, `myMessage.js`, while styling is applied via an external stylesheet. The code relies on d3.v5 and standard DOM selection methods, with no dataviz logic or data sources involved.

Oct 6, 2019