M

Mar-99

@Mar-99·38 public vizzes

Loading thumbnail…

Family Tree

A D3.js v5 family tree visualizes hierarchical relationships with colored nodes and horizontal links, using SVG rendering and animated transitions. The tree layout (`d3.tree`) positions nodes, while `d3.hierarchy` converts the JSON data from `data.js` into a traversable structure. Users can click nodes to collapse or expand branches, triggering smooth animations via `transition()`. Zoom and pan functionality is implemented with `d3.zoom`, and drag gestures are detected on node groups. Node colors derive from the data object, and labels display names with dynamic sizing based on text length.

Loading thumbnail…

Argentina Map

A Choropleth-free map of Argentina displays all departmental boundaries, colored with a solid red fill and blue ocean background, with hover effects turning regions pink. The visualization uses a Transverse Mercator projection via `d3.geoTransverseMercator`, rendered through `d3.geoPath` into SVG. TopoJSON data from the departamentos_argentina GitHub repository feeds the paths, while `d3.zoom` enables pan and zoom interactions.

Loading thumbnail…

World Map

An interactive orthographic world map displays landmasses and country borders, with the globe rotating in response to mouse movement. Built with React and D3 v5, it uses `d3.geoOrthographic` and `d3.geoPath` to project and render GeoJSON features derived from the world-atlas TopoJSON dataset. The graticule and interior boundaries are drawn via `d3.geoGraticule` and TopoJSON mesh, while mouse coordinates trigger projection rotation through React state. The SVG output is styled with distinct colors for land, borders, and the surrounding sphere.

Loading thumbnail…

Fork of ICE8 - Social Network Graph

A force-directed social network graph visualizing friendship ties among nine people. Nodes are yellow circles with name labels, connected by black lines with arrow markers. The layout uses `d3.forceSimulation` with link, charge, collision, and center forces, rendering in SVG. Interactions include dragging nodes and highlighting on mouseover via a CSS class. Data comes from a JSON file containing node IDs and link relationships.

Loading thumbnail…

Fork of Family Tree by using html

This visualization displays a hierarchical tree of human blood groups, showing major types (A, B, AB, O) branching into their positive and negative variants. Nodes are represented as red circles with white labels, connected by animated black links that draw on load. The example uses d3.stratify and d3.tree to compute the layout, with SVG circles and paths rendered via D3 v6 selections. Transitions animate the path drawing and circle radius expansion over 700-900 milliseconds. Node colors vary by depth, and the entire graphic scales to fit the browser window.

Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This choropleth map shows the concentration of PM2.5 air pollution across US counties from 2000 to 2018, with an animated play button and slider enabling temporal exploration. County colors encode pollution levels using a sequential YlGnBu scale, while state boundaries highlight administrative context. The visualization is built with React and D3 v5, using `geoPath` with `geoIdentity` projection to render SVG county shapes from US Atlas TopoJSON, with data from a CSV of county-level PM2.5 measurements.

Loading thumbnail…

Fork of Global Suicide Rates Linked Views with Fast Brushing

This visualization combines a bubble map and a linked time-series histogram to explore global suicide rates over time. The map renders suicide counts as semi-transparent red circles using a square-root size scale, while a brushed time range filters the displayed bubbles. The histogram uses `d3.brushX` to select date ranges, with data binned by month and summed. Built with React and D3 v5, it employs `d3.geoNaturalEarth1` for projections, `d3.geoPath` for country boundaries, and loads country shapes from World Atlas TopoJSON alongside city-level CSV data.

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, rendered as SVG using React and D3 v5. It shows the full sphere and landmasses colored in teal, with interior country borders and graticule lines in lighter strokes. The visualization loads World Atlas TopoJSON data from unpkg, converting it to GeoJSON features and a mesh with the topojson library. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw the sphere, land, and border paths.

Loading thumbnail…

Fork of Fork of Line Chart

This example shows a line chart of sales over time, with axes labeled "Year" and "Sales," rendered as an SVG inside an HTML page. The visualization uses d3.scaleTime and d3.scaleLinear to map data to pixel coordinates, d3.axisBottom and d3.axisLeft for tick marks and labels, and d3.line to generate the red path. Data is loaded as CSV from a GitHub gist, with years parsed via d3.timeParse. The code also references a React starter, though the displayed version runs with vanilla JavaScript and D3 v5.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This pie chart displays the top ten cricketers by total runs, with each slice’s size proportional to the player’s run count and a color-coded legend listing names and values. The visualization loads data from a JSON file and uses d3.pie to compute angles, d3.arc for path generation, and d3.scaleOrdinal with schemeCategory10 for colors. It renders as an SVG, featuring labeled legend entries formatted with d3.format.

Loading thumbnail…

Fork of Fork area

This area chart visualizes the population of China over time, using a smooth basis curve to fill the space between the x-axis and the data line. The visualization employs D3’s `area`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render the SVG, with labeled axes and a title. Data is loaded from a remote CSV file, parsed, and mapped to date and numerical values for plotting.

Loading thumbnail…

Fork of rt_facebook_users

