A

ArriannePandaraoan

@ArriannePandaraoan·40 public vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows United Nations population projections from 1950 to 2100 as a multi-line chart, with each line representing a regional grouping such as "More developed regions" or "Less developed regions." A vertical black line marks the currently selected year, and moving the mouse across the chart updates this selection, allowing users to compare population values across regions at a specific point in time. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth paths. A `colorLegend` module renders the categorical color scale, while data is loaded from two CSV files using `csv` and processed via a `melt` function that reshapes the wide format into tidy long-form rows.

Loading thumbnail…

D3 ver.4 - ordinal scale invert

This example demonstrates a scatterplot-like visualization of hourly temperature data, where moving the mouse across the chart triggers a red guide line that snaps to the nearest categorical x-axis band. Built with D3 version 4.1.1, it uses a custom `invert` function on an ordinal `scaleBand` to map pixel coordinates back to categories, enabling the interactive hover effect. The SVG heatmap-style line chart is rendered with animated transitions for both the guide line and the axes.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

Loading thumbnail…

Population over Time by Region

This visualization combines a line chart and a pie chart to show population changes over time by region. The line chart displays population trends from 1950 to 2100, with a vertical selector line that updates the pie chart to show the population distribution for the selected year. The pie chart uses `d3.pie()` and `d3.arc()` to render the regional proportions, while the line chart leverages `d3.line()`, `d3.curveBasis()`, and `d3.axisBottom()` for axes. Data comes from UN population estimates and medium-variant projections, processed via `d3.csv()` and `d3.timeParse()`.

Loading thumbnail…

Coronavirus Impact Area Chart by Dimanjan

This visualization presents an animated area chart tracking confirmed cases, deaths, and recoveries from the COVID-19 pandemic. The chart reads the data from a CSV file, parsing dates and values, then animates the data points appearing sequentially. It uses d3.v4 to create SVG paths with linear gradients, and it updates the x and y axes with transitions. An "Update" button can re-trigger the animation, and the chart uses the `d3.area` method to draw the stacked regions.

Loading thumbnail…

Lets make a face with D3

This example demonstrates a simple SVG face created using D3.js, with a red background applied to the canvas. The visualization uses `d3.select` to target an SVG element and chain `.style()` to set its CSS properties directly. The code is minimal, focusing on the foundational step of selecting and styling an SVG container within a React application, with the D3 library loaded via a CDN link.

Loading thumbnail…

Racing Bar Chart Animation Test

Six labeled bars race in ascending order, with values expressed in meters, as randomized increments of ten repeatedly re-sort the ranking. The React component uses D3 v5’s `scaleBand`, `scaleLinear`, and `selectAll().data().join().transition()` to animate rectangle widths and text labels over 750 milliseconds per step. A custom `useInterval` hook drives updates every 750 milliseconds, triggered by a Start/Stop button, with iteration count displayed. Bars and labels transition smoothly while maintaining SVG rendering.

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays hourly temperature readings in San Francisco over a week in March 2015, with time on the x-axis and temperature on the y-axis. The graph uses a smooth curve to connect data points, showing a daily pattern of cooler nights and warmer afternoons. Built with D3 v5, the visualization loads data from a CSV file and renders an SVG using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator with `curveBasis`.

Loading thumbnail…

graph1

This interactive line chart displays daily temperature readings for Austin, Boston, and Arizona in both Fahrenheit and Celsius, with a dropdown menu to switch between the two units. The visualization uses d3.v5 to load the CSV data, parse dates, and render an SVG with a time-scaled x-axis and linear y-axis. Users can hover over the chart to see a vertical guide line, date label, and value annotations for each city. The code employs d3.scaleTime, d3.scaleLinear, d3.line with curveCardinal, and d3.axisBottom/Left, along with transitions to animate axis and line updates when the metric changes.

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for London from 2010 to 2018, showing how different pollutants like PM2.5, PM10, and ozone vary over time. A dropdown menu lets users switch between pollutant types, while multiple colored lines represent different years. The chart uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by year, and d3.transition for animated line updates. Data comes from the London Datastore, rendered as an SVG with a color legend.

Loading thumbnail…

Melting and Munging

A line chart shows projected population growth from 1950 to 2100 for the world’s major regions, distinguishing between historical estimates and future UN projections. The code uses `d3.csv` to load two datasets, a custom `melt` function to reshape wide rows into tidy time-series records, and D3’s `nest` to group by region. It renders smoothed paths with `d3.line` and `curveBasis`, scaled by `scaleTime` and `scaleLinear`, with an SVG color legend appended via `colorLegend.js`. Data comes from UN population estimates and medium-variant projections.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes corn production by state for 2020, using a linear scale for production values on the x-axis and a point scale for states on the y-axis. Each circle represents a state’s total bushels, with the data loaded from a CSV file. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, and renders as SVG. Axis tick labels are formatted with `format('.2s')`, while gridlines and styling are applied via CSS.

