C

CarloWK1202

@CarloWK1202·37 public vizzes

Loading thumbnail…

Untitled

This example shows a scatter plot of 2018 movies, comparing their box office gross (x-axis) against their IMDb rating (y-axis). Each point is labeled with the movie title, and annotations in the four corners categorize the data into groups like "Higher Grossing, Higher Rating." The chart is built with Wijmo’s FlexChart, using an annotation layer for text callouts. Tooltips display the movie’s gross and rating, while the axes have custom origins and hidden labels to declutter the visualization.

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin by color, weight by size, and shows the model name on tooltip hover. The visualization uses the vega-lite-api library to construct the specification, with vega and vega-lite handling rendering to SVG. A custom config enhances readability with larger fonts and axis styling, while data loading relies on d3.csv from d3.v5.

Loading thumbnail…

D3 Quadrant

Four labeled quadrants—Assess, Adopt, Avoid, and Analyze—organize a scatterplot of fabricated data points, each colored by category and positioned by random percentage and count values. The D3 v7 visualization uses linear scales for both axes and avoids overlaps with the legend in the lower-right corner. SVG rectangles, text, and circles render the quadrants, labels, and legend items, while a CSS keyframe animation applies a marching-ants dash offset to any path elements.

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows how to begin a D3.js 7 project by accessing and displaying data from a JavaScript array. The page loads car data from a JSON string and prints the make of the first vehicle, "Honda," onto the screen. It uses the D3 library loaded from a CDN, along with a custom `cars.js` module that parses the JSON array. The `document.getElementById` method updates the HTML text content to present the result.

Loading thumbnail…

Red Tree

This visualization displays a hierarchical tree of world regions and countries, branching from a global root down through continents and subregions to individual nations. The tree uses horizontal links and text labels sized by depth, with larger text closer to the root. It is rendered as SVG using D3 v5’s `tree()` layout, `hierarchy()`, `linkHorizontal()`, and `zoom()`. The data comes from `data.json`, and the red-stroked paths and text shadows create a distinctive visual style.

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart shows population over time for different world regions, with a vertical line marking a selected year. Users can hover over the chart to change the selected year, which adjusts the line's position. The visualization uses D3.js v5 to render SVG elements, including a color legend, axes, and multiple line paths. It also employs D3's scale functions, line generator, and mouse event handling to update the chart dynamically based on the United Nations population dataset.

Loading thumbnail…

Melting Data Multiple Lines

The visualization shows population over time by region as multiple smoothed lines, with a color legend and axis labels. It uses D3 v5 APIs including `nest()` for grouping, `line()` with `curveBasis` for path generation, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is melted from UN population estimates and medium variant CSV files, spanning 1950 to 2100, rendered as SVG paths with multiply blend modes.

Loading thumbnail…

Line Chart with Multiple Lines

This example shows the temperature in five cities over a week, with each city as a separate smoothed line and a categorical color legend identifying them. The lines are plotted using D3 v5’s `line` generator with `curveBasis`, and the axes are built with `axisBottom` and `axisLeft`. Data is loaded from a CSV via `csv`, nested by city using `nest`, and rendered as SVG paths with a `mix-blend-mode` for overlapping strokes.

Loading thumbnail…

Circles on a map with D3.js!

This example displays global population estimates for 2018 as circles positioned on a natural Earth projection map using D3.js v5. Countries with missing data appear in red, while circles scale in radius according to population via `d3.scaleSqrt`. The visualization includes zoom functionality via `d3.zoom`, a size legend generated with custom tick formatting, and tooltips using SVG `<title>` elements. Geographic boundaries are rendered from TopoJSON data, while population statistics come from a CSV file of UN estimates, with `d3.geoPath` and `d3.geoCentroid` handling map geometry.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of classic cars, including horsepower, weight, and acceleration, using data from the auto-mpg dataset. Two dropdown menus allow the user to select which columns to plot on the x- and y-axes, dynamically re-rendering the chart. Built with d3.v5, the visualization uses SVG and animated transitions. The code leverages d3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, along with a custom `dropdownMenu` module and a `scatterPlot` component that animates circles over two seconds.

