Catriona

@catriona-reader·8 public vizzes

Random tests

This example visualizes one week of temperature data for San Francisco, displaying the values as a line path across an SVG canvas. The chart uses d3.v5 to render the visualization, with the line path drawn in maroon and styled via the `line-path` CSS class. Axis tick labels and lines are formatted with custom font sizes and colors from the stylesheet, and the title and axis labels use sans-serif typography. The code sets up an SVG element and applies D3’s selection and styling methods to present the temperature trend clearly.

Feb 26, 2020

Loading thumbnail…

Temperature in SF - line chart

This line chart shows one week of temperature in San Francisco, with time on the x-axis and temperature on the y-axis, rendered as a smooth maroon curve over a grid of axis ticks. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`, drawing SVG elements within an 960 by 500 viewport. Data is loaded as CSV from a remote URL and parsed with timestamps converted to `Date` objects and temperatures to numbers.

Feb 25, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point representing a vehicle. The chart uses D3’s `scaleLinear` for both axes and renders the data as semi-transparent circles, with gridlines from `axisBottom` and `axisLeft`. The data is loaded from a CSV file via `csv()`, and numeric fields are parsed before plotting. Axes are customized with tick labels and rotated text, while the title “CARS yo” appears above the plot.

Feb 25, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries, with each circle’s horizontal position encoding population and vertical position encoding country name. It uses d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis, and d3.axisBottom and d3.axisLeft for ticks. Data is loaded from a CSV and formatted with d3.format, rendering as SVG circles within styled axes and a title.

Feb 25, 2020

Loading thumbnail…

Testing the Bar Chart with UK data

This bar chart displays the number of households on local authority housing waiting lists across nine English regions for 2019, sourced from data.london.gov.uk. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are drawn as SVG rectangles, with axes generated via `axisLeft` and `axisBottom`. The chart includes a title and x-axis label, with a grey gridline via `tickSize` on the bottom axis.

Feb 25, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, scaled linearly along the x-axis and using a band scale for categorical country labels on the y-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with data loaded from a CSV file and rendered as SVG rectangles. Population values are formatted in abbreviated units (e.g., "1.41B") using D3's `format` function, and a custom axis label and title are added via SVG text elements.

Feb 25, 2020

Loading thumbnail…

FACETIME

A yellow SVG smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth animates its eyebrows and mouth with a series of timed transitions. Using D3 v5, the code builds the face with `d3.select`, `append`, `attr`, and `d3.arc` for the mouth path, while chained `transition().duration()` calls create sequential eyebrow and mouth rotations and translations.

Feb 24, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and positioned through a combination of inline attributes, CSS classes, and SVG transforms. It shows how to apply fill and stroke properties, group elements with `<g>`, and use scale and translate transformations to arrange shapes in a grid. The code relies on plain SVG markup, a linked `styles.css` stylesheet, and a video embedded from YouTube as supplementary context, with no JavaScript libraries involved.

Feb 24, 2020