Margarita Chernetski

@sardinar·9 public vizzes

Temperature in San Fransisco Line Chart

A line chart displays one week of temperature in San Francisco, with time on the x-axis and degrees Celsius on the y-axis, filled as a maroon area beneath a curved line. The visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.area with d3.curveBasis for the filled curve, and d3.axisLeft and d3.axisBottom with gridlines. Data is loaded via d3.csv from a remote dataset, rendered as SVG, with axis labels and a title styled in CSS.

Jul 25, 2020

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses a smooth curved line to connect data points, with axis labels, gridlines, and a title. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the scales, and d3.line with curveBasis for the path. The SVG rendering includes custom tick formatting and styled axes, with data sourced from the Data Canvas - Sense Your City project.

Jul 25, 2020

Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot shows a week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `extent` for domains, and `axisBottom`/`axisLeft` for tick marks. Data is loaded via `csv` from a Data Canvas – Sense Your City dataset. Grid lines and labeled axes provide context for the steelblue circles.

Jul 25, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG data set. Red semi-transparent circles represent individual vehicles, with axes labeled and grid lines drawn. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for tick marks, and renders via SVG. Axis labels and a title are appended as text elements with custom styling.

Jul 17, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart encodes country on the y-axis and population on the x-axis, with circles positioned by d3.scaleLinear and d3.scalePoint. The code renders SVG elements via D3 v5, using d3.csv to load data, and custom axes with tick formatting that abbreviates large numbers (e.g., converting G to B).

Jul 17, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization customizes its axes: the y-axis removes domain and tick lines, while the x-axis uses a tick format that abbreviates numbers (e.g., converting G to B) and adds a population label. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendering. The chart also includes grid lines via `tickSize(-innerHeight)` and a title.

Jul 16, 2020

Loading thumbnail…

Making A Bar Chart

A horizontal bar chart displays the populations of the top ten most populous countries as of a 2018 United Nations estimate. Steelblue bars are arranged in descending order along a categorical y-axis, with a linear x-axis measuring population in thousands. The visualization is built using D3 v5, leveraging its `csv`, `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to parse the data and project it into SVG.

Jul 10, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a face, featuring two eyes and animated eyebrows, all rendered as SVG shapes. The example uses D3.js version 5 to select and append circles, rectangles, and a path, with the path drawn using the `arc` function to create a mouth. CSS styles the page, while D3 transitions animate the eyebrows' vertical movement over two-second intervals. The SVG canvas is 960 by 500 pixels, and all elements are positioned using transforms relative to the center.

Jul 9, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can construct a simple animated face using fundamental SVG elements. A yellow circle forms the head, with two circles for eyes and a path drawn using the `arc` generator for the mouth. The code uses `d3.select` and `d3.append` for DOM manipulation, while the `transition` method animates the eyebrows upward and back over two seconds each way. The face is centered via a group transform, and all shapes are rendered as SVG with hardcoded attributes.

Jul 8, 2020