Loading thumbnail…

Interative Filtering with D3.js!

This interactive choropleth map displays global economies color-coded by income group, with a connected color legend that filters the map on click. The map uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `topojson` for world-50m data, while the legend’s ordinal `scaleOrdinal` and `schemeSpectral` drive fills. Hovering highlights countries, and the legend’s click handler toggles opacity, dimming non-selected regions. The SVG rendering supports zoom via D3’s `zoom` behavior.

Loading thumbnail…

Fork of Fork of Bowl of fruit - Click to Select D3.js!

Five circles render as apples and lemons in an SVG bowl, with clicks selecting a fruit by highlighting its black stroke. D3.js v5’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates circle entry, exit, and resizing. The `fruitBowl` module uses data joins, `on('click')` handlers, and timed `setTimeout` calls to dynamically add, remove, or mutate fruit data, triggering re-renders.

Loading thumbnail…

Choropleth Map with D3.js!

This choropleth map visualizes global income groups using D3.js to color each country based on its economic classification. Built with d3.geoNaturalEarth1 projection and d3.geoPath, the SVG renders geographic boundaries from TopoJSON data sourced from the world-atlas package, with income labels joined from a TSV file. The map includes an ordinal color scale using d3.scaleOrdinal and d3.schemeSpectral, supplemented by a custom color legend component. Interactive features include zooming via d3.zoom and hover effects that highlight individual countries in red.

Loading thumbnail…

Color size legend with D3.js!

Two custom D3.js legends display categorical and quantitative mappings side by side. The color legend pairs a nominal `scaleOrdinal` with four fruit names, each linked to a distinct fill color, while the size legend uses a `scaleSqrt` to map numerical values to circle radii. Both legends are built as reusable SVG components, with `selection.selectAll` and `.merge` managing tick groups, and circles receiving graphic attributes directly from their respective scales.

Loading thumbnail…

World countries tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with the root node labeled "World" branching down to individual nations. It shows the structural relationships between geographic regions and their constituent countries. The tree is rendered as an SVG using D3.js v5, with the `d3.tree` layout algorithm and `d3.linkHorizontal` for curved edges. Text labels scale in font size based on node depth, and the visualization supports zooming via a custom zoom event. Data is loaded from a JSON file structured as nested regions.

Loading thumbnail…

Art tree

A hierarchical tree visualization renders the structure of world regions and countries, with the root labeled "World" branching into continents, subregions, and individual nations. The layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates curved path links between parent and child nodes. The SVG canvas fills the entire viewport, displaying the data as an artful, horizontal branching diagram without labels, emphasizing the organic, tree-like distribution of geographic relationships from the JSON dataset.

Loading thumbnail…

Blank Canvaswith D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face with animated eyebrows on an SVG canvas. D3 selections append circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a translated group element. The eyebrows move up and down using chained `transition().duration()` calls, which repeatedly shift the group’s transform attribute. The code uses D3 v5 select and arc imports, hardcoded dimensions, and an SVG renderer with no external data source.

Loading thumbnail…

Cheap tricks for interaction with D3.js!

This example shows a zoomable world map rendered with SVG paths, using a natural Earth projection and hover highlighting to change each country’s fill color. It demonstrates simple interaction tricks in D3.js v5, combining `d3.geoNaturalEarth1`, `d3.geoPath`, and the `d3.zoom` API to apply transforms to a containing group. Country boundaries come from TopoJSON world-atlas data, merged with country names from a TSV file, and the code uses `title` elements for basic tooltips.

Loading thumbnail…

Fork of Let's make a Map with D3.js!

This example displays a world map using a natural Earth projection, with countries rendered as light green paths and the ocean as a light blue sphere. It loads geographic data from the World Atlas TopoJSON dataset at 110m resolution, converts it to GeoJSON using `topojson.feature`, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. The D3 v5 selection and data join methods (`select`, `append`, `data`, `enter`) generate the SVG paths, with styling applied via CSS classes.

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - Hovering to Select D3.js!

