JShellBach

@JShellBach·8 public vizzes

barGraph

This bar chart visualizes the popularity of music artists' labels, using data from the Wasabi API. The chart displays horizontal bars representing each label, with the bar length corresponding to the popularity sum. Users can sort the bars in ascending or descending order by clicking the corresponding buttons. The visualization is built with D3 v5, using `scaleBand` and `scaleLinear` for the axes, and employs SVG rendering for the graphics.

Nov 17, 2022

Loading thumbnail…

Fork of barGraph

This bar chart displays the 2022 population for each country, sourced from a CSV file with population data from 1970 to 2022. Users can reorder the bars by clicking the "Ascending" or "Descending" buttons, which re-sort the data and trigger transitions that animate the repositioned rectangles. The chart is built with D3.js (v5), using `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `transition().duration(500)` method for animated updates, rendered as an SVG.

Nov 17, 2022

Loading thumbnail…

LabelD3JS

This visualization displays the popularity of music record labels through a horizontal bar chart, using data fetched from the Wasabi API. The chart ranks labels by their aggregated popularity sum, with each bar’s length proportional to that value. Built with D3 v6, the code uses `d3.json` to load data, `d3.scaleLinear` and `d3.scaleBand` for axes, and appends SVG rectangles for the bars. The example serves as a basic D3 demonstration, showing how to bind data to visual elements and render a quantitative comparison.

Nov 15, 2022

Loading thumbnail…

Maps-Exemple

This example displays a choropleth map of world countries colored by population estimates, with hover highlighting and zoom/pan interaction. It uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render SVG paths from TopoJSON data loaded from the world-atlas package, while population values and country names come from a supplementary TSV file. A linear `d3.scaleLinear` maps population magnitudes to a red color ramp, and the `d3.zoom` behavior applies transforms to all country paths.

Oct 10, 2022

Loading thumbnail…

dboard

The dashboard displays sales data from a CSV file, using a small multiple of four SVG plots to visualize metrics like order amounts by category, product, and region. The code leverages D3 version 6 to parse the data, scale axes, and render stacked bar charts, with a color palette distinguishing revenue segments. Tooltips are implemented via HTML elements, and the layout is managed through a CSS grid, while the chart dimensions and margins are explicitly defined in the JavaScript.

Oct 3, 2022

Loading thumbnail…

Fork of D3 functions

This example demonstrates a fork of D3 functions, showing how the enter, update, and exit selections manage SVG circle elements as data changes. Two buttons trigger transformations: "Remove" pops the last item from an array, while "Modify" uses a random splice to replace a data point. The code uses d3.select, scaleLinear, and the data join pattern with merge and exit methods, rendering steelblue circles that turn red when removed. The visualization is built with d3.v5 and SVG, with data defined as x/y coordinate pairs.

Oct 3, 2022

Loading thumbnail…

Fork of MIAGE base

A bar chart displays the 2022 population for countries worldwide, sorted alphabetically by country name along the x-axis. The chart reads population data from a local CSV file and renders it as SVG rectangles using D3 v4. The y-axis uses a linear scale, and the x-axis is a band scale with rotated labels for readability. A button triggers sorting of the bars by country name.

Sep 26, 2022

Loading thumbnail…

Graph MIAGE base

This example displays a scatter plot of global population data for 2022, filtering by country and rendering the points within an SVG canvas. It uses D3.js v5 to load the data, which is imported from a local CSV file. For each country, a circle is appended to the SVG group, and its position is based on the population value. The code demonstrates how to combine D3's data loading with custom layout logic, while also showing the use of a separate ES6 module to display a static message.

Sep 19, 2022