vpruden1

@vpruden1·8 public vizzes

Untitled

This visualization is an UpSet plot that displays the intersection sizes of four overlapping sets of categorical values. The bar chart shows the count of elements in each set combination, while a matrix of circles beneath indicates which sets are included in each intersection, with connecting lines highlighting the relevant sets. The plot is rendered as an SVG using D3 v5, with the `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` APIs handling scaling and axes. The code computes all intersections recursively and includes tooltips on bars to reveal the set names and exact counts.

Sep 25, 2020

Loading thumbnail…

Coffee Data

This visualization uses an UpSet plot to show the intersection of coffee-drinking times across four periods (Mañana, Mediodía, Tarde, and Noche), with horizontal bars displaying the size of each unique combination and circled matrix dots indicating which periods are included. The SVG rendering is built with D3 v5 within a React framework, using custom functions to compute set intersections and a tooltip on bar hover to reveal the exact count. The data consists of arrays of numeric IDs, sorted in descending order to highlight the most common overlaps.

Sep 19, 2020

Loading thumbnail…

Customizing Axes

This example displays a bar chart of IT company counts across Scottish regions, with company numbers mapped to bar widths and regions listed vertically. The visualization customizes both axes by removing default tick lines and domains, then adds custom text labels for the x-axis and chart title. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes, with SVG rectangles drawn for each bar.

Sep 19, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the number of IT companies across Scottish regions using d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The chart customizes both axes by removing domain and tick lines, appending custom axis labels, and adding a title. Data is loaded from a CSV file with d3.csv, and rectangles are rendered in SVG with a pink fill, while axis and title text use serif typography.

Sep 14, 2020

Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between the ratings and sugar content of various cereals. Each circle represents a cereal, positioned along the y-axis by its sugar level and the x-axis by its rating score. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for the axes, and d3.axisLeft and d3.axisBottom to render them in an SVG. A title and axis label are included, though the data source URL points to a cereal dataset from GitHub.

Sep 12, 2020

Loading thumbnail…

Customizing Axes

This visualization displays the number of IT companies across Scottish regions using a horizontal bar chart with custom-designed axes. The y-axis labels are shown without tick lines or domain path, while the x-axis displays only tick marks and a "Companies" label, omitting its domain line. The chart is built with D3 v5, using `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes. Data comes from a CSV file, and bars are rendered as SVG rectangles with a fixed fill color.

Sep 12, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the number of IT companies across Scottish regions, ranked by region name on the vertical axis and company count on the horizontal axis. Using D3 v5 APIs such as `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, it renders as an SVG graphic. The data originates from `data.csv` and is visualized with pink bars, with axis labels styled via a serif font.

Sep 11, 2020

Loading thumbnail…

Lets Make a Face!

This example draws a simple cartoon face using D3.js version 5 and SVG. It renders a yellow circle for the head, two black ellipses for eyes, and an empty path for the mouth. The code uses D3’s `select` and `attr` methods to position each shape based on the SVG’s fixed width of 960 and height of 500. All elements are placed with relative coordinates, such as `width/2.5` for the left eye, demonstrating basic geometric composition through SVG primitives.

Sep 11, 2020