Five fruit circles, apples and lemons, render in an SVG bowl using D3 v5’s data join pattern. Hovering over a circle selects it, applying a black stroke via the `mouseover` and `mouseout` handlers. The `scaleOrdinal` color and radius scales map fruit types, while entering and exiting circles animate radius changes with `transition().duration(1000)`. A `setSelectedFruit` callback triggers re-renders, demonstrating animated updates as fruits are removed or replaced over time.

Loading thumbnail…

Fork of Bowl of fruit - General Update Pattern with D3.js!

This example demonstrates the D3.js General Update Pattern by animating a bowl of fruit, where apples and lemons are added, removed, or replaced over time. It shows how data joins and enter/update/exit selections handle dynamic changes to a simple SVG scene. The code uses d3.scaleOrdinal for color and radius mappings, d3.select for DOM manipulation, and d3.range to generate initial data. Rendered as SVG rectangles, circles, and text, it illustrates reusable component patterns with a modular fruitBowl function.

Loading thumbnail…

Bowl of fruit - General Update Pattern with D3.js!

A bowl of fruit demonstrates the general update pattern for handling data changes in D3.js. Circles represent apples and lemons, transitioning smoothly as fruits are eaten or replaced over timed intervals. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to manage DOM updates, with `transition().duration(1000)` animating radius and position changes. Color and size are mapped via `scaleOrdinal()` with custom domains, rendering SVG circles on a blank canvas.

Loading thumbnail…

Bowl of fruit - General update pattern with D3.js

This example demonstrates the general update pattern in D3.js by rendering a bowl of fruit as a row of circles on an SVG canvas. The code uses `select`, `range`, and data binding to create five circles, each representing an apple, positioned horizontally with a spacing of 100 pixels and centered vertically. It relies on the `enter()` selection to append the circles and sets their `cx`, `cy`, and `r` attributes directly. The visualization is built with D3 v5 within a React framework, drawing to a fixed 960×500 SVG viewport.

Loading thumbnail…

World Population Area Chart with D3.js

This example renders a red area chart of world population by year using D3.js v7 and SVG. It loads CSV data from a VizHub dataset, parsing the year column into JavaScript Date objects for a time-based x-axis and the population values for a linear y-axis. The chart employs `d3.area()` with a `curveBasis` interpolation to create the filled shape, along with `d3.axisLeft` and `d3.axisBottom` for labeled axes with a custom tick formatter converting billions. The rendered SVG includes a title, axis labels, and grid lines via tick size extensions.

Loading thumbnail…

Fork of World Population Area Chart with D3.js

This chart displays global population trends over time using a smooth area chart, with temperature-related labels and axes. The visualization encodes data through a red-filled area with a maroon stroke, rendered as SVG. It uses D3.js v7 features including `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and axis generators like `axisBottom` and `axisLeft`. Data is loaded from a CSV file of world population by year, with population values converted to numbers and years parsed as dates. The chart includes labeled axes for time and temperature, with gridlines and a title.

Loading thumbnail…

Line Chart of Temperature in SF Scatter Plot with D3.js

This visualization displays the temperature in San Francisco over time, using a red area chart with a smooth curve to emphasize the trend in temperature fluctuations. The chart includes labeled axes for time and temperature, with a clear title and gridlines to aid readability. The code uses D3.js version 7, specifically leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to render the SVG path. Data is loaded from an external CSV file, with timestamps and temperatures parsed for the visualization.

Loading thumbnail…

Temperature in SF Scatter Plot with D3.js

This scatter plot visualizes hourly temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis. Each orange circle represents a single measurement, revealing seasonal and daily temperature patterns. The visualization uses D3.js version 7 with SVG rendering, loading data from a CSV file via `d3.csv`. It employs `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and custom labels for clarity. Grid lines are generated using negative tick sizes, while the title and axis annotations are added as SVG text elements.

