Skip to main content
Log in
A

anastasiiaplatovskikh

@anastasiiaplatovskikh·9 public vizzes

Loading thumbnail…

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

May 27, 2020
Loading thumbnail…

Bowl of fruits - general update pattern

A D3.js visualization uses a general update pattern to show a bowl of fruits, initially rendering five red circles as apples. The code, using the d3 selection API and setTimeout, removes one fruit after a second, demonstrating the exit transition. A subsequent update changes the type of one remaining fruit to a lemon, though the visual representation remains red, highlighting that the data attribute updates without altering the SVG circle's styling.

May 27, 2020
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays a week of temperature data for San Francisco, with time on the x-axis and temperature on the y-axis, rendered as an orange filled curve with black stroke. The visualization loads CSV data from a remote URL, parses timestamps into Date objects, and uses D3 v5's `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` APIs to construct the SVG chart. Axis labels and a title are added as text elements, with grid lines styled via CSS classes.

May 27, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature readings over a week in San Francisco using a smooth basis curve. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to render the SVG path. Grid lines are drawn via negative tick sizes, and axis labels are positioned with rotation. Data is loaded from a CSV file containing timestamps and temperature values, with circles styled red and semi-transparent in CSS.

May 25, 2020
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with each red circle representing a measurement plotted over time. The visualization uses D3 v5 scales (`scaleTime` for the x-axis and `scaleLinear` for the y-axis) to map timestamps and temperature values, with axes generated via `axisBottom` and `axisLeft`. Data is loaded asynchronously from a CSV file using D3’s `csv` method, parsed into `Date` and numeric values, then rendered as SVG circles. Grid lines and labeled axes clarify the relationship between time and temperature.

May 25, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for a dataset of cars, with each red semi-transparent circle representing a single vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes with gridlines, while `csv` loads the auto-mpg data from a remote URL. The SVG rendering includes labeled axes and a title, with circle positions mapped via scaled x and y coordinates.

May 25, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a categorical y-axis for country names and a linear x-axis for population values. The visualization uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.axisBottom, and d3.format to render the SVG. Population data is loaded from a CSV file and multiplied by 1000, while circles are appended directly to the SVG using d3.select and d3.append.

May 25, 2020
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the ten most populous countries, ordered by population. It uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with `axisLeft` and `axisBottom` for axes. Population data is loaded from a CSV file and formatted in billions using `format('.3s')`. The chart includes a title and axis labels, with the x-axis gridlines extending across the plot area.

May 25, 2020
Loading thumbnail…

Face with D3.js

A yellow circular face with black-outlined eyes, animated eyebrows, and a smile is rendered in SVG. The eyebrows rise and fall repeatedly over two seconds using chained transitions on a group element, while the smile is drawn with the `d3.arc` shape generator. Built with D3 v5 and the `select` and `arc` APIs, the composition is centered using an SVG group transform.

May 24, 2020