Loading thumbnail…

World Population Area Chart

This area chart depicts global population growth from 1950 to 2015, with the area under the line filled in teal. The visualization uses D3 v5’s `area` generator with a basis curve to create the smooth filled shape, while `scaleTime` and `scaleLinear` map the year and population values. Axis labels and gridlines are rendered via `axisBottom`, `axisLeft`, and tick marks, with population formatted in billions. The data is loaded from a CSV file via `csv`, and the chart is drawn as SVG.

Loading thumbnail…

Circles on a Map

This example visualizes global population data by coloring each country on a world map based on its 2018 population estimate, with green indicating data availability and red for missing values. It uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to render the map, while `topojson.feature` converts the world-atlas TopoJSON data. The map supports zooming and panning through `d3.zoom`. A color legend, built with `scaleOrdinal` and `schemeSpectral`, is displayed alongside, and hovering over a country highlights it in red.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays data from the auto-mpg dataset, allowing users to compare any two numerical attributes by selecting them from dropdown menus. The visualization uses D3 v5 to render SVG points with a 2-second animated transition when axes change. The menus are generated with the dropdownMenu module, while the scatterPlot module handles axis creation and circle animation.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3.js general update pattern, animating a dataset of apples and lemons as it changes over time. The example shows how to bind fruit data to SVG groups, using `scaleOrdinal` for color and radius, and entering, updating, and exiting elements seamlessly. Through a series of timed interactions, an apple is eaten, one is replaced with a lemon, and another is removed, highlighting how `selection.merge`, `selection.enter`, and `selection.exit` manage DOM updates. The visualization renders with SVG shapes and transitions based on a row of fruit in a bowl.

Loading thumbnail…

Temperature in San Francisco

A scatterplot displays daily temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Circles mark each measurement, colored cyan, while labeled axes and a title frame the visualization. The code loads data via `d3.csv`, parses timestamps and temperatures, and uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG with gridlines. Styling is applied through CSS for text opacity and circle fill.

Loading thumbnail…

Temperature in San Francisco in Area Chart

This area chart displays the temperature in San Francisco over the course of a week, using a filled area path to emphasize the variation. The visualization is built with D3 v5, using `area` with a basis curve to create a smooth line, and `scaleTime` and `scaleLinear` for the axes. Data is loaded from a CSV file containing temperature and timestamp values.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5 to load CSV data and render an SVG, employing `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and data-driven circle positioning. Axis labels and a title clarify the variables, while semi-transparent blue circles reveal data density through overlap.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of world countries colored by economic classification, rendered with d3.geoPath and the geoNaturalEarth1 projection. Users click legend swatches to filter the map, dimming non-matching countries and highlighting the selected category, which also reduces the sphere's opacity. The visualization uses d3.scaleOrdinal with a spectral scheme, loads data via d3.tsv and d3.json from the world-atlas package, and implements pan/zoom through d3.zoom.

Loading thumbnail…

Choropleth Map

A choropleth map colors world countries according to their income group, using a spectral color scale. The map is rendered as an SVG with a natural Earth projection, and hovering highlights a country in red. Built with d3.v5 and topojson, it loads geographic data from the World Atlas TopoJSON files alongside a TSV table of income classifications. The code uses `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and a custom `colorLegend` component that maps ordinal color values to circles and labels.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build separate color and size legends for data visualization. The color legend maps categorical fruit names to distinct colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to represent numeric values through circle radius. Both legends are rendered as SVG groups, with the color legend positioned on the left and the size legend on the right. The code leverages reusable legend functions that handle enter, update, and exit selections to manage the SVG elements dynamically.

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical organization of world countries, grouped first by continent and then by subregion, with each country displayed as a leaf node. The tree layout positions nodes horizontally, and text size decreases with depth to emphasize the structure. Built with D3 v5, it uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute and draw the connections as SVG paths. Pan and zoom interactions are enabled via `d3.zoom`, and the data is loaded from a local JSON file structured with nested children arrays.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion using a vertical tree layout. The root node, "World," branches into continents like Asia, which then subdivides into regional groups such as "Southern Asia" and individual country leaf nodes. The SVG rendering connects parent and child nodes with black, stroke-only paths generated by the `linkVertical` function, while the `tree` layout algorithm from D3 v5 positions the nodes spatially. Data is loaded from a JSON file via D3's `json` method, and the hierarchy is built using the `hierarchy` API.

Loading thumbnail…

World Countries Tree

