Skip to main content
Log in
G

GinnWG

@GinnWG·15 public vizzes

Loading thumbnail…

new

This example visualizes the number of Deezer fans for an artist’s albums as a bar chart, with buttons to reorder the bars by fan count or release date. It loads album data from the Wasabi API and renders animated SVG bars using d3.scaleBand and d3.scaleLinear, with transitions for updates. The chart includes an axis, rotated labels, and a tooltip that shows album title and fan count on hover. Sorting and filtering logic is implemented with custom JavaScript functions.

Dec 2, 2022
Loading thumbnail…

Fork of barGraph TD1 correction

This visualization shows global population rankings for 2022 using a bar chart and scatter plot overlay, with buttons to reorder the data by ascending or descending population. It uses D3 v5 to load a CSV file and render SVG elements, with transitions animating the bars and circles when the sort order changes. The code relies on d3.scaleBand, d3.scaleLinear, axis generators, and rect/circle selections, while a styled tooltip appears on mouseover via the div.tooltip element.

Dec 2, 2022
Loading thumbnail…

TP_dataviz Projet

This example displays the number of Deezer fans for each album by a specific artist as a bar chart. Users can sort the bars in ascending or descending order using two buttons, with transitions animating the updates. The visualization fetches data from the Wasabi I3S API, and uses d3.scaleBand and d3.scaleLinear for the axes. Tooltips appear on mouseover to show album titles and fan counts. The code relies on D3 v4 selections, transitions, and event handling.

Dec 2, 2022
Loading thumbnail…

lolipop

This lollipop chart displays the top 20 albums by Deezer fan count for artists located in the United Kingdom, using data from a local JSON file. Each album is represented by a vertical line and a circle, with the y-axis encoding fan numbers. The visualization is built with React and D3 v4, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG rendering. The code sorts the data descending and selects the top 20 entries before updating the chart.

Dec 1, 2022
Loading thumbnail…

Fork of TP_dataviz Projet

This example shows a lollipop chart comparing the number of Deezer fans per country, with each country represented by a vertical line and a green circle marker. The chart uses D3 v4 to load JSON data from `data.json`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG elements using `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to determine the domain.

Nov 30, 2022
Loading thumbnail…

Fork of Yeesir

An interactive bar chart of word frequencies displays the ten most common non-stopwords from an artist's song lyrics. Users select an artist from a dropdown, which fetches JSON data from the Wasabi API; the visualization updates with animated transitions. The code uses D3 v5 selections, `scaleLinear` and `scaleBand` axes, and line-and-circle marks, all rendered as SVG elements.

Nov 30, 2022
Loading thumbnail…

Untitled

Three bar charts show categorical values for groups A, B, and C, with a button-driven transition between two predefined datasets. Using d3.v4 with React, the visualization renders SVG rectangles that animate their heights and positions over one second via `transition()`. The y-axis scale is fixed from 0 to 20, while the x-axis uses `d3.scaleBand`. Clicking the buttons calls an `update` function that rebinds data and triggers the smooth visual change.

Oct 31, 2022
Loading thumbnail…

dboard

dboard presents a sales dashboard for a US superstore dataset, displaying four coordinated visualizations: a pie chart of sub-category sales, a bar chart of category sales, a scatter plot of sales over time, and a geographic map of sales by state. Built with React and D3 v6, it renders SVG elements with animated transitions between views, using `d3.pie`, `d3.arc`, `d3.scaleBand`, `d3.scaleTime`, and `d3.geoAlbersUsa` with `d3.geoPath`. Tooltips on hover reveal customer and product details.

Oct 10, 2022
Loading thumbnail…

Fork of Making a barchart

This bar chart shows total sales by product category, using data loaded from a CSV file. The visualization is built with D3 v6 and rendered as SVG, applying linear scaling to sales values and band scaling to categories. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with each rectangle’s height and width determined by the data values. The data is preprocessed by converting sales strings to numbers.

Oct 10, 2022
Loading thumbnail…

Barchart

This example displays a minimal HTML page that renders the text "Hello HTML!" as a static message. It uses CSS to style the message with a large font size and center alignment, while the body contains a single div element. The code relies on plain HTML and CSS, with no JavaScript libraries or data sources involved. It serves as a simple demonstration of basic web page structure and styling within a React starter context.

Oct 10, 2022
Loading thumbnail…

Fork of map exemple

This choropleth map visualizes global population estimates, with each country filled in a dark red gradient according to its population. The visualization uses the `topojson` library to extract country features from a GeoJSON file and renders them with `d3.geoPath` and a Mercator projection. Population data is loaded from a TSV file, and color is assigned via `d3.scaleLinear`. A zoom interaction, implemented with `d3.zoom`, adjusts the paths’ transform on zoom events.

Oct 10, 2022
Loading thumbnail…

TD2 new

This visualization presents a stacked bar chart that breaks down the number of orders by product category using the provided Superstore sales data. The chart displays three categories on the x-axis, with each bar segmented to show the proportions of different subgroups. Built with D3 v4 within a Vue framework, the code uses `d3.csv` to parse the data, `d3.stack()` to structure the stacked segments, and `d3.scaleBand` and `d3.scaleLinear` for positioning. The SVG output is rendered into a grid layout with four plot areas, though only the first plot is populated in this example.

Oct 3, 2022
Loading thumbnail…

Fork of barGraph

A bar chart displays each country's 2022 population, loading tabular data from a CSV file. Hovering over a bar triggers a tooltip showing the country name and population value. Clicking a button re-sorts the bars by population using a transition on x positions. The visualization is built with D3 v5, using `csv`, `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and positional transitions.

Oct 3, 2022
Loading thumbnail…

Fork of MIAGE base-TD1

An interactive D3.js example displays a cluster of colored circles on an SVG canvas, with a button and rectangle that trigger animation and mouseover effects. The circles, including a red one that turns black on hover, respond to user interaction, while a yellow circle changes color on mouseover. The code imports from D3 and local ES6 modules, uses SVG attributes for positioning, and demonstrates transitions with `transition().duration()` for animated movement.

Sep 20, 2022
Loading thumbnail…

begin

This example shows a simple interactive page built with raw HTML, CSS, and JavaScript. A yellow circle with concentric black-and-white inner circles is rendered inside an SVG canvas, with a bold "Click me" button above it. The button calls the JavaScript function `myfunction()`, though the function body is empty and no behavior is triggered on click. The page uses a 960-pixel-wide SVG with thick black strokes, styled using a CSS class for the large message text. The React Starter framework is referenced but not actually implemented in this file.

Sep 20, 2022