This visualization shows the annual number of Facebook users from 2008 to 2017 as a line chart. It uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with d3.axisBottom and d3.axisLeft to render the gridlines and tick labels. The line is drawn using d3.line, and data is loaded from a CSV file hosted on GitHub Gist. The SVG rendering includes axis labels, a title, and custom styling from a separate stylesheet.

Loading thumbnail…

Fork of India CO2 emissions

This visualization shows India’s annual CO2 emissions per capita over time as a smooth filled area chart. The area’s height encodes emission values across years, with axes labeled for clarity. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for positioning, `area` with `curveBasis` for the smooth shape, and `axisBottom`/`axisLeft` for gridlines. The data loads from a CSV hosted on GitHub Gist, with the SVG rendering and styling handled via `select`, `csv`, and CSS classes.

Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

A scatter plot of time-series data from the Iris Dataset, showing Value over Time for each observation. D3's `scaleLinear` maps data to SVG coordinates, with axes rendered by custom components. The `Marks` component draws a black line connecting points and circles with tooltips using `d3.line`. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the visualization is built with React and rendered as SVG, styled with the Poppins font.

Loading thumbnail…

Fork of ICE 7- Line Chart

This line chart shows automobile sales in India from 1999 to 2012, plotting yearly values as a blue path against time-based and linear scales. The visualization loads CSV data from a GitHub gist using d3.csv, then renders an SVG with d3.axisBottom and d3.axisLeft for labeled axes, while a d3.line generator creates the path. The React component uses d3.scaleTime and d3.scaleLinear to map data to pixel coordinates, with margins and tick formatting handled through d3-selection.

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage sales of different items in a pie chart, with a legend displaying each item’s name and corresponding value. Built with D3 v5, it loads data from a CSV hosted on GitHub, converts sales values to numbers, and uses `d3.pie()` and `d3.arc()` to generate the SVG path segments. Colors are assigned via `d3.scaleOrdinal`, while the legend is manually created with appended rectangles and text. The chart is rendered entirely in SVG, with a fixed width and height, and no interactive behavior.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes 2022 U.S. auto sales by brand, with each slice’s size proportional to its year-to-date sales figures. The code loads data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate SVG paths for the chart. A `d3.scaleOrdinal` maps sales values to distinct colors, while a legend displays brand names and formatted sales totals using `d3.format`. The visualization is rendered entirely as SVG within an HTML page, with styling applied through an external stylesheet.

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example shows the percentage of sales for different items using a pie chart with a color-coded legend. The chart is rendered as an SVG, with each slice’s arc and fill color generated via `d3.arc()` and `d3.scaleOrdinal()`. Data is loaded asynchronously from a CSV URL using `d3.csv`, and the legend displays each item’s name and sales percentage, formatted with `d3.format`. The visualization relies on D3 v5 and a custom `bundle.js`, with the pie layout computed by `d3.pie()`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates an interactive scatter plot of the Iris flower dataset, cycling through four different variable pairings every two seconds. Each circle's color encodes the species, with a legend identifying the three categories. Built with React and D3 v6, it uses `d3.csv` for data loading, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for the coordinate axes. The visualization renders as SVG with CSS animations, transitioning between views via `setInterval`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart illustrates the top 10 countries with the highest number of deaths in 2020 attributed to air pollution, sourced from a CSV file fetched via a gist URL. It displays data labels and a legend showing each country’s death count in thousands. Built using D3 v5, the visualization employs `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` APIs to generate the SVG arcs, sections, and text. The chart uses distinct colors for each segment and includes a formatted legend with color swatches and value annotations.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris dataset, visualizing relationships between petal and sepal measurements across three flower species. The visualization cycles through different variable pairings every two seconds, updating the axes and point positions accordingly. Built with reusable D3 components, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `extent` from D3 6.7.0, using SVG rendering with animated transitions and a color-coded legend for species identification.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. Built with D3 v6, the visualization cycles through different variable pairings every two seconds using a reusable chart pattern. The SVG marks use the `d3.scaleLinear` and `d3.scaleOrdinal` APIs, with axes generated by `axisBottom` and `axisLeft`. A legend identifies the three species, while a `setInterval` loop updates the x and y value functions to animate through the dataset’s four numeric columns.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. It uses d3.csv to load data from a GitHub Gist, d3.scaleOrdinal for color mapping, and d3.scaleLinear for axes. A setInterval cycles through different variable pairings every two seconds, animating the chart via reusable scatterPlot component that updates SVG circles.

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

Loading thumbnail…

Fork of Pie chart ICE7

This visualization shows the top five states by Democratic vote count from a cocoa-related dataset, displayed as a pie chart with state names positioned inside each slice. The chart uses D3 v6’s `pie` layout, `arc` generator, and `scaleOrdinal` with `schemeCategory10` for colors. Data is fetched via `d3.csv` from a GitHub Gist, sorted, and sliced to the top five entries. Each slice’s label uses an `arc` with a reduced inner radius to place text via `label.centroid`. The SVG is centered with CSS.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot explores the Iris flower dataset, cycling through different sepal and petal measurement pairs on the axes every two seconds. The visualization uses the D3.js library's `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a custom reusable `scatterPlot` module, rendering data points as colored circles in SVG. Species are distinguished by a color scale using D3's `scaleOrdinal`, and a legend identifies the three iris types. The chart updates its axis labels and point positions dynamically through a `setInterval` timer.

