D

driftcafe

@driftcafe·19 public vizzes

Loading thumbnail…

test

A bubble chart displays the relationship between average horsepower, torque, and highway MPG for various car makes, using circle size to encode fuel efficiency and color to distinguish brands. The visualization is built with D3 v7, reading from a CSV file and rendering SVG circles with tooltips that reveal the make on hover. It uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with a Turbo color palette for categorical coloring, and includes a legend showing size mappings and color-coded make labels. Styled with opacity transitions on hover, the chart updates interactively as the mouse moves.

Loading thumbnail…

Boxplot

This boxplot visualizes the distribution of fuel efficiency (mpg) for BMW models across different production years, using a single grouped box and jittered red data points to reveal individual measurements. A blue rectangle marks the interquartile range, black lines extend to the minimum and maximum values, and the median is highlighted, with tooltips showing exact mpg values on hover. The visualization is built with D3 v4, using `d3.nest`, `d3.quantile`, and `d3.scaleBand` to compute summary statistics and render SVG shapes, while `d3.csv` loads the data from a local CSV file containing model names and their corresponding mpg ratings.

Loading thumbnail…

Box Plot - hover test

This box plot shows the distribution of fuel efficiency (mpg) for five car makes, with individual model data points overlaid on each box. The chart uses a D3.js v4 SVG renderer with `d3.csv` to load data, `d3.nest()` to compute quartiles and medians per make, and `d3.scaleBand` with `d3.scaleLinear` for the axes. Jittered circles display each vehicle, while a tooltip div is appended but remains non-functional.

Loading thumbnail…

Fork of Bar chart - Highest MPG

This bar chart visualizes the average city MPG for different car makes, sorted from lowest to highest, with MINI achieving the highest fuel efficiency. The chart uses a sequential red color scale to encode MPG values, with darker shades representing higher efficiency. Built with D3.js v6, it employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` for axes and color mapping, along with `d3.legendColor` for the legend. Interactive tooltips display exact MPG values on hover, and the data comes from a CSV file listing each make’s average MPG.

Loading thumbnail…

Bar Chart - good

This bar chart displays the total votes for Donald Trump and Joe Biden in the 2020 California election, with bars sized by vote count and colored using a sequential red color scale from `colorbrewer`. The visualization emphasizes the vote margin between the two candidates. Implemented with D3 v6, it uses `d3.scaleBand` and `d3.scaleLinear` to position bars, and includes a mouseover tooltip showing formatted vote totals via `d3.format(',.2f')`. The chart loads data from a CSV file and renders as SVG with animated transitions.

Loading thumbnail…

Fork of Bubble chart - hover image

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. It uses a D3.js SVG with animated transitions. A custom tooltip, styled with a background image, appears on hover and follows the mouse. Bubble size encodes highway MPG, color distinguishes car makes, and a legend clarifies the size scale. The chart reads data from a CSV file and uses D3 scales for positioning and sizing.

Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across multiple car makes, using circle size to represent fuel efficiency and color to distinguish manufacturers. Built with D3 v7, it loads data from a CSV file and renders an SVG with linear scales for the axes and bubble radius, plus an ordinal color scale. Interactive tooltips appear on mouseover, while legends for bubble size and color categories are drawn manually using SVG circles, lines, and text elements.

Loading thumbnail…

Box Plot - Highest MPG

This example shows the distribution of fuel efficiency (mpg) for the five auto makes with the highest average miles per gallon: Hyundai, Honda, Kia, Scion, and MINI. Each make’s box plot displays the median, quartiles, and interquartile range, while individual vehicle models appear as jittered green circles overlaid on the boxes. The visualization uses d3.nest() and d3.quantile() to compute summary statistics from the CSV data, and d3.scaleBand() and d3.scaleLinear() to position the boxes and axes in an SVG rendered with d3.v4.

Loading thumbnail…

Multi-Series Line Chart TSLA

This multi-series line chart visualizes Tesla stock price data from the `electric_production.tsv` file, displaying multiple time-series lines over a shared date axis. Using D3 v7 with SVG rendering, the visualization supports interactive zooming via `d3.zoom` and panning, with individual series toggleable through click and hover interactions that adjust line opacity and color emphasis. The chart applies basis curve smoothing for line rendering, and the color scheme uses `d3.schemeCategory10` to distinguish each series. Animated transitions are included when scaling the view.

Loading thumbnail…

Bar chart - Highest MPG

A bar chart ranks ten car makes by their highest city MPG values, from Suzuki to MINI, with taller bars indicating better fuel economy. The visualization uses D3 v6 to load CSV data and render an SVG with a quantized color scale from ColorBrewer, mapping MPG values to a red gradient. A tooltip appears on mouseover, and d3-legend provides a color legend, while axes and labels clarify the make and MPG measurements.

Loading thumbnail…

Barchart - Highest MPG

This bar chart visualizes the distribution of average horsepower for German car brands, derived from a CSV dataset. Built with D3 v6, it renders an SVG histogram with ten bins, using `d3.histogram()` and `d3.scaleLinear()` for axes. Interactive tooltips appear on hover, displaying the bin range, while animated transitions highlight bars on mouseover. The chart includes labeled axes and a title.

Loading thumbnail…

barchart test

This example displays a histogram of horsepower counts for German car brands, with the x-axis showing horsepower values from 50 to 650 and the y-axis representing the frequency of cars in each bin. The code uses d3.csv to load the data, d3.histogram to bin the values, and d3.scaleLinear for both axes. Interactive tooltips appear on hover, showing the range of each bin, while the bars are rendered as SVG rectangles with animated stroke changes on mouseover.

Loading thumbnail…

Fork of Donut

A fork of a donut chart, this example displays the current day of the year as a percentage of the total days in the year. The visualization renders a semi-circular progress gauge using D3’s `arc` generator, with a gray background arc and an orange foreground arc that advances as the year progresses. The code calculates the progress by dividing the day-of-year by the total days, using D3’s `timeFormat`. Built with React and rendered as SVG, the gauge includes a centered text label showing the rounded percentage.

Loading thumbnail…

Fork of Diverging bar chart

A diverging bar chart displays net forest conversion from 1990 to 2015 for countries worldwide, with positive values in green and negative values in red/yellow. The chart uses an ordinal y-axis and a linear x-axis, with bars extending from a central zero line. Data is loaded from a CSV file and rendered as SVG rectangles. The visualization uses d3.scaleBand, d3.scaleLinear, colorbrewer.RdYlGn for color encoding, and a hover tooltip showing exact values. Axes are generated with d3.axisBottom, and the chart includes a legend.

Loading thumbnail…

Scatter Plot

A scatter plot displays the correlation between horsepower and torque for BMW models from 2009 to 2012, using data loaded from an external CSV file. The visualization includes labeled axes, a chart title, and interactive tooltips that reveal each point's horsepower value on hover. Built with D3.js v4, the example uses `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles with mouse event handlers for the interactive data points.

