S

Simon Hackbert

@Simon6HH·26 public vizzes

Loading thumbnail…

Untitled

A simple bar chart displays two annual values from a CSV file, mapping dates on the x-axis and values on the y-axis. The chart uses D3 version 3 (loaded via CDN) with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.time.format` for date parsing. Bars are rendered as SVG rectangles with steelblue fill. The axes include rotated date labels and a rotated y-axis title. The code demonstrates basic D3 data binding, scale setup, and SVG element creation within a fixed margin layout.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 program: it displays the text “Hello D3 version 7” centered on a blank page. The code uses the D3 v7 `select` method to target the `body` element and chain the `.text()` method to set its content. The `index.html` file loads D3 from unpkg, imports the JavaScript bundle, and uses CSS to enlarge the text to 13em for a bold visual effect.

Loading thumbnail…

A10 - White Hat Black Hat

This example shows a single line of text, “Hello D3 version 7,” centered on a plain white page. It renders the words at an enormous 13em font size, making the message the entire focus of the visualization. The code uses the D3 library’s `select` method to target the document body and its `.text()` method to set the content. It is a minimal demonstration that D3 version 7 is correctly loaded and functioning within a simple HTML page.

Loading thumbnail…

Bubble Plot: Messi vs Messi

This bubble plot compares Lionel Messi’s goals and assists across seasons, with each bubble representing a year. Bubble size encodes the same metric as the Y-axis, while color represents the season. The chart uses D3 v4 with an SVG renderer, a linear scale for axes, a square-root scale for bubble radius, and a categorical color scale. Hovering reveals a tooltip with year details, and hovering a bubble dims all others to highlight the selected season.

Loading thumbnail…

Connected Scatterplot: Playstyle Change

This example shows how a soccer team’s passing playstyle changed over time, allowing viewers to compare four pass-related statistics across months. A connected scatterplot displays the trend as a line with circular markers, and a dropdown menu lets users switch between metrics, triggering a smooth 1-second transition of the line and dots. The visualization uses d3.csv to load external data, d3.scaleBand and d3.scaleLinear for axes, and d3.line with selection.transition to animate the updated path and circles in an SVG.

Loading thumbnail…

Lollipop Chart: 2008-2012

This interactive lollipop chart displays four football statistics—Goals, Goals Conceded, Titles, and League Points—for the years 2008 through 2012. Clicking a button triggers the `update` function, which transitions the vertical lines and circle markers to new values using animated `transition` calls on SVG elements. The chart reads tabular data from a remote CSV file via `d3.csv` and scales axes dynamically with `d3.scaleBand` and `d3.scaleLinear`. Rendering is entirely SVG-based, with axis and glyph transitions handled through D3's selection and merge operators.

Loading thumbnail…

Dot Plot: Goals: MessiVRonaldo

This dot plot compares Lionel Messi and Cristiano Ronaldo’s goal totals by season, with each year on the y-axis and a grey line connecting the two players’ goal counts. The visualization overlays the plot on a football pitch diagram, using SVG rectangles and lines for field markings. Built with D3 v4, it uses `d3.scaleLinear` and `d3.scaleBand` for axes, while circles are colored green for Messi and purple for Ronaldo. Clicking the player labels toggles the corresponding data points’ opacity via `d3.selectAll` and `.transition()`. Data is loaded from a CSV via `d3.csv`.

Loading thumbnail…

Bar Chart: Goal Contributions

This bar chart displays total career goals and assists for individual players, with each bar growing upward in a staggered animation. The visualization overlays the chart on a scaled soccer field outline, complete with penalty areas, a center circle, and a halfway line. Built with D3 v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition()` with `.delay()` to animate bar heights. Data is loaded from a CSV file via `d3.csv`, and SVG shapes render the field markings.

Loading thumbnail…

Bar Chart: Goals

