Indira120

@Indira120·8 public vizzes

Project circularPacking

A zoomable circular packing diagram displays hierarchical music-genre data, with artists as leaf nodes sized by fan count and color-coded by depth. The visualization uses D3 v5’s `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to animate transitions between parent and child clusters on click, with tooltips showing artist names and fan counts on hover. Rendered as SVG, it imports D3 via a CDN and is built within a Vue framework.

Dec 4, 2022

Loading thumbnail…

dboard

This dashboard presents a multi-panel view of sales data from a CSV file, showing sales by category in a bar chart, a geographical map of the US, a time series scatter plot, and a donut chart of sub-category sales. The bar chart is interactive; clicking a category filters the accompanying charts and updates the donut chart, which is rendered using `d3.pie()`. The code employs D3 v6 functions like `d3.rollup` for data aggregation and `d3.axisBottom` for axes. Visual elements are drawn as SVG primitives, with interactions driven by mouse events and tooltips.

Dec 3, 2022

Loading thumbnail…

test

This example shows the hierarchical structure of the Flare visualization toolkit as a circle-packing layout, with nested circles representing the file system’s categories and leaf nodes sized by their associated data values. Hovering over any circle highlights its entire ancestor chain. The visualization is rendered in SVG using D3 v5’s `d3.stratify` to build the hierarchy from CSV data, `d3.pack` to compute circle positions and radii, and `d3.scaleSequential` with the magma color interpolator to encode depth.

Nov 30, 2022

Loading thumbnail…

Fork of barGraph

This example shows a bar chart of country populations, which can be sorted in ascending or descending order via buttons. The chart uses D3's `scaleBand` and `scaleLinear` for axes, and displays tooltips with population and country names on hover. Data is loaded from a CSV file using `csv`, and the SVG rendering uses D3's `select`, `axisBottom`, and `axisLeft`. The code is written as an ES6 module, importing functions like `max` and `scaleBand` directly from D3.

Oct 3, 2022

Loading thumbnail…

Fork of map exemple

This visualization displays a choropleth map of world population estimates, using darker reds to represent higher population counts. It employs d3.geoMercator and d3.geoPath to project and render country boundaries from the world-atlas TopoJSON dataset, with d3.scaleLinear mapping population estimates to fill colors. The map supports zooming via d3.zoom, and hover effects change country fills to purple. Population data is loaded from a TSV file and matched to country features by ISO numeric codes.

Oct 3, 2022

Loading thumbnail…

Fork of MIAGE base

This example demonstrates how to build interactive SVG graphics using D3.js v5, showing basic shape drawing, styling, and event handling. Three separate exercises display circles with different colors and positions, while a fourth adds mouseover interaction that changes a circle's fill color. The visualization loads population data from a CSV file using D3's `csv` function and logs country names and population values to the console. The code imports D3 functions like `select` and `csv` from local ES6 modules, and uses D3's DOM manipulation methods to create and modify SVG elements.

Sep 28, 2022

Loading thumbnail…

Project Main

This example demonstrates data visualization through multiple chart types, including a bubble map, circular packing, line chart, and rose chart, all embedded within a single web page. The project loads D3.js v5 via UNPKG and uses ES6 modules, such as `myMessage.js`, to display a title. D3's `select` function manipulates the DOM to set message text. The visualizations leverage D3's core APIs for creating and rendering various chart layouts, with styles defined in a separate CSS file.

Sep 28, 2022

Loading thumbnail…

Fork of barGraph

This fork of barGraph displays population data rows from a CSV file as a series of uniform SVG rectangles, each sized to a fixed width and height but positioned by the order of the data. The example loads D3 via UNPKG and uses the `select` and `csv` functions from the D3 module to fetch the dataset, logging each country’s name and 2022 population to the console before rendering the bars. The visualization relies on D3’s selection and data-binding methods (`append`, `selectAll`, `enter`) to create the static bar elements within a 960 by 500 SVG canvas.

Sep 19, 2022