Loading thumbnail…

Dot Plot

This dot plot displays the relationship between average city miles per gallon and the count of vehicles with that fuel efficiency, using a circle for each data pair. The visualization uses D3 v4 to load and parse a CSV file (dot_chart.csv), then draws an SVG chart with a band scale for the x-axis and a linear scale for the y-axis. Hover interactions trigger tooltips that reveal the exact count value for each dot, with the chart styled using fill colors and strokes.

Loading thumbnail…

P5js Dotplots

This example shows the average horsepower of six German car brands as dot plots, with each brand’s value represented by a steelblue circle on a grid. The brands are listed vertically on the left, while the horizontal axis is labeled from 50 to 500 horsepower. The p5.js sketch loads data from a CSV file using `loadTable()`, then in `draw()` it renders the grid lines, labels, and circles based on the parsed values. The code uses p5.js 1.4.0, including the canvas API and text and shape functions.

Loading thumbnail…

P5js Heatmap big test

This p5.js example displays a small heatmap comparing horsepower and MPG across six car brands, with green cells indicating higher values and orange indicating lower values. It loads data from a CSV file using the p5.js `loadTable` function, then renders colored squares via the `square()` canvas API. The `heatMapColorforValue()` function maps each numeric value to a hue range using p5.js `map()`, while the table’s Max and Min rows drive the color scaling for both columns.

Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower for six German car brands, visually sorted by the highest-performing manufacturers. The visualization uses p5.js, creating a canvas that renders brand labels, a grid with axis lines, and colored rectangular bars drawn with the `rect()` function. Horsepower values are loaded from a CSV file using `loadTable()` and mapped to bar widths, while a rotated text label identifies the dataset. The rendering is static within the `draw()` loop, using grid lines and tick marks to establish the numeric scale.