Loading thumbnail…

Fork of ice - 7

A scatter plot animation displays the Iris dataset, with points colored by species (setosa, versicolor, virginica) in orange, green, and brown. The plot cycles through different x-axis attributes every two seconds using a `setInterval` callback, alternating between petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed to sepal length. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles dynamically. The SVG fills the browser window, styled with the Share Tech font.

Loading thumbnail…

Fork of ICE7 Line Chart

This visualization displays the growth of COVID-19 cases in Cameroon over time using a red line chart, with the date on the x-axis and case counts on the y-axis. The chart employs D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render an SVG with gridlines and labeled axes. Data is loaded from a CSV file via `d3.csv`, and the line path is generated from the parsed dataset.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, using horizontal bars to compare populations. Built with D3 v5 and React, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles in the `Marks` component. The data originates from the UN World Population Prospects 2019, formatted with D3’s `format` to abbreviate large numbers. Axes are drawn explicitly via `AxisBottom` and `AxisLeft`, with a "Cocoa" axis label overlaid.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the Iris Dataset as an animated scatter plot, cycling through four different feature combinations every two seconds. The visualization is constructed using D3.js version 6.7, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG circle positions. The plot is rendered as a full-window SVG, with data loaded from a CSV file hosted on GitHub. A reusable `scatterPlot` charting function encapsulates the rendering logic, allowing dynamic updates of the x-axis mapping without rebuilding the entire visualization.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from two dropdown menus. Built with React and D3 v5, it renders SVG circles and axes using components like `scaleLinear` for scaling and `extent` for domains. The visualization updates dynamically through React state management, with dropdowns provided by ReactDropdown, and styling applied via Poppins typography.

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, based on United Nations World Population Prospects 2019 data. React components render SVG axes and marks using d3.scaleBand and d3.scaleLinear, with d3.format for tick labels converting billions to “B” notation. The chart uses CSV data loaded via d3.csv, styled with a Poppins font and teal bars, and includes a tooltip via SVG `<title>` elements.

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

This example visualizes the average share of renewable energy production from 2000 to 2020 across EU member states as a bar chart. It uses p5.js to render the visualization, drawing axes, ticks, and bars on a 960×500 canvas. The data is loaded from a CSV file via `loadTable()` in the `preload()` function, with bar heights scaled proportionally to the axis dimensions. The code includes custom functions for axis labels, tick marks, and bar drawing, with a green fill for each bar.

Loading thumbnail…

Fork of Fork of Stacked bar chart of Yelp data: top cities

This stacked bar chart visualizes the distribution of ten cuisine types across the top ten Yelp cities (excluding Boston), showing the number of four-star-or-above restaurants in each. Each horizontal bar represents a city, segmented by cuisine, with a legend mapping the color scheme. The chart uses d3’s `scaleBand` and `scaleLinear` for axes, `stack` to aggregate data, and `scaleOrdinal` for categorical colors. Tooltips reveal exact counts per segment, and the SVG is rendered with d3’s selection and append methods. Data comes from a CSV file loaded via `csv`.

Loading thumbnail…

Fork of Fork of ICE-5

This example displays the size, row count, and column count of a CSV dataset in a styled web page. It loads data from a remote gist URL using D3 v7’s `d3.csv`, then computes the formatted data length in kilobytes with `d3.csvFormat`, and presents the results in a `<pre>` element. The page also includes decorative inline SVG artwork and custom CSS styling for a colorful background and headings.

Loading thumbnail…

Fork of Tweak a Face Assignment by Enze Liu

This example creates a panda face using D3's arc generator and React. It shows the face constructed from geometric primitives: two arcs for eyes, two ellipses for eye sockets, an arc for the nose, two circles for blush, two arcs for the mouth, and two arcs for ears. The SVG renders on a white background with a black stroke. The code uses `d3.arc` for all arc-based shapes and React DOM to render the SVG elements. The face is centered using translation transforms, with a custom color for the face.

Loading thumbnail…

Fork of Intro D3

This example shows a cartoon face built from SVG shapes—a yellow circle head, eyes, eyebrows, and an arc-based mouth—centered and animated with D3 transitions. The code uses d3.arc to generate the mouth path, while d3.select and d3.transition animate the eyebrow group’s vertical offset over two alternating two-second phases, creating a blinking or winking effect. Rendered via d3.v6 in a React-free HTML page, it demonstrates basic shape composition and chained transition.attr methods.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A yellow smiley face rendered with React and SVG centers on a canvas, with stylized eyes and a cartoon mouth overlaid as separate components. The face itself is a simple yellow circle with a black outline, while the eyes and smile are complex vector paths and ellipses defined in the `Eyes.js` and `Smile.js` files, filled with gradients and solid colors. The React code assembles these SVG parts, applying transforms for positioning and scaling, while CSS classes define the fill colors for each path segment.