This example renders a hierarchical tree of world countries organized by continent and subregion. The visualization displays the geographic grouping structure with curved link paths connecting parent nodes to their children, starting from the root "World" node. It uses D3 v5 APIs including `d3.tree()` for layout, `d3.hierarchy()` for data structuring, and `linkHorizontal()` to generate the SVG paths. The data comes from a static JSON file loaded via `d3.json()`, with the SVG canvas sized to fill the viewport.

Loading thumbnail…

World Countries Tree

A hierarchical tree diagram displays the world's countries organized by continent and subregion, with each country as a leaf node. The visualization uses d3.tree and d3.hierarchy to compute the layout, then renders horizontal links between nodes as SVG paths via d3.linkHorizontal. Data is loaded asynchronously from a JSON file using d3.json, and the SVG canvas is sized to fill the browser viewport. The chart emphasizes the geographic grouping of nations without displaying node labels or additional interaction.

Loading thumbnail…

Cheap Tricks for Interaction

This example displays an interactive world map using D3.js to visualize countries with a graticule sphere. It loads geographic data from the world-atlas TopoJSON and TSV files, rendering country boundaries through `d3.geoPath` with a `d3.geoNaturalEarth1` projection. Hovering highlights countries in red, while the `d3.zoom` API enables pan and zoom interactions. The SVG output uses CSS for styling, with tooltips showing country names via D3's `select` and `append` methods.

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world countries on a natural Earth projection, with each country colored light green and the ocean sphere in dark blue. Hovering highlights a country in red. The map is rendered in SVG using `d3.geoPath` with `d3.geoNaturalEarth1`, and country boundaries come from TopoJSON data loaded from the world-atlas package. Country names are joined via TSV data, and tooltips display them on hover.

Loading thumbnail…

Let's make a map with D3.js!

This example renders a natural Earth projection map of the world using D3.js and TopoJSON. It draws a blue sphere as the globe background, then loads country boundaries from the world-atlas dataset and fills them with light green polygons, bordered by subtle black strokes. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to extract country geometries from the TopoJSON file.

Loading thumbnail…

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths against a dark blue background. The map is built entirely with D3.js v5 and TopoJSON, loading geographic data from the world-atlas dataset. The code uses `d3.geoOrthographic` and `d3.geoPath` to project and trace country boundaries, while `topojson.feature` extracts the geometries for rendering.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths on a dark blue background. It uses the world-atlas TopoJSON dataset and D3’s `geoMercator` projection with `geoPath` to generate the shapes. The topojson `feature` method extracts country geometries, which are appended as SVG `<path>` elements. The map is static, with thin black strokes and low stroke opacity defining country borders.

Loading thumbnail…

Hover to Select

This example demonstrates interactive selection in an animated fruit bowl visualization. Rendered as SVG circles with D3 transitions, apples and lemons move and resize smoothly while mouseover events highlight a selected fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and `selection.on` handlers with a stateful `selectedFruit` variable to trigger re-rendering via `fruitBowl`. Data updates through timed mutations, including removing and replacing fruits, show enter, update, and exit transitions.

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3.js by rendering a bowl of fruit as colored circles with labels, then animating data changes over time. It shows how apples are removed, replaced with lemons, and filtered from the dataset while the visualization updates smoothly. The code uses D3 selections with `enter()`, `merge()`, and `exit()` to handle entering, updating, and exiting elements, alongside `scaleOrdinal` for color and radius mapping. SVG rendering is driven by a `fruitBowl` function that binds fruit data to groups, emitting explicit DOM manipulations for each timed update.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit. It shows how data joins handle entering, updating, and exiting elements as apples are eaten or replaced with lemons. Using d3.scaleOrdinal for color and radius mappings, circles transition smoothly over one-second durations. The code uses d3.select, selection.data with a key function, .merge(), and transition.duration to manage state changes on an SVG canvas.

Loading thumbnail…

Temperature in San Francisco in Area Chart

A week of San Francisco temperatures is visualized as a smooth area chart, with the filled region under a curving line showing temperature fluctuations over time. The chart includes labeled axes for time and temperature, with a distinct title. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate an SVG path from CSV data. Axis labels and gridlines are styled via CSS, and the data is loaded asynchronously from a remote CSV file.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays corn production by state for 2020, using a custom bright teal fill for each bar. The visualization customizes axes by removing default domain lines and tick marks on the y-axis, and modifying the x-axis tick labels to abbreviate large numbers (e.g., converting billions), through d3.axisBottom and d3.format with a custom replace function. The chart is built with d3.scaleBand and d3.scaleLinear, and the data comes from a CSV file.

Loading thumbnail…

Customizing Axes

This bar chart displays corn production by state for 2020, using horizontal bars scaled by bushels. The chart customizes both axes by removing default tick lines and the axis domain, and it reformats tick labels to abbreviate large numbers, converting 'G' to 'B'. The visualization uses d3.csv to load data, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the chart, with d3.format for tick labeling, all rendered as SVG.