morjyooo

@morjyooo·20 public vizzes

Making a Bar Chart

This bar chart visualizes the populations of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 to create an SVG with linear and band scales, displaying horizontal bars labeled by country. The chart’s axes are generated with `axisLeft` and `axisBottom`, while data is loaded from a CSV file and rendered as `rect` elements filled with steelblue, with a title added as a text element.

May 17, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, and lines—using inline SVG markup combined with an external CSS stylesheet. It shows the application of presentation attributes like `fill`, `stroke`, and `stroke-width` directly on SVG elements, as well as the use of the `<g>` element to group shapes and apply a unified `transform` and style properties to them collectively. The rendering relies entirely on the browser's native SVG support, with no JavaScript libraries involved.

May 16, 2021

Loading thumbnail…

Fork of Making a Bar Chart1

This bubble chart displays the relationship between the number of followers and followees for a sample of Twitter users, scaled from a dataset of user profiles. It shows each user as a circle, with the x-axis representing followers on a logarithmic scale and the y-axis listing user IDs. The radius of each bubble encodes the user’s fan count using a square-root scale. The visualization is rendered as an SVG using D3 v5, with axes and circles positioned via `d3.scaleLog`, `d3.scaleSqrt`, and `d3.scaleBand`.

Feb 26, 2021

Loading thumbnail…

Fork of Making a Bar Chart1

This example shows the population of the ten most populous countries in 2018, using circles to represent each country’s total population. The data comes from the United Nations World Population Prospects 2017. The chart is rendered as an SVG using D3 v5, with linear scaling for population values and band scaling for country names. The code employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization, and loads the data from a CSV file.

Feb 3, 2021

Loading thumbnail…

the number of the tweets per day

