A

ABCDB15

@ABCDB15·23 public vizzes

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes a dataset of academic metrics, allowing users to switch between variables like citations, research, and teaching for both axes. Built with D3 v6, it uses reusable chart and menu components, with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for rendering. The plot animates transitions via `d3.transition` when axes change, with circles growing on entry and repositioning smoothly. Data loads from an external CSV, and menus dispatch change events to update the plot’s x and y value accessors.

Loading thumbnail…

Word Cloud

This interactive word cloud visualizes the frequency of family and first names from JSON datasets, allowing users to switch between them via toolbar buttons. D3 v3 and the d3.layout.cloud plugin render the most frequent terms as SVG text elements, with font size scaled linearly by occurrence count and colors assigned from a category scale. The layout uses the cloud algorithm to position non-overlapping words with random horizontal or vertical rotation before drawing them via SVG.

Loading thumbnail…

Social Network Graph

A social network graph visualizes friendship connections among eight people, with directed arrows showing relationships and yellow circular nodes representing each person. The layout uses a D3 force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and centering forces to position nodes. Interactive drag behavior lets users move nodes, while hovering highlights them via CSS class changes. The graph is rendered as SVG with data loaded from a JSON file, using D3 v6.

Loading thumbnail…

Family Tree_lewis

This example shows an interactive family tree visualization built with D3.js, displaying hierarchical relationships among family members using a collapsible tree layout rendered as SVG. The visualization loads JSON data containing the family structure and renders each person as a colored, clickable node connected by labeled links, with names and relationships displayed inline. Using D3 v3’s tree layout, the code dynamically computes node positions, applies zoom and drag behavior via `d3.behavior.zoom`, and animates node expansions and collapses with `transition.attrTween`. Tooltips appear on hover, and the tree supports mouse-wheel zoom and panning for exploration.

Loading thumbnail…

Swedish map

A choropleth map of Swedish counties rendered as SVG paths, colored in a dark red with light gray borders. The map uses a Mercator projection fitted to the county boundaries, with internal borders highlighted in purple. The visualization is built with React using d3.geoPath for projection and path generation, and topojson’s feature and mesh functions to extract county polygons and interior boundaries from a TopoJSON dataset. The code includes commented-out options for an equal-earth projection and for scaling/centering the map, but the active projection uses d3.geoMercator.

Loading thumbnail…

world map_8

This example displays a world map using a natural Earth projection, rendering countries as filled SVG paths. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` for geographic projection, with TopoJSON’s `feature` method to convert world atlas data from `world-atlas@1.1.4` (110m resolution) into GeoJSON. Each country is drawn as a path with a teal fill and brown stroke, while a hover effect is implied via CSS. The SVG canvas is 960 by 500 pixels, and the map is centered without additional interaction.

Loading thumbnail…

family tree

This interactive family tree visualization displays hierarchical relationships using collapsible nodes and animated transitions. Built with D3.js and jQuery, it renders an SVG tree with color-coded node types (blue, green, yellow, purple) and directional links labeled as SYNC or ASYN. The layout computes node positions dynamically via D3’s tree layout, with zooming, dragging, and tooltip support. Data comes from a local JSON file, and the tree adapts its dimensions to the maximum breadth and depth of the hierarchy during traversal.

Loading thumbnail…

family tree

A family tree visualization displays a shuffled array as a hierarchical tree of nodes and links, with each node labeled by its array value and connected by parent-child relationships. It uses d3.stratify to convert flat data into a hierarchy and d3.tree to compute the layout. The SVG rendering animates text labels with variable durations based on node depth, while circles and paths are updated dynamically via data joins.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This fork of a D3.js area chart visualizes carbon emissions in Rio de Janeiro from 2010 to 2015. The chart combines a smooth, black line with a shaded area beneath it, using a basis curve for interpolation. Rendered as SVG, the visualization employs D3’s `scaleTime` and `scaleLinear` for axes, with `line` and `area` generators to draw the data. Data is loaded from a CSV file hosted on GitHub and parsed with D3’s `csv` function. Axis labels are styled with custom CSS, and grid lines are rendered using `axisBottom` and `axisLeft`.

Loading thumbnail…

Line7

This line chart visualizes carbon emissions in Rio from 2010 to 2015, drawing on a CSV dataset. Using D3 v5, it encodes time on the x-axis with `d3.scaleTime` and emission values on the y-axis with `d3.scaleLinear`. The SVG rendering includes axes, grid lines, labels, and a purple line path generated via `d3.line`. Data is loaded asynchronously with `d3.csv` from a GitHub gist.

Loading thumbnail…

line graph_7

This example shows US auto sales from 2008 to 2015, plotting the selling price over time as a red line. The visualization uses D3.js v5 with an SVG rendering, leveraging `scaleTime` for the x-axis and `scaleLinear` for the y-axis. Data is loaded from a CSV file hosted on GitHub using `d3.csv`. The chart includes labeled axes, grid lines via tick marks, and a title, with the line path generated using `d3.line` and scaled points from the parsed date and numeric values.

Loading thumbnail…

piechart_7 lewis

This pie chart displays the 2020 US car selling prices for different car models, with each slice representing a car and its corresponding price, along with a legend labeling each car name and its value. The visualization is built using D3.v5, loading CSV data via `d3.csv` from a Gist URL. The chart leverages D3's `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG segments, with a custom color palette and formatted price labels showing values in thousands. The SVG output includes both the pie chart centered on the canvas and a legend positioned to the right.

