Skip to main content
Log in
E

Erik Rudhe

@erikrudhe·8 public vizzes

Loading thumbnail…

Bar Chart

This bar chart displays yearly counts from a CSV dataset, with steel-blue rectangles representing each year’s value. The visualization uses D3 v5 to load and parse the data, then applies `scaleLinear` for the horizontal axis and `scaleBand` for vertical positioning. SVG elements are appended directly to the chart, with axes omitted from the final rendering. The bars scale in width according to the year values while maintaining equal heights for each band.

Apr 1, 2020
Loading thumbnail…

Temperature

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with the x-axis mapping horsepower and the y-axis mapping weight, revealing a positive correlation between the two variables. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks and grid lines, and SVG circles for data points. The chart includes labeled axes and a title, rendered within a fixed 960 by 500 pixel SVG canvas.

Apr 1, 2020
Loading thumbnail…

Temperature

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with the x-axis mapping horsepower and the y-axis mapping weight, revealing a positive correlation between the two variables. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks and grid lines, and SVG circles for data points. The chart includes labeled axes and a title, rendered within a fixed 960 by 500 pixel SVG canvas.

Apr 1, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles indicate data density where many cars share similar values. The visualization uses D3 v5 with `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and SVG rendering via `select` and `append`. Axis labels and a title are added as text elements, while the data is parsed from CSV with `d3.csv`.

Apr 1, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with countries on the y-axis and population values on the x-axis. It uses D3 v5’s `scaleLinear` and `scalePoint` to position circular marks, with `axisBottom` and `axisLeft` for the axes. The data is loaded from a CSV via `d3.csv` and formatted with `d3.format`. The chart includes a title, axis label, and gridlines, rendered as SVG.

Apr 1, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, with population on the x-axis and country names on the y-axis. It uses d3.csv to load the data and d3.scaleLinear and d3.scalePoint for positioning, while d3.axisBottom and d3.axisLeft render the axes with tick lines. The circles are drawn as SVG elements, and the population values are formatted using d3.format with a custom tick format that converts billions from 'G' to 'B'. The chart includes axis labels and a title, all styled via CSS.

Apr 1, 2020
Loading thumbnail…

Test svg

This bar chart displays the population of the ten most populous countries, with horizontal bars sorted by country name. The visualization uses D3 v5 to load data from a CSV file, scale the population values linearly, and render the chart as an SVG. The code applies `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, while `axisLeft` and `axisBottom` generate the tick marks and labels. Bars are drawn as SVG rectangles with a steelblue fill, and the chart includes margins and a rescaled population axis.

Mar 31, 2020
Loading thumbnail…

Test svg

The visualization is a simple test of SVG rendering with D3.js. It displays an empty, full-width SVG canvas with a red background applied via the `d3.select` API. The code uses D3 v5 to select the SVG element and set its background color, while CSS styles the page layout with hidden overflow and a large font size. The example demonstrates a minimal D3 setup, showing how to manipulate SVG elements and apply styling, with the source data being an empty SVG element within the HTML file.

Mar 31, 2020