Ronie Uliana

@ruliana·4 public vizzes

Temperature in San Franscisco

This example visualizes the relationship between vehicle weight and horsepower for cars from the 1970s, using a scatter plot with semi-transparent blue circles. The chart includes gridlines and labeled axes for both variables, with a title above the plot. The visualization is built with React and D3.js, using `d3.csv` to load the dataset and `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes. The SVG rendering is handled directly through D3 selections.

Jun 5, 2020

Loading thumbnail…

Scatter plot

A scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from `data.csv`. Each circle represents a car, positioned along the x-axis by weight and the y-axis by horsepower. The visualization is built using D3.js version 5, with SVG rendering. It employs `scaleLinear` for axes, `axisBottom` and `axisLeft` for grid lines, and `extent` to compute domains. Circle opacity is set via CSS, and axis labels and title are added as SVG text elements.

Jun 5, 2020

Loading thumbnail…

Customizing Axis

This example demonstrates how to customize axes in a D3.js bar chart, showing the top 10 most populous countries. The horizontal axis uses a linear scale with a custom tick format that abbreviates numbers (e.g., "1.4B" for billions), while the vertical band scale lists country names. The code imports specific D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and removes default axis lines and ticks for a cleaner look. The chart renders as SVG, with data loaded from a CSV file and styled via CSS classes for tick labels, axis titles, and the chart heading.

Jun 5, 2020

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population counts for ten countries, with bars ordered by the given CSV data. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to pixel positions. Axis components are generated with `axisLeft` and `axisBottom`, while bars are rendered as SVG `rect` elements. The chart is built in a React-free, imperative style, reading from `data.csv` and styling via `styles.css`.

Jun 3, 2020