Skip to main content
Log in
O

ovalli

@ovalli·9 public vizzes

Loading thumbnail…

D3 Course 4: Area Chart

This area chart displays population trends over time using a smooth curve. The visualization loads CSV data, maps the year field to a time scale, and the population values to a linear scale. Built with D3 v5, the chart uses `d3.area()` with `curveBasis` to generate the filled SVG path, alongside `d3.axisBottom` and `d3.axisLeft` for labeled axes. The y-axis ticks are formatted with `d3.format` to abbreviate large numbers, and the chart includes gridlines and a descriptive title.

Mar 30, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from World Population Prospects 2017. The visualization loads data from a CSV file and renders it as an SVG, with the y-axis ordered by country name and the x-axis scaled linearly. The code uses D3 v5 modules including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the chart, apply margins, and add axis labels. Population values are converted from thousands to full counts, and the x-axis ticks use a custom formatter to abbreviate large numbers.

Mar 30, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from World Population Prospects 2017. The visualization uses d3.scaleLinear and d3.scaleBand to map population values and country names to positions, with axes rendered via d3.axisLeft and d3.axisBottom. Population values are loaded from a CSV file using d3.csv and formatted with d3.format. The chart is drawn as SVG rectangles inside a fixed-width container, with a custom title and axis label included.

Mar 30, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from World Population Prospects 2017. The visualization loads data from a CSV file and renders it as an SVG, with the y-axis ordered by country name and the x-axis scaled linearly. The code uses D3 v5 modules including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the chart, apply margins, and add axis labels. Population values are converted from thousands to full counts, and the x-axis ticks use a custom formatter to abbreviate large numbers.

Mar 30, 2020
Loading thumbnail…

HTML Starter

A simple bar chart renders three static rectangles from a hard-coded array of three values. The example demonstrates basic D3 data binding with `d3.select`, `canvas.selectAll`, and `.enter()`, appending SVG `rect` elements whose width and height are derived from each data point. The chart uses D3 v5 and outputs to an SVG canvas, with bars positioned vertically by index. No axes, scales, or interactivity are included, making it a minimal starter template for understanding core D3 joins.

Mar 27, 2020
Loading thumbnail…

line chart time data

This line chart visualizes time-series data from a CSV file, plotting daily values over a period from late 2017 to mid-2018. Two distinct series are shown, with the primary line appearing nearly flat around 2,055,322 and a secondary series appearing later with slightly higher values. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart, with circles marking individual data points.

Mar 14, 2020
Loading thumbnail…

Making a Barchart

This example shows a bar chart of letter frequencies, with bars colored steelblue and a hover effect that turns them red. It uses D3 v5 to load data from a CSV file, then creates linear scales for the x- and y-axes, and renders the bars as SVG rectangles. The chart includes axis labels and ticks formatted as percentages. The data is mapped and scaled, with the y-axis positioned on the right side.

Mar 13, 2020
Loading thumbnail…

Mouvements

This example visualizes the movement of COVID-19 case counts over time for a selected country, with a dropdown menu to switch between confirmed cases, deaths, and recoveries. It shows a single line chart with a time-based x-axis and a linear y-axis, colored by the selected metric. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file and aggregating entries by country and date. It employs `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with a basis curve.

Mar 13, 2020
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a plain white page, demonstrating the simplest possible starting point for a web-based visualization. The page is built entirely with static HTML and CSS, using no JavaScript libraries or external data sources. A single `<style>` block applies a 13em font size and text alignment to the body, while the content lives directly in the markup. It serves as a minimal template for uploading and hosting an HTML file in the gallery.

Mar 12, 2020