L

Littledevil7

@Littledevil7·21 public vizzes

Loading thumbnail…

Stacked bar chart with negative values

This stacked bar chart visualizes positive and negative values across six months from a CSV file, with each bar divided by category and color. The chart uses a diverging layout where positive segments extend rightward from a zero baseline and negative segments extend leftward, anchored by the axis. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `d3.stack`, and `axisLeft`/`axisBottom` to compute and render the SVG. The data is split into positive and negative stacked series, with zero-baseline positioning calculated from value ranges.

Loading thumbnail…

Melting Data for Multiple Lines

This interactive line chart visualizes population over time by region, with a vertical orange line marking the currently selected year. Users can move their mouse across the chart to change the selected year, which is displayed alongside the population trajectories. The chart uses D3’s `scaleTime`, `scaleLinear`, and `line` with `curveBasis` to render smoothed curves, and relies on `nest` for data grouping. The data is sourced from UN population estimates and a medium variant projection, processed via a custom melt function. The legend uses `scaleOrdinal` with the `schemeDark2` palette.

Loading thumbnail…

Line Chart with Multiple Lines

A multi-line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas – Sense Your City. Each line represents a city, colored via a categorical scale, with a legend and axes labeled for time and temperature. Built with D3 v5, the code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, and `nest` to group by city. The SVG rendering includes gridlines, a title, and smooth curved paths.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3.js v5 with SVG rendering to draw multiple colored lines, each representing a city's temperature over time. The code employs `d3.scaleTime` for the time axis, `d3.scaleLinear` for temperature, and `d3.line` with `curveBasis` for smooth paths. A separate color legend, created via nested selections, identifies each city. The chart includes axis labels and a title, with data loaded from a CSV file.

Loading thumbnail…

Circles on a Map

This visualization shows global population by country, with circles positioned at each country’s centroid. Circle area encodes population size, while a size legend communicates the scale; hovering reveals exact values or “missing data.” Users can pan and zoom the map. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for area encoding. Country boundaries come from TopoJSON, with population data loaded via CSV.

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values scaled in thousands. It demonstrates customized D3 axes: the y-axis removes all tick lines and domain, while the x-axis uses a custom tick format that abbreviates large numbers with suffix letters (e.g., converting 'G' to 'B' for billions). The chart is built using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering as SVG.

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It highlights customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that abbreviates numbers and converts 'G' to 'B'. The chart uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, rendering to SVG with a margin-based layout.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with axes labeled and a title noting the variables compared. Built with D3 v5, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to render ticks and gridlines. SVG circles are appended and positioned via the scales, with styling handled by external CSS.

Loading thumbnail…

Religions of Largest 20 Countries

This stacked bar chart shows the estimated 2010 religion breakdown for the 20 most populous countries, with each country as a horizontal bar and religions as colored segments. Hovering over a bar reveals a tooltip with the religion, country, and population count, while hovering over the legend highlights that specific religion across all countries by fading others. The visualization uses D3.js v3 with d3.layout.stack for stacking, d3.svg.axis for scales, d3-tip for tooltips, and d3.legend for the interactive color legend. Data originates from the Pew Research Global Religious Landscape report.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot explores the relationship between different attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to map to the X and Y axes via dropdown menus, built with custom D3 code that creates and updates `<select>` elements. The visualization itself uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a staggered `transition().delay()` animation that moves points from the center to their final positions over two seconds.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft for rendering. Circles are animated with transition().duration() and delay() to show the update when menu selections change. The SVG rendering includes axis labels and grid lines styled through CSS.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world countries on a natural Earth projection using D3.js. It renders a blue sphere outline and green country polygons as SVG paths, loaded from a TopoJSON dataset via the `world-atlas` package. The code uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate path data, with `d3.json` to fetch the data and `topojson.feature` to convert it into GeoJSON features.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with a blue sphere background and light green country outlines using an SVG canvas. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via topojson.feature. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to generate the SVG paths, with d3.json fetching the remote dataset. The page includes a linked YouTube tutorial video and applies simple CSS styling for the sphere and country fills.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to construct a world map using D3.js, rendering individual countries as SVG paths with light green fills over a blue spherical background. The visualization loads geographic data from the world-atlas TopoJSON dataset and applies a geoAzimuthalEquidistant projection, clipped to a rectangular viewport using geoClipRectangle. It relies on d3.geoPath to generate the SVG paths and topojson.feature to convert the TopoJSON topology into GeoJSON features for display.

Loading thumbnail…

HTML Starter

This example displays a map of China rendered as an SVG path filled with lavender and outlined in dark grey, centered on the country using a Mercator projection. It loads GeoJSON data from `data/china.json` via `d3.json` and draws it with `d3.geoPath`, configuring the projection through `d3.geoMercator` with specified center, scale, and translation. The visualization is built with React, though the core rendering relies on D3’s SVG manipulation to append the path to the page.

Loading thumbnail…

Responding to Resize

A chart automatically resizes to fill the browser window by reading the CSS-computed dimensions of its container. The code uses d3.v5 to select the container div and append an SVG, then redraws an X made of two green lines whenever the window fires a resize event. It retrieves the container's clientWidth and clientHeight to set the SVG's width and height attributes, ensuring the graphic always matches the viewport.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It highlights custom D3 axis styling, including tick formatting that converts values to billions, a horizontal grid, and removal of the default domain lines. The visualization builds on a basic bar chart example, using d3.scaleLinear and d3.scaleBand for scales, with d3.axisBottom and d3.axisLeft for axes. The SVG rendering includes custom font sizes, colors for tick labels, axis labels, and the title, all set via CSS.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized by using `d3.axisLeft` and `d3.axisBottom` with `d3.scaleBand` and `d3.scaleLinear`. The visualization renders in SVG, with styled tick lines and labels, and includes a title and axis label. Data is loaded from a CSV file.

Loading thumbnail…

Responding to Resize

This example shows a bar chart of population by country that redraws its X-shaped guide lines whenever the browser window is resized. The code uses `clientWidth` and `clientHeight` to extract the computed CSS dimensions of the chart container, then sets the SVG’s `width` and `height` attributes accordingly. It employs a `window.addEventListener("resize", redraw)` to trigger the update. The bar chart itself is built with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, using population data loaded from a CSV file.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.