medhedijebara

@medhedijebara·4 public vizzes

Scatter Plot

This scatter plot shows the population of nine South Asian countries, with each circle’s horizontal position encoding population size and its vertical position arranged by country name. The code loads data from a CSV file using `d3.csv`, then applies `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, rendering circles as SVG elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while population values are formatted with `d3.format` to abbreviate large numbers. The visualization uses a fixed 960×500 SVG canvas with custom margins and styled tick labels.

May 6, 2021

Loading thumbnail…

Making a bar Chart

This bar chart displays the population of nine South Asian countries, sorted by country name, with population values in thousands. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load the data, `scaleLinear` and `scaleBand` for the x and y axes, and `axisLeft` and `axisBottom` for ticks. The chart applies a custom tick format to abbreviate large numbers and includes a population axis label.

May 5, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example draws a stylized face using SVG shapes in a 960x500 viewport. A yellow circle forms the head, with two smaller dark circles for eyes and an arc-based path creating a mouth, all positioned via absolute coordinates and a translated group. The code uses D3 v6 selection methods (`select`, `append`, `attr`) and the `d3.arc` generator to construct the mouth path with inner and outer radii and specified start/end angles. CSS rules define stroke styles for path elements, though the classes are not applied in the visible script. The rendering is entirely SVG, with D3 handling DOM manipulation.

May 5, 2021

Loading thumbnail…

Cars Report

A cars report displays a text-based list of vehicles under a price cutoff, formatted as lines like “2000 Honda Accord: $2800”. It loads car data from a local JSON array via a Promise that resolves after a simulated 2-second delay. The example demonstrates ES6 module imports and exports, including `formatCar` and `generateReport`, which filter and map the data, and updates the DOM’s `textContent` with the resulting message.

May 4, 2021