Loading thumbnail…

Cars Scatter Plot with D3.js

This scatter plot visualizes the relationship between miles per gallon and model year for a dataset of cars. The visualization uses red, semi-transparent circles to represent individual vehicles, with axes labeled for MPG and Year. The code leverages D3.js v7 functions including `csv` for data loading, `scaleLinear` for scaling, and `axisBottom`/`axisLeft` for axis generation. The SVG rendering includes grid lines, axis labels, and a title, with data parsed from an external CSV file.

Loading thumbnail…

Scatter Plot with D3.js

This scatter plot displays the population of the top 10 most populous countries, with countries arranged on the y-axis and population values on the x-axis. Built with D3.js v7, it uses `scaleLinear` and `scalePoint` to map data from a CSV file to SVG coordinates, with circles rendered for each country. The chart includes grid lines via `axisBottom` and `axisLeft`, and formats population numbers using `format('.3s')` to display values in billions.

Loading thumbnail…

Customizing Axis with D3.js

This example shows a horizontal bar chart ranking the ten most populous countries, with custom-formatted axis labels and styled gridlines. It uses D3.js v7's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` modules to position bars and ticks. The chart loads population data from a CSV file, multiplies the values by 1000, and renders bars as SVG rectangles. Custom tick formatting converts values to abbreviated notation, and chart elements are styled via CSS.

Loading thumbnail…

Make a Barchart with D3.js

This bar chart displays population figures for the ten most populous countries, with horizontal bars ordered from largest to smallest population. The visualization uses D3.js v7 to load CSV data via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and renders the chart as SVG elements. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while population values are multiplied by 1,000 during data preprocessing.

Loading thumbnail…

Make a Face with D3.js

This example uses D3.js v7 to draw a simple cartoon face in an SVG canvas. The code creates a yellow circle for the head, two black circles for eyes positioned symmetrically around the center, and a mouth rendered as an arc path using D3's `arc()` generator. The example demonstrates basic SVG shape creation and attribute manipulation, with fixed pixel coordinates for the face features. The mouth is drawn with an inner and outer radius, spanning a half-circle angle range, and is translated to the face's center point.

Loading thumbnail…

Shapes with SVG and CSS

This example uses SVG and CSS to construct a grid of basic geometric shapes—circles and rectangles—in various colors, with a portion of the shapes offset and colored blue using a translated group. A pair of black lines and a path with a blue stroke and round line joins are rendered from hardcoded coordinates. The shapes are scaled by a factor of 1.5, and styling is applied via the CSS class `.lines` in the linked stylesheet, demonstrating how inline attributes and external style rules combine within an SVG canvas.

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple text-based car report generated from a static JSON dataset embedded in the source. It filters a list of five vehicles by a maximum price of $2,000, formats each matching car as a string using the `formatCar` function, and displays the results in a `<pre>` element. The visualization relies on asynchronous data loading via `getCars`, which returns a Promise that resolves after a two-second delay, and the report is generated using the `generateReport` module.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v7 setup by displaying the make of the first car from an embedded JSON dataset in the browser. The page loads D3 from a CDN and uses the `cars.js` module to parse two car entries, then the `index.js` script selects the `<pre>` element via `document.getElementById` and sets its text content. The HTML includes a large font size and a video tutorial link, but the visible output is simply the text “Honda” rendered on screen.

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates a minimal D3 v7 starter template that displays “Hello World” in large text on a webpage. It loads D3 from a CDN, defines a small array of car objects with properties like year, make, and price, and parses it into JSON using `JSON.parse`. The code then selects the `message-element` via `document.getElementById` and sets its text content to the message. The visualization is purely text-based, with no charts or interactive elements.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template, displaying the text “Hi D3 version 7” centered on a blank page. The code imports the `select` function from D3 v7 and uses it to set the text content of the `body` element. The page loads D3 from a CDN via `unpkg.com` and includes a large font size in the CSS for visual emphasis. The visualization is a simple, non-interactive proof-of-concept for setting up a D3 project.