Hasideluxe

Melting Data for Multiple Lines

This visualization shows population trends over time for various global regions, with each region represented by a colored line and a corresponding legend. The data comes from UN population estimates and projections, spanning 1950 to 2100. Built with D3 v5, the code melts wide-format CSV data into tidy rows using a custom function before applying scales, axes, and a line generator with curveBasis interpolation. Regions are sorted by their final population value and colored using d3.scaleOrdinal with schemeCategory10.

Aug 7, 2020

Temperature in multiple cities Line Chart

A line chart displays a week of temperature readings across multiple cities, with each city rendered as a distinct colored path sorted by its final temperature. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. A custom colorLegend component generates the ordinal color scale legend, while SVG rendering includes labeled axes and a title.

Aug 3, 2020

Circles on a Map

This map visualizes global population estimates for 2022, with each country represented by a circle sized by its population and positioned at its centroid. The visualization uses D3's `geoNaturalEarth1` projection and `geoPath` to render the map, while `scaleSqrt` scales the circle radii. A size legend and color legend, built with reusable D3 modules, explain the encoding. Population data comes from a UN CSV file, and the map uses TopoJSON from the VisionsCarto World Atlas.

Aug 2, 2020

Scatter Plot with Menus

This interactive scatter plot displays automobile data from a CSV file, with two dropdown menus letting users choose which columns to plot on the x- and y-axes. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisBottom and d3.axisLeft for the axes. Changes trigger a transition with d3.transition, animating the circles’ positions over 1.2 seconds. Menus are built with a custom reusable dropdownMenu function, and the plot renders as SVG with 10-pixel-radius red semi-transparent circles.

Aug 2, 2020

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by an economic attribute, with interactive filtering that highlights selected categories and dims others. The map uses a natural Earth projection with a shadowed sphere, while a clickable color legend controls which categories remain prominent. Built with D3 v5, the visualization uses `d3.geoPath`, `d3.geoNaturalEarth1`, and an ordinal color scale based on spectral schemes. Data is loaded from the world-atlas TopoJSON and TSV files, with zooming enabled via D3's `zoom` component.

Aug 1, 2020

Choropleth Map

A choropleth map colors countries by economic classification, with an ordinal color scale and a legend showing each category. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the projection, `topojson` to load world geometry from the world-atlas dataset, and `schemeSpectral` for the color range. The map supports zooming via `d3.zoom`, while hover effects highlight individual countries.

Jul 31, 2020

Color and Size Legends

Two reusable D3 legends demonstrate how to encode data through color and size. A color legend maps ordinal fruit names to distinct hues using `scaleOrdinal`, while a size legend translates a quantitative scale from 0 to 10 into circle radii via `scaleSqrt`. Both legends render as SVG groups with labeled ticks, using `selection.merge` to update existing elements efficiently. The examples show legend construction with configurable spacing, text offsets, and tick counts for flexible chart annotations.

Jul 31, 2020

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each country as a leaf node. The tree layout uses d3.tree and d3.hierarchy to position nodes and links, while d3.linkHorizontal draws the connecting paths. Text labels show country and region names, with font size decreasing by depth. The SVG rendering supports pan and zoom via d3.zoom, and the data comes from the included data.json file.

Jul 28, 2020

Blank Canvas

This example displays a black full-screen rectangle with rounded corners on a blank SVG canvas. It uses D3 v5’s `select` method to attach to the SVG element, sets its dimensions to match the browser viewport, and appends a `rect` with an `rx` of 40 pixels. The visualization demonstrates minimal SVG rendering with a simple, static geometric shape, relying on inline JavaScript and CSS to fill the entire screen.

Jul 28, 2020

Cheap tricks for interaction

This example shows a world map with natural Earth projection, where hovering over any country highlights it in red and displays its name as a tooltip. The visualization uses D3 v5 and TopoJSON to load and render geographic data from the world-atlas package, with d3.geoPath handling the projection. It demonstrates two simple interaction tricks: native SVG `<title>` elements for hover tooltips and d3.zoom to enable panning and zooming the entire map. Countries are colored light green by default and turn red on hover.

Let's make a map with D3.js

This example shows a geographic world map rendered as an SVG using D3.js and TopoJSON. It displays country boundaries and a blue sphere outline, with countries filled in light green and subtle black strokes. The code loads world-atlas data via D3’s `json` method and converts TopoJSON features using `topojson.feature`. It applies a natural Earth projection with `d3.geoNaturalEarth1` and generates paths via `d3.geoPath`. The visualization relies on D3 v5 and TopoJSON v3 scripts.

Bowl of fruit - hover to select

Five fruit circles, initially all apples, transition between fruit types and removal over time, with hover interactions selecting a fruit and highlighting it with a black stroke. The example uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius mapping, and `selection.transition().duration(1000)` to animate entering, updating, and exiting elements in SVG. Apples are eaten and replaced by a lemon through timed updates, demonstrating dynamic data binding and interactive selection.

Bowl of fruit - click to select