Loading thumbnail…

Piechart_7

This pie chart displays 2022 US auto sales by brand, with each slice sized by year-to-date sales and a legend identifying brands and their sales in thousands. The visualization uses D3 v5 APIs including `d3.pie` for computing arc data, `d3.arc` for generating SVG paths, and `d3.scaleOrdinal` for categorical color assignment. Data is loaded from a CSV file hosted on GitHub Gist via `d3.csv`, and rendered as SVG within a 960x500 canvas with a legend positioned to the right.

Loading thumbnail…

barchat_7 lewis

This example shows the top 10 countries by deaths from air pollution in 2020 using a pie chart with a legend. It uses d3.pie and d3.arc to generate the chart segments, with d3.scaleOrdinal assigning colors and d3.format for tick labels. The data is fetched as CSV from a GitHub gist using d3.csv. The chart renders in SVG, with each slice labeled by its value in thousands and a legend listing countries alongside their corresponding death counts.

Loading thumbnail…

lewis_scatterplot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings every two seconds. It uses D3 v6 with a reusable `scatterPlot` module that scales linear axes and renders circles. The code explicitly draws colored circles with `d3.scaleOrdinal` for species, applies `setInterval` to update the x-value, and includes an SVG legend.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, with each point representing a flower specimen. The visualization cycles through four different attribute combinations (petal width, sepal width, petal length, and sepal length) as x-axis values every two seconds, while the y-axis remains fixed to sepal length. Built with D3 v6, the example uses the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the plot and axes, and employs D3's `join` feature for efficient SVG element updates. Data is loaded from a remote CSV file and parsed into numerical values, rendered as SVG circles with the Share Tech font.

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through four feature combinations on the x-axis while keeping sepal length on the y-axis. Data points are colored by species, and a legend identifies each category. The visualization uses D3 v6 with SVG rendering, employing reusable chart functions and `setInterval` to update the axis scales dynamically. The code leverages D3's `csv` loader, `scaleLinear`, and `axisBottom` APIs to construct the interactive graph.

Loading thumbnail…

ICE-6.1

This bar chart displays the top 10 car models by selling price, sourced from a CSV file fetched via D3's `csv` function. Using React with D3 v5, the code maps car names to a band scale and prices to a linear scale, rendering red horizontal bars. Axes are drawn with `scaleLinear` ticks and `scaleBand` domains, and the SVG output highlights the comparative pricing of each vehicle.

Loading thumbnail…

Iris Dataset Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis. Each circle represents an individual flower, with color indicating species: black for setosa, green for versicolor, and yellow for virginica. The code uses d3.csv to load the data, then applies d3.scaleLinear with d3.extent for axes, rendered via d3.axisLeft and d3.axisBottom. The SVG circles are positioned using this scaling, and text labels for axes are appended manually.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example shows how to load and parse CSV data from a GitHub gist using D3.js, displaying the results in a styled HTML page. The code uses `d3.csv` to fetch the car dataset and visualizes the loading process with a large message container. The page features a bold red background, a title about learning data parsing, and an embedded SVG image. The example demonstrates the basic workflow of fetching external tabular data and integrating it into a webpage, with CSS styling applied to the header and preformatted text elements.

Loading thumbnail…

Smiley lewis

A yellow smiley face is rendered as an SVG, featuring grey circular head, two black eyes, an orange triangular nose, and a curved black mouth. The face is built using React components and D3’s `arc` generator to define the mouth path. D3 v5 calculates the arc’s inner and outer radii, while React manages the SVG elements and JSX structure, positioning the facial features relative to the SVG center.

Loading thumbnail…

Fork of Hello LEWIS

This example shows a stylized smiley face built from modular React components, rendered as SVG. The face consists of a yellow circular background, two black eyes, and a mouth drawn as an arc using D3’s `arc()` generator with specified inner and outer radii. Each part—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—is a separate React function component, composed together in `Face`. The `FaceContainer` sets the SVG dimensions and translates a group to center the face, while D3 v7 handles the arc path generation.

Loading thumbnail…

Fork of Smiley Face Part III

A fork of the Smiley Face example renders a large yellow face as an SVG using React and D3’s `arc` generator to shape the mouth and eyebrows. The eyes, nose, and hair are defined as basic SVG shapes, with the left and right eyebrows rotated and translated via group transforms, and the mouth drawn as two concentric arc paths. D3’s `arc` API computes the path data for the mouth and eyebrow arcs, while React manages the component structure and SVG attributes.