A bar chart compares total career goals for different footballers, with green bars animating upward in sequence from an initial zero position. The chart includes custom axes, rotated labels, and a football pitch overlay with field markings and penalty areas drawn behind the bars. It uses D3 v3 and v4 together, loading data from a CSV file, and relies on `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `selection.transition()` with duration and delay for the animated bar growth.

Loading thumbnail…

Bar Chart: Man of the Match Awards

This bar chart visualizes the total Man of the Match awards won by soccer players since the 2009/10 season. Using D3 v3 and v4 loaded together, it renders an SVG bar chart with a green fill for each player, animating bar heights upward with staggered delays. The chart includes rotated axis labels, a y-axis title, and is overlaid with a football pitch outline, penalty areas, a halfway line, and a center circle drawn using D3 scales for field coordinates.

Loading thumbnail…

Bar Chart: Assists

This example displays a soccer bar chart of players’ total career assists. Green bars rise from zero to their final values, animating sequentially using `d3.transition` with a per-bar delay. The SVG also includes a football field drawn with `d3.scale.linear`, including the outline, penalty areas, goal boxes, halfway line, and center circle. Data is loaded from a CSV via `d3.csv`, and axes are rendered using `d3.scaleBand` and `d3.scaleLinear` with D3 v4.

Loading thumbnail…

Bar Chart: Trophies

A bar chart displays the total career trophies for individual athletes, with a green bar for each named entry and a y-axis scaled from 30 to 45. The chart animates bars growing upward from the baseline in a staggered delay, using d3.csv to load data and d3.scaleBand and d3.scaleLinear for axes. D3 transitions with duration and delay drive the animation, while an SVG overlay draws a soccer field outline, penalty areas, and center line.

Loading thumbnail…

Bubble Chart: All Data

This bubble chart displays global life expectancy against GDP per capita, with bubble size representing population and color indicating continent. The visualization includes an interactive tooltip showing country names on hover, plus a legend for population scale. Built with D3 v4, it uses SVG circles, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeSet1 for color mapping. The chart reads data from a CSV of three numeric variables per country and adds hover effects to highlight individual data points.

Loading thumbnail…

A7 - Interaction in D3

This example shows daily average temperatures for New York, San Francisco, and Austin plotted as smooth line charts over time. Users can hover over lines to reduce their opacity, click a line or label to remove that city from the chart, and zoom the time axis using the mouse wheel. The visualization is built with D3 v7, loading data from a TSV file, using `d3.line` with `curveBasis`, `d3.scaleTime`, and `d3.zoom`, and rendering to SVG with animated transitions.

Loading thumbnail…

HeatMap: Career Data

A d3.js heatmap displays career data across two categorical axes, with each cell colored using an inferno sequential scale. The visualization maps group and variable labels to x and y coordinates, while the cell intensity reflects a numeric value. Hovering a cell reveals its exact value via a custom tooltip. Built with d3.js v4 and the d3-scale-chromatic library, the SVG chart loads data from a remote CSV file and includes axis labels, a title, and a subtitle.

Loading thumbnail…

Untitled

This animated bar chart displays the total career trophies of various individuals, with a Y-axis ranging from 30 to 45. Using D3 v4, the visualization renders as SVG bars that grow from a baseline via `transition` with staggered delays. Data is loaded from a remote CSV file, and axes are constructed with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The plot scale is derived from a responsive constant, and bars are colored teal.

Loading thumbnail…

Untitled

A multi-line chart displays monthly temperature averages for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth basis curve. The SVG rendering uses D3 v7 scales and axes to map dates and temperatures, while the `d3.zoom` API enables pan and zoom interactions on the chart. City labels follow the final data point, and the code includes placeholder hooks for hover and click handlers. Data is loaded from a TSV file via `d3.tsv`, with colors assigned through `d3.scaleOrdinal`.

Loading thumbnail…

Untitled

This example demonstrates a simple D3 version 4 setup that renders a "Hello D3 version 7" message directly into the page body using `d3.select`. The code loads the D3 library and d3-scale-chromatic from a CDN, with CSS styling for monospace text and axis elements. Although the script imports version 7 functions, it actually uses d3.v4, highlighting a version mismatch. The visualization shows minimal content—just a text string—with no data or interactive elements, serving as a basic template for starting with D3.

Loading thumbnail…

Bar Graph in D3

This bar graph visualizes the maximum player counts for video games by year from 2004 to 2008, with each year represented as a horizontal bar. The visualization uses D3 v7’s `csv`, `scaleLinear`, and `scaleBand` APIs to load data from a GitHub-hosted CSV file and map values to SVG rectangles. The chart includes labeled axes, with years on the y-axis and player counts on the x-axis, and uses `axisLeft` and `axisBottom` for tick marks. The bars are styled with a steelblue fill via CSS.

Loading thumbnail…

Scatter Plot in D3

This scatter plot visualizes the maximum number of players for various games by year from 2004 to 2008, using data loaded from a CSV file. Circles represent each data point, positioned via `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The SVG rendering includes labeled axes, grid lines, and a title, all styled with CSS. The code uses D3 v7’s modular imports and follows a tutorial by Curran Kelleher.

Loading thumbnail…

Assignment 3 - Box Plot - P5.js

This example presents a box plot visualizing earthquake magnitudes across South American countries, with the chart drawn using P5.js. The visualization displays statistical quartiles, median, and minimum/maximum values for the dataset. The code loads earthquake data from a CSV file hosted on GitHub using P5.js’s `loadTable` function, then manually renders the box plot elements—including the box, whiskers, and dashed lines—through canvas drawing commands like `line()` and `rect()`. Axis labels and rotated text are also drawn using P5.js text functions, while the data is mapped to screen coordinates via `map()`.

Loading thumbnail…

Assignment 3 - Histogram - P5.js

This visualization displays a boxplot of billionaire ages from the billionaires.csv dataset, summarizing the distribution through quartiles, median, and outliers. It highlights the interquartile range with a colored rectangle, extends whiskers to the upper and lower fences, and marks outlier values as grey circles. Built with p5.js, the sketch loads the CSV in `preload()`, calculates statistical measures in `cleanData()`, and renders interactively in `draw()`. A tooltip appears when the mouse hovers over the box, revealing the computed five-number summary values.

Loading thumbnail…

Fork of Scatter Plot

This example displays the text “Hello D3 version 7” as a large, centered message on a blank page. It demonstrates the basic setup for starting a project with D3 version 7, using the `d3.select` method to target the body element and set its text content. The code loads D3 from the unpkg CDN and includes a separate `bundle.js` script for the main logic. The page uses minimal CSS for centering and font sizing, with no data or interactive elements present.

Loading thumbnail…

Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of video game data, mapping each game’s maximum number of players to bar length and its release year to vertical position. The bars are rendered as SVG rectangles with a steelblue fill, using D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the scales and axes. Data is loaded asynchronously from a CSV file via `d3.csv`, then parsed and bound to the visualization. The chart’s margins and inner dimensions are calculated explicitly to position the plotting area.

Loading thumbnail…

Fork of Bar Chart D3

This bar chart visualizes XYZ Foods stock prices over time, with dollar-labeled y-axis ticks and a year-based x-axis. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG `rect` elements for bars. Data loads from an external CSV file via `d3.csv`, with the chart rendered inside an SVG container.

Loading thumbnail…

Untitled

This visualization demonstrates a simple HTML page that displays the text “Hello HTML!” in large, centered type. Built using plain HTML and CSS, it loads the p5.js library and a separate sketch file, although no p5.js drawing or CSV data loading is actively implemented in the displayed output. The example serves as a minimal starter template for integrating p5.js into a React-based project, with the main visual being a static styled message.