A bowl of fruit displays five apples as red circles, which users can click to highlight with a black stroke. Over time, apples disappear and one transforms into a lemon, demonstrating dynamic data updates. The visualization uses D3 v5 with a modular import of `scaleOrdinal` for color and radius scales, while `select`, `range`, and `transition` handle SVG circle creation, removal, and animated resizing. Selection state triggers re-rendering via a callback, showcasing enter, update, and exit patterns.

Bowl of fruit - animated transitions

A row of apples and one lemon sit atop an SVG bowl, with each fruit drawn as a colored circle. The example demonstrates animated transitions as fruits are eaten or replaced: exiting circles shrink to zero radius, while new or changed fruits grow to their target size with color and radius updates. It uses D3 v5's data join, `transition().duration(1000)`, and ordinal scales for color and radius, with `Math.random()` generating fruit IDs.

Jul 26, 2020

Bowl of fruit general upadte pattern

A bowl of fruit visualization demonstrates the D3 general update pattern for adding, removing, and updating SVG elements. Five apples appear in a row, then disappear, change into a lemon, and are removed at timed intervals using JavaScript setTimeout calls. The fruitBowl function uses D3’s selection methods—enter, merge, and exit—with scaleOrdinal for color and radius mappings. Rendering happens in SVG with D3 v5.

Jul 26, 2020

Bowl of fruit general upadte pattern

A bowl of fruit dataset animates through a general update pattern, showing three sequential changes: one apple disappears, one apple turns into a lemon, and another apple is removed. The visualization uses D3’s `scaleOrdinal` for both color and radius scales, with the `fruitBowl` function applying enter, update, and exit selections to circles and text elements in SVG. Data-driven transformations position each fruit based on its index, while the `index.js` script orchestrates timing with `setTimeout` to trigger re-renders. The example demonstrates reusable D3 v5 modules and the merge pattern for handling dynamic updates.

Jul 26, 2020

World Population Area Chart

A maroon area chart depicts world population growth over time, with a smooth, curved trend line filling the space beneath it. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate an SVG path from CSV data, alongside `axisBottom` and `axisLeft` for labeled axes. Population values are formatted in billions, and the chart includes a title and axis labels. Data comes from a gist-hosted CSV file of world population figures.

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The area beneath the line is filled in maroon, and the chart includes labeled axes and a title. The visualization uses D3 v5 to load CSV data from a GitHub gist, scales with `scaleTime` and `scaleLinear`, and renders as an SVG. It draws the filled area using the `area` generator with a `curveBasis` interpolation, while axes are created with `axisBottom` and `axisLeft`.

Temperature in San Francisco Line Chart

A line chart visualizes temperature readings over a week in San Francisco, using time on the x-axis and temperature on the y-axis. Data is loaded from a CSV file via `d3.csv`, parsed with JavaScript's `Date` constructor, and rendered as an SVG path using d3's `line` generator with `curveBasis` smoothing. Axes are created with `axisBottom` and `axisLeft`, while scales `scaleTime` and `scaleLinear` map the data. The chart includes labeled axes, a title, and gridlines, with styling applied through external CSS.

Temperature in San Francisco Scatter Plot

This scatter plot displays temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, while d3.axisBottom and d3.axisLeft render the axes with gridlines. Data comes from a CSV file loaded via d3.csv, and each point is drawn as an SVG circle with a fixed radius. The chart includes labeled axes and a title, all rendered in SVG with d3’s selection and data-join methods.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars sourced from the UCI Machine Learning Repository’s Auto MPG dataset. It renders each car as a semi-transparent red circle on an SVG canvas, using d3.scaleLinear for both axes. The code employs d3.csv to load the data, d3.axisBottom and d3.axisLeft for the axes, and d3.format for tick labels. Axis labels and a title are appended as SVG text elements.

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom with custom formatting to abbreviate large numbers. SVG circles are rendered via d3.select and data joins, with gridlines drawn through tick sizing.

Jul 24, 2020

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed along the x-axis and country names on the y-axis. It customizes axis elements by removing domain lines, using abbreviated tick labels that convert "G" to "B" via `format('.3s')`, and adding a rotated axis title. The chart is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering to SVG from a CSV file. Grid lines are created through `tickSize(-innerHeight)`, and the y-axis’s domain and tick lines are removed.

Jul 22, 2020

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, with horizontal bars sorted by population size. The visualization uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with axes rendered via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV file using d3.csv, and population values are multiplied by 1000 to reflect actual figures. The SVG rectangles are colored steelblue, with margins applied to position the chart within the 960x500 viewport.

Making a Bar Chart

Let's make a face with D3.js

A yellow SVG face with black-outlined features animates its eyes and eyebrows in a looping sequence. The face is built using D3.js v5, with circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. Transitions scale both eyes and shift the eyebrows vertically over two-second intervals, creating a playful blinking and raising motion. The SVG is centered within a 960×500 viewport, rendered entirely with D3 selection and transition methods.

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HTML Cars Report

This example displays a static, plain-text report of three used cars with prices, highlighting the 2012 Nissan Leaf in red. It uses standard HTML elements—an `h1` heading and an unordered list (`ul`) with list items (`li`)—styled via an external CSS file that sets a large monospace font. The `.highlighted` class applies the red color to the Leaf entry. No JavaScript or visualization libraries are involved; the rendering relies entirely on the browser’s default HTML and CSS processing.