Skip to main content
Log in
A

aurelio-david

@aurelio-david·14 public vizzes

Loading thumbnail…

Stylized Line Chart

This visualization displays temperature variations over time for San Francisco, drawing from a week's worth of data from the Sense Your City dataset. The chart uses a smooth, stylized line to represent the temperature trend, with a natural curve applied via D3's `curveNatural` function, giving the path an organic, flowing appearance. Rendered in SVG within a React framework, the code leverages D3 v5's `scaleTime`, `scaleLinear`, and `extent` APIs to map data to axes, while the `AxisBottom` and `AxisLeft` components handle tick marks and labels. Styling is managed through CSS with the Poppins font, and a custom `Marks` component draws the data path.

Jun 28, 2020
Loading thumbnail…

Let's Make a Face

A smiling face drawn with SVG shapes animates its eyebrows upward in a repeating loop. The example uses D3 v5 selections to append a yellow circle for the head, two dark circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrow group transitions vertically via `transition.attr` with a duration of 1000 milliseconds, creating a subtle bouncing effect. All elements are centered using a translated SVG group, with hardcoded pixel values for spacing and geometry.

Jun 28, 2020
Loading thumbnail…

Let's Make a Face

A stylized face, composed of geometric shapes in SVG, is drawn on a bright yellow circular background. The face features two circular eyes and rectangular eyebrows, which shift upward and downward in a looping animation using D3 transitions. A smiling mouth is rendered as a partial arc using the `d3.arc` API to generate the path data. The D3 code builds the entire composition programmatically, positioning elements relative to the canvas center and animating the eyebrow group’s transform attribute over time.

Jun 28, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Each circle represents a car, positioned by weight on the x-axis and horsepower on the y-axis, with axes labeled and a title displayed. The visualization is rendered as SVG using D3 v5, with scales created via `d3.scaleLinear` and axes generated through `d3.axisBottom` and `d3.axisLeft`. Data is loaded as CSV using `d3.csv` from a remote VizHub URL, and numerical fields are parsed before rendering.

Jun 28, 2020
Loading thumbnail…

Temperature in San Francisco

This scatter plot displays one week of temperature readings in San Francisco over time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `extent` to determine domains. Circles represent individual data points with steelblue fill and partial opacity. The chart includes labeled axes, grid lines, and a title, with data loaded from a CSV file containing timestamp and temperature values.

Jun 28, 2020
Loading thumbnail…

A Week in San Francisco

This visualization displays a week of temperature and time data for San Francisco, with points connected by a line chart to show trends over the period. The SVG rendering uses D3 v5’s `csv` loader to fetch the dataset, then applies `scaleTime` and `scaleLinear` to map timestamps and temperature values. Axes are generated with `axisBottom` and `axisLeft`, while the line is drawn using the `line` generator, and individual data points appear as semi-transparent circles.

Jun 28, 2020
Loading thumbnail…

Temperature in San Francisco

This scatter plot displays one week of temperature readings in San Francisco over time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `extent` to determine domains. Circles represent individual data points with steelblue fill and partial opacity. The chart includes labeled axes, grid lines, and a title, with data loaded from a CSV file containing timestamp and temperature values.

Jun 28, 2020
Loading thumbnail…

Temperature in San Francisco

This scatter plot displays one week of temperature readings in San Francisco over time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `extent` to determine domains. Circles represent individual data points with steelblue fill and partial opacity. The chart includes labeled axes, grid lines, and a title, with data loaded from a CSV file containing timestamp and temperature values.

Jun 28, 2020
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using data from a CSV file, with population values in thousands rendered as circles on a linear scale. The code customizes both axes by removing default domain lines, adding truncated tick labels formatted with d3.format (e.g., changing G to B for billions), and extending tick lines across the chart via tickSize. It uses d3.csv, scaleLinear, scalePoint, axisLeft, and axisBottom in D3 v5, with an SVG rendered scatter-style layout.

Jun 27, 2020
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of ten countries, ordered alphabetically by country name. The visualization loads data from a CSV file and renders the bars as SVG rectangles, using D3 v5’s `scaleLinear` for the population axis and `scaleBand` for the categorical country axis. The chart includes left and bottom axes via `axisLeft` and `axisBottom`, with bars styled in steelblue.

Jun 26, 2020
Loading thumbnail…

Let's Make a Face

A stylized face, composed of geometric shapes in SVG, is drawn on a bright yellow circular background. The face features two circular eyes and rectangular eyebrows, which shift upward and downward in a looping animation using D3 transitions. A smiling mouth is rendered as a partial arc using the `d3.arc` API to generate the path data. The D3 code builds the entire composition programmatically, positioning elements relative to the canvas center and animating the eyebrow group’s transform attribute over time.

Jun 21, 2020
Loading thumbnail…

Let's Make a Face

A stylized face, composed of geometric shapes in SVG, is drawn on a bright yellow circular background. The face features two circular eyes and rectangular eyebrows, which shift upward and downward in a looping animation using D3 transitions. A smiling mouth is rendered as a partial arc using the `d3.arc` API to generate the path data. The D3 code builds the entire composition programmatically, positioning elements relative to the canvas center and animating the eyebrow group’s transform attribute over time.

Jun 21, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example uses raw SVG markup inside an HTML file to draw a collection of circles, rectangles, lines, and a path, positioned on a 960-by-500 canvas and scaled by a factor of 0.7. The SVG shapes are styled with both presentation attributes, such as `fill` and `stroke`, and an external CSS stylesheet. The CSS file defines a `.lines` class that applies a black stroke and width of 10 to the line and path elements, while the path's fill, stroke color, and stroke-linejoin are overridden by more specific CSS rules. No external JavaScript or React logic alters the shapes, as the behavior is purely declarative.

Jun 20, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and animated with CSS within a React application. It renders a collection of geometric figures—including circles, rectangles, and polygons—using inline SVG elements, while CSS properties control their fill colors, stroke styles, and transitions. The code relies on React’s JSX syntax to define the SVG structure and applies CSS classes for visual effects, showcasing the seamless integration of declarative markup and styling. No external data source is used; the shapes are hard-coded in the component.

Jun 20, 2020