JaKokosz

@JaKokosz·10 public vizzes

Let's make a face with D3.js

This example shows a yellow smiley face drawn with SVG shapes, where the eyebrows repeatedly rise and lower in a looping two-second animation. The face is constructed using D3 selections to append a circle, two eye circles, two rectangular eyebrows, and a mouth path generated with the `arc` helper. The animation is implemented by chaining `transition().duration(2000)` calls on the eyebrows group, toggling its vertical transform. All geometry is positioned relative to the center of the SVG using a translated group.

Mar 29, 2020

Loading thumbnail…

World Population Area Chart

This visualization shows global population growth over time as a smooth, filled area chart. It uses D3 v5 with `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with `curveBasis` to generate the SVG path. The data comes from a CSV file provided via VizHub, with population values formatted in billions. Axis labels, ticks, and a title are added using `d3.axisBottom` and `d3.axisLeft`.

Mar 27, 2020

Loading thumbnail…

Customizing axes

A bar chart displays the population of the top ten most populous countries, with axes customized for clarity. The horizontal axis uses a linear scale with tick labels formatted via `d3.format` to abbreviate large numbers (e.g., "1.42B"), while the vertical axis lists country names without tick lines or domain paths. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` within an SVG rendered in a React framework, loading data from a CSV file.

Mar 27, 2020

Loading thumbnail…

Temperature in San Fransisco

This chart displays temperature over time in San Francisco, with a smooth, filled area curve rendered in steel blue. The x-axis maps timestamps using `scaleTime` and the y-axis maps temperature values with `scaleLinear`, both enhanced with grid lines. Data is loaded from a CSV file via `csv()`, and the chart is rendered as an SVG using `area()` with `curveBasis`. Axes are generated with `axisLeft` and `axisBottom`, and labels are added manually.

Mar 27, 2020

Loading thumbnail…

Temperature in San Fransisco

This example shows how temperature in San Francisco varies over time, with a smooth line chart plotting temperature against timestamps on a time-scaled x-axis and a linear y-axis. The chart includes labeled axes, grid lines, and a title. The code uses D3 v5 with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render an SVG path. Data is loaded via `csv` from an external dataset and parsed into dates and numbers before rendering.

Mar 27, 2020

Loading thumbnail…

Scatter plot

This scatter plot visualizes the population of the top 10 most populous countries, with each circle’s horizontal position mapped to population and vertical position mapped to country name. The code uses d3.csv to load the data, d3.scaleLinear for the x-axis, and d3.scalePoint for the y-axis. Axes are rendered with d3.axisBottom and d3.axisLeft, while d3.format abbreviates population values on the x-axis. The visualization renders as an SVG with margins, grid lines from tick marks, and a title.

Mar 25, 2020

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking ten countries by population, with countries on the y-axis and population values on the x-axis. The code uses D3 v5’s `csv` to load the data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` to render axes. Bars are drawn as SVG `rect` elements, with a steelblue fill, and the chart is fitted within margins inside an SVG canvas.

Mar 24, 2020

Loading thumbnail…

Let's make a face with D3.js

A smiling face made of SVG shapes is drawn on a yellow circle, with eyes, eyebrows, and a mouth defined by D3.js selections and the `arc` generator. The eyebrows animate vertically via chained `transition().duration(2000)` calls, shifting down and then returning. The code imports `select` and `arc` from D3 v5, positions elements using `attr` with computed coordinates, and renders in a React-based HTML page with an SVG canvas.

Mar 24, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on an HTML page with CSS styling. It shows how SVG presentation attributes like `fill`, `stroke`, and `stroke-width` combine with CSS classes (such as `.lines`) to control appearance, including a yellow path with rounded joins. The code uses raw SVG elements within a `<g>` group with transforms for scaling and translation, applying inline attributes for color and stroke styling. No external JavaScript libraries are used; the visualization relies solely on static SVG markup and linked `styles.css`.

Mar 23, 2020

Loading thumbnail…

Cars Report

This example shows a text-based report of cars filtered by price, displaying each car’s year, make, model, and cost as formatted lines. It first presents a “loading…” message, then asynchronously loads a hardcoded JSON dataset via a Promise and setTimeout in `getCars.js`. The report is generated using array methods (`filter`, `map`, `join`) in `generateReport.js`, with the `formatCar` function composing each line. The React app updates the DOM’s text content directly through `document.getElementById`.

Mar 23, 2020