Baodi

@lwshanbd·8 public vizzes

Cars Scatter Plot with Menu

This interactive scatter plot visualizes car data from the UCI Auto MPG dataset, with points colored by country of origin (USA, Japan, Germany). Users select which numeric columns to plot on the x and y axes via dropdown menus, and can click the color legend to highlight or dim points by origin. Built with D3 v5, it uses `scaleLinear` for axes, `axisLeft`/`axisBottom` for grid lines, and SVG rendering with hover tooltips showing car names.

Apr 18, 2019

Loading thumbnail…

Cars Scatter Plot with Menu

This scatter plot visualizes car data from the UCI Auto MPG dataset, with each circle representing a car. Users can select which numerical columns to compare on the x and y axes using dropdown menus, and can click the color legend to highlight cars from the USA, Japan, or Germany. Built with D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and custom `dropdownMenu` and `colorLegend` modules to render the interactive SVG chart.

Apr 18, 2019

Loading thumbnail…

Cars Scatter Plot with Menu

This scatter plot visualizes car attributes from the UCI Auto MPG dataset, displaying relationships between selectable variables like horsepower, weight, and acceleration. Users choose axes through dropdown menus, while a color legend highlights car origins (US, Europe, Japan) and toggles highlighting of specific regions. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` for axes and color mapping. Hovering reveals car names via `title` elements, and clicking legend items filters data opacity.

Apr 18, 2019

Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries as circles, using D3 v5 to map population values along the x-axis. The code loads data from a CSV file via `d3.csv` and applies `scaleLinear` with `.nice()` to create both axes, customizing tick formats with `d3.format`. Grid lines are drawn using negative `tickSize` values, and axis domains are removed. The chart includes styled axis labels and a title, with data sourced from the United Nations World Population Prospects 2017 report.

Apr 18, 2019

Loading thumbnail…

Books with Pages

A horizontal bar chart displays the page counts of eight classic novels, from Jane Eyre's 507 to War and Peace's 1,392. The visualization uses D3 v5's `scaleLinear` and `scaleBand` to map data from a local CSV file to SVG rectangles. Axes are generated with `axisLeft` and `axisBottom`, and custom CSS removes scroll bars by setting `overflow: hidden` on the body. The chart lacks interactivity, presenting a static comparison of book lengths.

Apr 17, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file and multiplied by 1000 to represent actual population counts. The chart includes axes generated by `axisLeft` and `axisBottom`, with black rectangles representing each country’s population.

Apr 17, 2019

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time, with the x-axis representing time and the y-axis showing population, and includes axis labels and a title. The data is loaded from a CSV file using d3.csv and displayed as an SVG path generated with d3.area and curveBasis. The chart uses scaleTime and scaleLinear for scaling, axisLeft and axisBottom for axes, and custom tick formatting to abbreviate population values, replacing “G” with “B” for billions.

Apr 16, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the basic drawing capabilities of SVG shapes, including circles, rectangles, lines, and paths. It shows how styling and presentation attributes can be applied individually to elements or inherited by a group, with transformations like scaling and translation used to reposition the entire composition. The code uses raw SVG elements, the `transform` attribute, and CSS classes (`.lines`) to control stroke properties such as color, width, line join, and line cap. However, the example does not connect to any external data source; it is purely a static visual demonstration of SVG’s built-in vector graphics features.

Apr 16, 2019