excalibur1987

@excalibur1987·6 public vizzes

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations: a color legend mapping ordinal categories (apple, lemon, lime, orange) to distinct hues, and a size legend using a square-root scale to represent numeric values. The color legend renders colored circles with labels, while the size legend positions circles of varying radii with tick marks. Both use SVG groups and the `selection.merge` pattern for enter-update-exit handling, with styling applied via the `.tick` class.

Oct 15, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3 by showing a row of fruit circles that change over time—apples are removed, one apple transforms into a lemon, and another apple disappears. The code uses `d3.scaleOrdinal` to map fruit types to colors and radii, and `selectAll` with `.enter()`, `.merge()`, and `.exit()` to handle data joins. SVG circles are appended and updated based on a `fruits` array, with timers (`setTimeout`) triggering each state change.

Oct 3, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Auto MPG dataset. Red semi-transparent circles represent individual cars, with axes labeled and gridlines rendered via d3.axisBottom and d3.axisLeft. Built with d3.v5 and SVG, the code uses d3.scaleLinear, d3.extent, and d3.csv to load and scale the data, displaying the chart within a 960x500 viewport.

Sep 25, 2019

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It visualizes population values with horizontal bars and customizes the axes: the y-axis labels are kept, while grid lines are removed, and the x-axis uses a `format('.3s')` tick formatter to abbreviate numbers (with 'G' replaced by 'B' for billions). Built with D3 v5, it uses `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG elements directly within a pre-sized `<svg>` container.

Sep 25, 2019

Loading thumbnail…

Bar Charts

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The chart displays population counts per country with a horizontal bar layout, using a linear scale for the x-axis and a band scale for the y-axis to position country names. The visualization is rendered as SVG using D3 v5, with custom axis formatting that abbreviates population numbers and uses scaleLinear, scaleBand, axisLeft, and axisBottom APIs. The code also demonstrates axis customization by removing domain lines and adding axis labels and a title.

Sep 23, 2019

Loading thumbnail…

Maake a face

This example creates a simple yellow smiley face using D3.js version 5. It draws a circle for the head, then uses an SVG group and D3’s `arc` generator to create a mouth path with a specific start and end angle. The visualization is rendered entirely as SVG elements within an HTML page, with styling handled by an external CSS file. The code imports specific D3 functions including `select`, `arc`, and `transform` to position and shape the facial features.

Sep 17, 2019