Skip to main content
Log in
L

lystran

@lystran·11 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars' attributes as circles. Dropdown menus let users select which data columns map to the X and Y axes, dynamically updating the chart. The code uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `dropdownMenu` custom component. Animated transitions, via `transition().duration(5000)`, move circles to new positions, while SVG renders the axes, labels, and semi-transparent red points.

Apr 26, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters which countries remain highlighted. Clicking a legend item dims all countries not in that category, while clicking the same item again clears the filter. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths, d3.scaleOrdinal with a spectral scheme for coloring, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV datasets, loaded via d3.json and d3.tsv.

Apr 23, 2020
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays the world’s countries, each rendered as a light-green path with a black stroke on a blue sphere, using D3.js version 5’s `d3.geoPath` with the `geoNaturalEarth1` projection. The visualization includes a zoom feature triggered by `d3.zoom`, which applies a transform to the map group, and a `title` element for each country reveals its name from a TSV file loaded alongside the `world-atlas` GeoJSON data.

Apr 23, 2020
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and the TopoJSON library. The visualization renders a blue sphere as the background and displays countries as light green regions with subtle black borders, using the Natural Earth dataset. The code employs `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw geographic features, while the `topojson.feature` function processes the TopoJSON data. The map is rendered as SVG elements, with styling defined in an external CSS file.

Apr 23, 2020
Loading thumbnail…

Loading and Parsing CSV Data

This example animates a time-series area and line chart of temperature data from San Francisco, loading the dataset from a remote CSV file. The visualization reveals temperature trends over time, with a gradient-filled area beneath a red line that smoothly updates as new data points are appended. Built with D3 v5, it uses `csv()` to parse the data, `scaleTime` and `scaleLinear` for axes, and the `area` and `line` generators with a basis curve. A transition loop sequentially shifts data through the chart, redrawing both paths to create a flowing effect.

Apr 17, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. It uses D3 v5 to load CSV data, then applies `scaleTime` and `scaleLinear` to map timestamps and temperature values to SVG coordinates. An `axisBottom` and `axisLeft` render labeled axes with grid lines, while a curved line path, generated via `line` with `curveBasis`, traces temperature trends. The chart includes a title and axis labels, with styling applied through external CSS.

Apr 17, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG data set. Each green, semi-transparent circle represents a car, with position determined by the linear scales from `d3.scaleLinear`. The visualization uses SVG rendering with axes generated by `d3.axisLeft` and `d3.axisBottom`, including grid lines and labeled titles. Data is loaded asynchronously via `d3.csv` and parsed into numeric values before being plotted.

Apr 17, 2020
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. The chart highlights custom D3 axis styling, including tick lines that extend across the plot area, custom labels, and a formatted x-axis that converts large numbers into billions. The visualization uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to build the chart, with CSS controlling the appearance of ticks and text. Data is loaded from a CSV file and rendered as SVG within a 960 by 500 viewport.

Apr 17, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations’ World Population Prospects. It shows how to customize D3 axes, including tick formatting (converting large numbers to abbreviated billions), removing axis spines, and adding labels. The visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisBottom` and `d3.axisLeft` for rendering. Styling is applied via CSS, while the SVG output is generated dynamically through D3 selections.

Apr 17, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Apr 17, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Apr 17, 2020