youri7

@youri7·7 public vizzes

Temp SF scatter plot

This scatter plot displays temperature readings over time in San Francisco, with each circle representing a data point plotted using linear scales for both axes. The SVG visualization uses d3.csv to load the dataset, d3.scaleLinear and extent to compute domains, and d3.axisBottom and axisLeft to render labeled axes with gridlines. Circles are styled with steelblue fill and partial opacity, while axis labels and a title are added as SVG text elements.

Mar 10, 2021

Loading thumbnail…

Cars data plot

This scatterplot visualizes the relationship between horsepower and weight for 392 cars, using a dataset loaded from a CSV file. Each car is represented as a semitransparent circle, with weight mapped to the x-axis and horsepower to the y-axis via `d3.scaleLinear` and `d3.extent`. The axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with grid lines and custom tick formatting via `d3.format`. The SVG rendering is powered by D3 v6, with the chart drawn inside a 960×500 viewport.

Mar 10, 2021

Loading thumbnail…

Scatter plot

A scatter plot displays the population of the top 10 most populated countries, with countries mapped on the y-axis and population on the x-axis. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, and d3.scalePoint for the y-axis. SVG circles represent each country, while d3.axisLeft and d3.axisBottom generate labeled axes with tick marks, and d3.format shortens population values.

Mar 10, 2021

Loading thumbnail…

Let's make a face with D3.js!

This bar chart displays the populations of the ten most populous countries, with a title and axis labels for clarity. The chart is rendered as SVG using D3.js v6. The code imports specific functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from D3 to construct the scales and axes. Data is loaded from a CSV file, with the population field multiplied by 1000. The styled bars are steel blue, and axis ticks and labels use custom CSS font and color settings.

Mar 10, 2021

Loading thumbnail…

HTML Cars Report

This example displays a static HTML page titled “Cars Report,” showing a short list of car models: the Nissan Leaf, Ford F150, and Chevrolet Trailblazer. The styling, defined in an external stylesheet, uses a monospace font at a large size and highlights the first car, “Nissan Leaf,” in red by applying the custom `.highlighted` class. The page relies on basic HTML and CSS, without any scripting or data-binding libraries, to present its hardcoded content.

Mar 9, 2021

Loading thumbnail…

Untitled

This example shows a force-directed graph of interconnected nodes, where each node is a small circular glyph and links are drawn as thin, slightly curved lines. The graph uses an offline dataset stored as an array and relies on `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute layout, while `d3.drag` enables user interaction. The visualization is rendered to a Canvas 2D context, with each frame clearing and redrawing positions from the simulation’s tick events. Node colors and sizes are static, and the code does not include labels or tooltips.

Mar 9, 2021

Loading thumbnail…

Cars Report

This example shows a plain-text report of five cars, listing each vehicle’s year, brand, model, and price, filtered to include only those priced under $2,000. The report is generated from an embedded JSON array parsed with `JSON.parse`, then processed through `Array.filter`, `Array.map`, and `Array.join` to produce formatted lines. The result is displayed inside a `<pre>` element by setting `textContent` via the DOM API, using a custom `formatCar` utility to assemble each line.

Mar 9, 2021