This visualization shows the number of tweets per day over time, plotted as a line chart with circular markers for each data point. The chart uses a time-scaled x-axis and linear y-axis, with gridlines and axis labels for clarity. The data is loaded from a local CSV file and rendered as SVG using D3 v4. The code employs `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with monotone curve smoothing, plus `d3.axisBottom` and `d3.axisLeft` for axes. A responsive update function redraws the chart on window resize.

Jan 24, 2021

Loading thumbnail…

Shapes with SVG and CSS

The visualization shows a daily count of users over time, displayed as a series of identical, fixed-size square shapes laid out on an SVG canvas. The code reads the date and user count from a local CSV file (123.csv) and uses D3 v5 to create the shapes. It defines time and linear scales for potential coordinate mapping but ultimately places each rectangle with a constant width and height of 200 pixels, without using the data values for sizing or positioning. The rendering relies on D3’s SVG selection and appending methods.

Jan 24, 2021

Loading thumbnail…

Fork of A week in San Francisco - Line chart

A line chart shows hourly temperature readings in San Francisco over a week, with time on the x-axis and degrees on the y-axis. The chart is rendered as an SVG using D3 v5, with scales built via `scaleTime` and `scaleLinear`, and the line path generated by `line` with `curveBasis`. Axes are added with `axisBottom` and `axisLeft`, and the data is loaded from a CSV file using `csv`.

Jan 24, 2021

Loading thumbnail…

Line chart1

A line chart displays the number of comments over time, plotting dates from a CSV file against temperature values on the y-axis. The visualization uses D3 v5 to render an SVG with a time-scaled x-axis, linear y-axis, grid lines, and a smoothed curve via `curveBasis`. Axes include labels, and the chart presents a title with data loaded asynchronously from `data.csv`.

Jan 23, 2021

Loading thumbnail…

Fork of A week in San Francisco - Line chart

This line chart visualizes the number of comments over time from a CSV dataset. The x-axis represents time, while the y-axis maps temperature, though the data lacks a temperature column. Built with D3 v5, the code uses `select`, `csv`, `line`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG with grid lines, axis labels, and a smooth curve. The chart displays a title and styled paths via CSS.

Jan 23, 2021

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

An interactive world map displays migrant deaths by location with bubble size proportional to total dead and missing. A linked time-series histogram below allows brushing to filter the map to a date range. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubbles, and `brushX` for the brushing interaction. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Dec 15, 2020

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of values between API endpoints in a Swagger-defined pet store, grouping operations like GET, POST, PUT, and DELETE toward response codes. Built with D3.js v3 and the custom `d3.sankey` layout, nodes are draggable via `d3.behavior.drag`, triggering `sankey.relayout()` to recompute link paths. The SVG rendering uses `sankey.link()` for curved, stroke-width-scaled flows and colors nodes by category. Input data comes from a JSON file mapping resource operations to HTTP methods and status codes.

Aug 28, 2020

Loading thumbnail…

SANKEY Experiment

This example shows an interactive Sankey diagram that visualizes API endpoint flows from a Swagger specification, with data loaded from a JSON file and laid out using the D3.js library. The diagram displays nodes and links where users can drag nodes to reposition them, triggering a relayout that recomputes the link paths. The visualization uses D3 v3.5.17's `d3.sankey` plugin and `d3.behavior.drag`. While the main chart is static, the repository also includes an animated SVG face with transitioning eyebrows, demonstrating additional D3 animation capabilities separate from the Sankey view.

Aug 28, 2020

Loading thumbnail…

Scatter-Simple

A dynamic scatterplot tracks the spread of COVID-19 across Hubei, China, from January to February 2020. Each circle represents a prefecture-level city, positioned by cumulative confirmed cases (x-axis) and newly confirmed cases (y-axis), both using a logarithmic scale. An animation cycles through daily snapshots, updating the data bound to each circle via D3's data join and `transition`. The visualization uses `d3.csv` to load the data and `d3.scaleLinear` for the axes, with circles colored by region and rendered as SVG within React.

Aug 25, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example visualizes country population data from `dataSet.csv` as simple SVG shapes, initially rendering a blank 900-by-580-pixel canvas. It uses D3 v5 to load and parse the CSV, converting the population strings to numbers. The example demonstrates styling with CSS by targeting `.lines` and `.lines path` rules, though the JavaScript only logs the parsed data to the console and does not yet draw any marks. The SVG and CSS structure suggests potential for future path-based charting, but the current code stops at data preparation.

Aug 20, 2020

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of data through HTTP endpoints, methods, and response codes for a pet store API. Built with D3.js, it uses the `d3.sankey` library to compute node positions and link paths, with the `d3.behavior.drag` API enabling manual node repositioning. The diagram shows the PetResource node connecting to various URL paths, which branch into HTTP methods (get, post, put, delete) and then into response codes (200, 400, 404, 405). Additional data files include a greenhouse gas emissions example and an animated SVG face with moving eyebrows.

Aug 20, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with red eyes and a black mouth is drawn in SVG using D3.js. The eyebrows animate up and down via chained `transition` calls, while the mouth is created with the `d3.arc` path generator. The face is centered using a `g` transform, and all shapes receive thick black strokes. The code uses D3 v5 selections and attributes to build and animate the static composition.

Aug 20, 2020

Loading thumbnail…

Let's make a face with D3.js!

Aug 19, 2020

Loading thumbnail…

Cars report

This example displays a text-based report of cars filtered by price, showing each vehicle’s year, make, model, and cost. The application imports car data from a JSON array and uses a `formatCar` function to structure each entry, while a `generateReport` function filters cars below a maximum price and joins the results. The output is rendered into an HTML `<pre>` element using React and vanilla JavaScript DOM manipulation, with the report styled via CSS for large, centered text.

Aug 18, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

A smiling face drawn with SVG shapes animates its eyebrows in a loop. The example demonstrates basic SVG elements—circle, rect, and path—styled with CSS and manipulated through D3 v5 selections and transitions. The face is centered using SVG transforms, with the mouth generated via `d3.arc` as a half-circle path. Eyebrows alternate between two vertical positions using chained `transition().duration(2000)` calls, creating a playful wink-like effect. All rendering is static SVG with animation handled purely through D3’s transition system.

Aug 18, 2020

Loading thumbnail…

Cars report

This example displays a simple text report of cars, listing year, make, model, and price for each vehicle with a price under $5,000. The cars data is defined as a JSON string within the code and parsed with `JSON.parse`. The processing uses JavaScript's `filter` and `map` methods to select and format each car into a readable line, which is then injected into the page via `textContent`. The interface is built with React, using `react` and `react-dom` libraries, while the final output is rendered in a `<pre>` element.

Aug 8, 2020