Mike Z

@DatFob·7 public vizzes

Untitled

This example shows a word cloud of eighteen basketball-themed phrases, such as "Jeremy Lin" and "Linpossible," rendered as orange Impact-font text on a white SVG canvas. The visualization uses the d3.layout.cloud API to compute word positions and rotations, with a fixed font size and rotation angle, and d3.v4 to append the SVG text elements. The word data is provided as a hardcoded JavaScript array, and the layout algorithm runs once to generate the final arrangement.

Dec 4, 2022

Loading thumbnail…

Fork of D3 Starter

This box plot visualizes basketball player scores from a local CSV file, comparing Kobe Bryant, Lebron James, and Jeremy Lin. The code uses d3.csv to load the data, d3.group and d3.quantile to compute summary statistics, and d3.scaleBand with d3.scaleLinear for axes. Individual data points appear as white circles with random jitter, while orange lines mark medians within lightblue boxes. The visualization renders through SVG, using d3.axisBottom and d3.axisLeft for chart annotations.

Dec 3, 2022

Loading thumbnail…

A10.wh

This visualization displays total COVID-19 cases per one million population for seven countries, comparing figures from March to September 2020 through a horizontal bar chart. A click on any bar triggers a d3-annotation label, with the U.S.A. example showing text and coordinates. Using D3 v7 with SVG rendering, the code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical country placement, and standard `d3.axisBottom`/`d3.axisLeft` axes, loading data from a local CSV file.

Nov 23, 2022

Loading thumbnail…

A10 - 1

This visualization shows the protein content of various foods as a pie chart, with each segment colored and labeled in a legend. The chart reads data from a CSV file, converts protein values to numbers, and computes the total to render the arcs. Using D3 v5, the code applies the `pie` and `arc` generators, scales colors with `scaleOrdinal`, and formats tick values with `format`. A legend displays each item name and its protein amount in grams, with the SVG positioned at a fixed size.

Nov 23, 2022

Loading thumbnail…

line chart

This line chart example presents two datasets: ticket prices by year and Klout scores by day. Clicking color swatches animates the chart between the two data sets, updating both the x- and y-axes, and the line’s gradient stroke. The visualization is built with D3 v4, using SVG rendering and transitions to animate axis rescaling and path redrawing. The code uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.line` for drawing the line.

Nov 14, 2022

Loading thumbnail…

jeremy Lin salary fan

Four NBA players' salaries are represented as force-directed bubbles, with circle size mapping to salary via a linear scale. Jeremy Lin's comparatively small salary is highlighted in orange alongside larger circles for LeBron James, Kobe Bryant, and Kevin Durant. The visualization uses d3.forceSimulation for collision and positioning, and d3.scalePoint and d3.arc to render a color-coded legend. Hovering over a circle displays its salary in text. Data comes from a local CSV file, and the SVG is rendered with D3 v7.

Nov 10, 2022

Loading thumbnail…

A4-3 TEST

This example shows a box plot of pork price observations loaded from a CSV file, with a horizontal line spanning the min and max, a box between the first and third quartiles, and labeled ticks for each statistic. The code computes quartiles, the interquartile range, and whisker boundaries using d3.median and d3.quantile. It renders the chart as an SVG with d3.v5, using a linear scale for the x-axis, custom tooltip on hover, and styling via external CSS.

Sep 19, 2022