D0no

@D0no·8 public vizzes

Movies Scatter Plot

A scatter plot displays movie ratings against release dates from 1958 to 2019, with each red semi-transparent circle representing a single film’s score. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the data, while `csv()` loads the dataset and SVG renders the circles. Grid lines extend from both axes, and custom axis labels and a title annotate the chart.

Sep 25, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays movie titles against their release years, using D3 v5 with SVG rendering. The visualization is built with d3.scaleLinear for both axes, d3.extent to compute domains, and d3.axisLeft/axisBottom for tick marks, with data loaded from a semicolon-delimited CSV. Circles of radius 15 are positioned via d3.csv, with the x-axis formatted using d3.format to abbreviate large numbers. The chart includes axis labels and a title, styled through external CSS.

Sep 25, 2019

Loading thumbnail…

Cars SCatter Plot

This scatter plot displays the top 10 most populous countries, mapping population on the x-axis and country names on the y-axis using d3.scaleLinear and d3.scalePoint. The visualization renders circles with d3.selectAll and appends axis labels and a title within an SVG. It loads data via d3.csv, converts population values, and formats tick labels using d3.format, replacing 'G' with 'B'. The styling is defined in an external CSS file, and the chart uses axisBottom and axisLeft for gridlines.

Sep 25, 2019

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each country's name on the y-axis and its population on the x-axis. Using D3 v5, the code loads data from a CSV file, scales the x-axis linearly and the y-axis with `scalePoint`, and renders circles with a fixed radius. The chart includes formatted tick labels using `format('.3s')` and axis labels via `axisBottom` and `axisLeft`.

Sep 25, 2019

Loading thumbnail…

Making a bar chart: my grades - costumizing axis

A horizontal bar chart displays university grades across subjects, with bars sorted by score and a customized axis showing gridlines. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map grades and subjects, while `axisLeft` and `axisBottom` generate axes with removed domain lines. Data from a CSV file is loaded via `d3.csv`, and the SVG rendering includes a title and axis label.

Sep 25, 2019

Loading thumbnail…

Making a bar chart: my grades

This example shows a horizontal bar chart of a student’s final grades in university courses, with each bar’s length proportional to the numeric grade. The chart uses categorical labels on the y-axis and a linear scale on the x-axis. Built with D3 v5, the code loads data from a CSV file using `d3.csv`, creates scales via `d3.scaleLinear` and `d3.scaleBand`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Bars are appended as SVG rectangles, and the styling is defined in an external CSS file.

Sep 24, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

Sep 24, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js application that renders a static text message. It uses D3’s `select` method to target a `div` element in the HTML and set its text content to a string exported from a separate ES6 module. The page is styled with a large Ubuntu font and a dark blue background, with all styling defined in an external CSS file. The code imports both the D3 library and a local `message` variable, showcasing basic module integration and DOM manipulation.

Sep 18, 2019