Skip to main content
Log in
S

sarakouz

@sarakouz·15 public vizzes

Loading thumbnail…

Resataurants Scatter Plot

This scatter plot displays restaurant data, showing each venue's rating against a selectable attribute such as the number of reviews or cost for two, with all points from the dataset. The visualization uses D3 v5 scales and axes, with an interactive dropdown menu built via a reusable function that filters the x-axis values. Data is loaded from a CSV file and rendered as SVG circles, with the plot title and axis labels updating dynamically based on user selection from the menu.

Dec 4, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using a horizontal layout, with country names on the y-axis and population values on the x-axis. The visualization highlights custom axis styling, including removed default axis lines, tick marks with a gray tone, and formatted population labels that abbreviate large numbers using D3's `format` function. It uses `d3.csv` to load population data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis, rendering with SVG. The chart also adds a custom title and axis label.

Nov 30, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, and its horizontal bars are scaled using `d3.scaleLinear` and `d3.scaleBand`. Customized axes include a bottom axis with tick formatting that converts large numbers to abbreviated units (e.g., B for billions) via `d3.format`, and a left axis stripped of its domain line. Gridlines and axis labels are styled through CSS classes, with the data loaded from a CSV file.

Nov 30, 2020
Loading thumbnail…

RESTAURANTS Scatter Plot

Restaurants from a CSV file are plotted on a scatter plot, comparing their ratings against the number of reviews they have received. Each restaurant is a semi-transparent red circle, and hovering over a circle turns it green. The visualization uses D3 v6 with an SVG rendering, and employs `scaleLinear`, `axisBottom`, and `axisLeft` APIs to create the axes and scale the data points from the "data.csv" file.

Nov 22, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis, rendered as SVG rectangles filled with steel blue. The code uses D3 v5, specifically the `select` and `csv` APIs, to load population data from a CSV file and attach it to the chart. The static SVG container is sized 960 by 500 pixels, with rectangles styled via CSS, though the chart is currently incomplete as it only logs the loaded data to the console.

Nov 18, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This bar chart displays the ratings of various restaurants from a CSV dataset, with each bar’s length corresponding to a restaurant’s rating and its vertical position representing the restaurant name. The visualization uses D3 v6’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, while SVG rectangles render the data. CSS styles the bars and text, including axis labels and a title, and the chart is generated by importing specific D3 functions in a JavaScript module.

Nov 16, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, and its horizontal bars are scaled using `d3.scaleLinear` and `d3.scaleBand`. Customized axes include a bottom axis with tick formatting that converts large numbers to abbreviated units (e.g., B for billions) via `d3.format`, and a left axis stripped of its domain line. Gridlines and axis labels are styled through CSS classes, with the data loaded from a CSV file.

Nov 15, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example displays restaurant ratings as horizontal bars, with each bar’s width proportional to the rating value and its vertical position determined by the restaurant name. The chart uses D3 v6’s `scaleLinear` and `scaleBand` to map the data, while SVG rectangles are appended and styled via CSS. The visualization reads from a local CSV file and updates dynamically when the data loads, offering a clean, minimal view of comparative scores.

Nov 11, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example displays restaurant ratings as horizontal bars, with each bar’s width proportional to the rating value and its vertical position determined by the restaurant name. The chart uses D3 v6’s `scaleLinear` and `scaleBand` to map the data, while SVG rectangles are appended and styled via CSS. The visualization reads from a local CSV file and updates dynamically when the data loads, offering a clean, minimal view of comparative scores.

Nov 11, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example displays restaurant ratings as horizontal bars, with each bar’s width proportional to the rating value and its vertical position determined by the restaurant name. The chart uses D3 v6’s `scaleLinear` and `scaleBand` to map the data, while SVG rectangles are appended and styled via CSS. The visualization reads from a local CSV file and updates dynamically when the data loads, offering a clean, minimal view of comparative scores.

Nov 11, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes can be styled using both presentation attributes and CSS. It draws circles, rectangles, lines, and paths on a 960×500 canvas, with a transformation that scales the content. The code uses inline `fill` and `stroke` attributes, a grouped element with inheritance of stroke and fill properties, and CSS classes (`.lines`, `.lines path`) to control stroke color, width, and line joins. The SVG is embedded directly in HTML and styled with an external stylesheet.

Nov 11, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a collection of geometric primitives—rectangles, circles, lines, and paths—arranged on an SVG canvas with distinct styling. It highlights how CSS classes control visual properties like fill colors, stroke colors, and stroke widths across grouped elements. The rendering relies on inline SVG elements defined directly in the HTML, paired with a stylesheet that applies rules to the `.lines` class and its nested `path` elements, such as a teal stroke with rounded joins and caps. The SVG is drawn without external libraries, using only native markup and CSS.

Nov 11, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can combine to create a simple, static composition. A single rendered page shows a purple rectangle, a green path, and black lines drawn directly in the markup. The code uses raw SVG elements—`rect`, `line`, and `path`—and applies styling through CSS classes. The `stroke`, `stroke-width`, and `stroke-linejoin` properties control the lines’ appearance, while the overall layout is positioned using `transform` and viewport coordinates. No data source or interactivity is present; it purely illustrates basic vector graphics and style application.

Nov 11, 2020
Loading thumbnail…

Interactive barChart (v11.11.12:00)

This interactive bar chart displays the capacity of park-and-ride parking places across Randstad cities in the Netherlands. Users can toggle a checkbox to aggregate double-named city entries, updating the visualization dynamically. The chart fetches JSON data from a GitHub gist and renders SVG rectangles using d3.scaleBand, d3.scaleLinear, and d3.axisBottom. The code uses d3.select for DOM manipulation and transition-free enter/update/exit selections to handle filtered data changes.

Nov 11, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how CSS classes and inline presentation attributes combine to style SVG shapes, with circles, rectangles, lines, and a path shown in a single canvas. The SVG is scaled, and a group with the class `lines` applies black strokes and blue, round-joined paths via the stylesheet. Rendered with SVG and styled through CSS, it uses the `<g>` element for grouping and `transform` attributes for positioning and translation.

Oct 23, 2020